3 |
5 |
6 |
7 |
19 |
20 |
28 |
--------------------------------------------------------------------------------
/.husky/_/husky.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | if [ -z "$husky_skip_init" ]; then
3 | debug () {
4 | [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
5 | }
6 |
7 | readonly hook_name="$(basename "$0")"
8 | debug "starting $hook_name..."
9 |
10 | if [ "$HUSKY" = "0" ]; then
11 | debug "HUSKY env variable is set to 0, skipping hook"
12 | exit 0
13 | fi
14 |
15 | if [ -f ~/.huskyrc ]; then
16 | debug "sourcing ~/.huskyrc"
17 | . ~/.huskyrc
18 | fi
19 |
20 | export readonly husky_skip_init=1
21 | sh -e "$0" "$@"
22 | exitCode="$?"
23 |
24 | if [ $exitCode != 0 ]; then
25 | echo "husky - $hook_name hook exited with code $exitCode (error)"
26 | fi
27 |
28 | exit $exitCode
29 | fi
30 |
--------------------------------------------------------------------------------
/src/icons/components/edit.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* tslint:disable */
3 | // @ts-ignore
4 | import icon from 'vue-svgicon'
5 | icon.register({
6 | 'edit': {
7 | width: 128,
8 | height: 128,
9 | viewBox: '0 0 128 128',
10 | data: '
3 |
10 | 打开引导
16 |
17 |
18 |
19 |
42 |
--------------------------------------------------------------------------------
/src/icons/svg/exit-fullscreen.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/settings.ts:
--------------------------------------------------------------------------------
1 | interface ISettings {
2 | title: string; // Overrides the default title
3 | showSettings: boolean; // Controls settings panel display
4 | // showTagsView: boolean // Controls tagsview display
5 | // showSidebarLogo: boolean // Controls siderbar logo display
6 | // fixedHeader: boolean // If true, will fix the header component
7 | // errorLog: string[] // The env to enable the errorlog component, default 'production' only
8 | sidebarTextTheme: boolean; // If true, will change active text color for sidebar based on theme
9 | // devServerPort: number // Port number for webpack-dev-server
10 | // mockServerPort: number // Port number for mock server
11 | }
12 |
13 | // You can customize below settings :)
14 | const settings: ISettings = {
15 | title: "ts-vue",
16 | showSettings: true,
17 | // showTagsView: true,
18 | // fixedHeader: false,
19 | // showSidebarLogo: false,
20 | // errorLog: ['production'],
21 | sidebarTextTheme: true
22 | // devServerPort: 9527,
23 | // mockServerPort: 9528
24 | };
25 |
26 | export default settings;
27 |
--------------------------------------------------------------------------------
/src/icons/svg/setting.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/components/eye-on.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* tslint:disable */
3 | // @ts-ignore
4 | import icon from 'vue-svgicon'
5 | icon.register({
6 | 'eye-on': {
7 | width: 128,
8 | height: 128,
9 | viewBox: '0 0 1024 1024',
10 | data: '
3 |
5 |
6 |
7 |
52 |
--------------------------------------------------------------------------------
/src/icons/svg/dashboard.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/icons/components/exit-fullscreen.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* tslint:disable */
3 | // @ts-ignore
4 | import icon from 'vue-svgicon'
5 | icon.register({
6 | 'exit-fullscreen': {
7 | width: 128,
8 | height: 128,
9 | viewBox: '0 0 128 128',
10 | data: '
3 |
5 |
6 |
7 |
38 |
39 |
50 |
--------------------------------------------------------------------------------
/src/icons/components/tree.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* tslint:disable */
3 | // @ts-ignore
4 | import icon from 'vue-svgicon'
5 | icon.register({
6 | 'tree': {
7 | width: 128,
8 | height: 128,
9 | viewBox: '0 0 128 128',
10 | data: '
3 |
20 |
21 |
22 |
44 |
45 |
70 |
--------------------------------------------------------------------------------
/src/components/Charts/mixins/resize.ts:
--------------------------------------------------------------------------------
1 | import { ECharts } from "echarts";
2 | import { Component, Vue } from "vue-property-decorator";
3 |
4 | @Component({
5 | name: "ResizeMixin"
6 | })
7 | export default class extends Vue {
8 | protected chart!: ECharts | null;
9 | private sidebarElm?: Element;
10 |
11 | mounted() {
12 | this.initResizeEvent();
13 | this.initSidebarResizeEvent();
14 | }
15 |
16 | beforeDestroy() {
17 | this.destroyResizeEvent();
18 | this.destroySidebarResizeEvent();
19 | }
20 |
21 | activated() {
22 | this.initResizeEvent();
23 | this.initSidebarResizeEvent();
24 | }
25 |
26 | deactivated() {
27 | this.destroyResizeEvent();
28 | this.destroySidebarResizeEvent();
29 | }
30 |
31 | private chartResizeHandler() {
32 | if (this.chart) {
33 | this.chart.resize();
34 | }
35 | }
36 |
37 | private sidebarResizeHandler(e: TransitionEvent) {
38 | if (e.propertyName === "width") {
39 | this.chartResizeHandler();
40 | }
41 | }
42 |
43 | private initResizeEvent() {
44 | if (this.chartResizeHandler) {
45 | window.addEventListener("resize", this.chartResizeHandler);
46 | }
47 | }
48 |
49 | private destroyResizeEvent() {
50 | if (this.chartResizeHandler) {
51 | window.removeEventListener("resize", this.chartResizeHandler);
52 | }
53 | }
54 |
55 | private initSidebarResizeEvent() {
56 | this.sidebarElm = document.getElementsByClassName("sidebar-container")[0];
57 | if (this.sidebarElm) {
58 | this.sidebarElm.addEventListener("transitionend", this
59 | .sidebarResizeHandler as EventListener);
60 | }
61 | }
62 |
63 | private destroySidebarResizeEvent() {
64 | if (this.sidebarElm) {
65 | this.sidebarElm.removeEventListener("transitionend", this
66 | .sidebarResizeHandler as EventListener);
67 | }
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/store/modules/app.ts:
--------------------------------------------------------------------------------
1 | import {
2 | VuexModule,
3 | Module,
4 | Mutation,
5 | Action,
6 | getModule
7 | } from "vuex-module-decorators";
8 | import { getSidebarStatus, setSidebarStatus } from "@/utils/cookies";
9 | import store from "@/store";
10 |
11 | export enum DeviceType { // 定义设备枚举类型
12 | Mobile,
13 | Desktop
14 | }
15 |
16 | export interface IAppState {
17 | // 定义state接口类型
18 | device: DeviceType;
19 | sidebar: {
20 | opened: boolean;
21 | withoutAnimation: boolean;
22 | };
23 | }
24 |
25 | @Module({ dynamic: true, store, name: "app" })
26 | class App extends VuexModule implements IAppState {
27 | public sidebar = {
28 | opened: getSidebarStatus() !== "closed",
29 | withoutAnimation: false
30 | };
31 | public device = DeviceType.Desktop;
32 |
33 | @Mutation
34 | private TOGGLE_SIDEBAR(withoutAnimation: boolean) {
35 | // 切换siderBar状态
36 | this.sidebar.opened = !this.sidebar.opened;
37 | this.sidebar.withoutAnimation = withoutAnimation;
38 | if (this.sidebar.opened) {
39 | setSidebarStatus("opened");
40 | } else {
41 | setSidebarStatus("closed");
42 | }
43 | }
44 |
45 | @Mutation
46 | private CLOSE_SIDEBAR(withoutAnimation: boolean) {
47 | this.sidebar.opened = false;
48 | this.sidebar.withoutAnimation = withoutAnimation;
49 | setSidebarStatus("closed");
50 | }
51 |
52 | @Mutation
53 | private TOGGLE_DEVICE(device: DeviceType) {
54 | this.device = device;
55 | }
56 |
57 | @Action
58 | public ToggleSideBar(withoutAnimation: boolean) {
59 | this.TOGGLE_SIDEBAR(withoutAnimation);
60 | }
61 |
62 | @Action
63 | public CloseSideBar(withoutAnimation: boolean) {
64 | this.CLOSE_SIDEBAR(withoutAnimation);
65 | }
66 |
67 | @Action
68 | public ToggleDevice(device: DeviceType) {
69 | this.TOGGLE_DEVICE(device);
70 | }
71 | }
72 |
73 | export const AppModule = getModule(App);
74 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export const parseTime = (
2 | time?: object | string | number,
3 | cFormat?: string
4 | ): string | null => {
5 | if (time === undefined) {
6 | return null;
7 | }
8 | const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
9 | let date: Date;
10 | if (typeof time === "object") {
11 | date = time as Date;
12 | } else {
13 | if (typeof time === "string" && /^[0-9]+$/.test(time)) {
14 | time = parseInt(time);
15 | }
16 | if (typeof time === "number" && time.toString().length === 10) {
17 | time = time * 1000;
18 | }
19 | date = new Date(time);
20 | }
21 | const formatObj: { [key: string]: number } = {
22 | y: date.getFullYear(),
23 | m: date.getMonth() + 1,
24 | d: date.getDate(),
25 | h: date.getHours(),
26 | i: date.getMinutes(),
27 | s: date.getSeconds(),
28 | a: date.getDay()
29 | };
30 | const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
31 | let value = formatObj[key];
32 | // Note: getDay() returns 0 on Sunday
33 | if (key === "a") {
34 | return ["日", "一", "二", "三", "四", "五", "六"][value];
35 | }
36 | if (result.length > 0 && value < 10) {
37 | return "0" + value;
38 | }
39 | return String(value) || "0";
40 | });
41 | return timeStr;
42 | };
43 |
44 | // Check if an element has a class
45 | export const hasClass = (ele: HTMLElement, className: string) => {
46 | return !!ele.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
47 | };
48 |
49 | // Add class to element
50 | export const addClass = (ele: HTMLElement, className: string) => {
51 | if (!hasClass(ele, className)) ele.className += " " + className;
52 | };
53 |
54 | // Remove class from element
55 | export const removeClass = (ele: HTMLElement, className: string) => {
56 | if (hasClass(ele, className)) {
57 | const reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
58 | ele.className = ele.className.replace(reg, " ");
59 | }
60 | };
61 |
--------------------------------------------------------------------------------
/src/utils/scroll-to.ts:
--------------------------------------------------------------------------------
1 | const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
2 | t /= d / 2;
3 | if (t < 1) {
4 | return (c / 2) * t * t + b;
5 | }
6 | t--;
7 | return (-c / 2) * (t * (t - 2) - 1) + b;
8 | };
9 |
10 | // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
11 | const requestAnimFrame = (function() {
12 | return (
13 | window.requestAnimationFrame ||
14 | window.webkitRequestAnimationFrame ||
15 | (window as any).mozRequestAnimationFrame ||
16 | function(callback) {
17 | window.setTimeout(callback, 1000 / 60);
18 | }
19 | );
20 | })();
21 |
22 | // Because it's so fucking difficult to detect the scrolling element, just move them all
23 | const move = (amount: number) => {
24 | document.documentElement.scrollTop = amount;
25 | (document.body.parentNode as HTMLElement).scrollTop = amount;
26 | document.body.scrollTop = amount;
27 | };
28 |
29 | const position = () => {
30 | return (
31 | document.documentElement.scrollTop ||
32 | (document.body.parentNode as HTMLElement).scrollTop ||
33 | document.body.scrollTop
34 | );
35 | };
36 |
37 | export const scrollTo = (to: number, duration: number, callback?: Function) => {
38 | const start = position();
39 | const change = to - start;
40 | const increment = 20;
41 | let currentTime = 0;
42 | duration = typeof duration === "undefined" ? 500 : duration;
43 | const animateScroll = function() {
44 | // increment the time
45 | currentTime += increment;
46 | // find the value with the quadratic in-out easing function
47 | const val = easeInOutQuad(currentTime, start, change, duration);
48 | // move the document.body
49 | move(val);
50 | // do the animation unless its over
51 | if (currentTime < duration) {
52 | requestAnimFrame(animateScroll);
53 | } else {
54 | if (callback && typeof callback === "function") {
55 | // the animation is done so lets callback
56 | callback();
57 | }
58 | }
59 | };
60 | animateScroll();
61 | };
62 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
19 | 系统设置
5 | 6 |
7 | 主题色
8 |
13 |
14 |
15 | 侧边栏文字主题色
16 |
18 |
3 |
15 |
16 |
17 |
65 |
66 |
76 |
--------------------------------------------------------------------------------
/src/views/tree/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
18 |
19 |
97 |
--------------------------------------------------------------------------------
/src/views/dashboard/editor/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
28 |
29 |
59 |
60 |
95 |
--------------------------------------------------------------------------------
/src/peimission.ts:
--------------------------------------------------------------------------------
1 | import router from "./router";
2 | import NProgress from "nprogress";
3 | import "nprogress/nprogress.css";
4 | import { Message } from "element-ui";
5 | import { Route, RouteConfig } from "vue-router";
6 | import { UserModule } from "@/store/modules/user";
7 | import { PermissionModule } from "@/store/modules/permission";
8 |
9 | NProgress.configure({ showSpinner: false });
10 |
11 | const whiteList = ["/login"];
12 |
13 | router.beforeEach(async (to: Route, _: Route, next: any) => {
14 | // Start progress bar
15 | NProgress.start();
16 |
17 | // Determine whether the user has logged in
18 | if (UserModule.token) {
19 | if (to.path === "/login") {
20 | // If is logged in, redirect to the home page
21 | next({ path: "/" });
22 | NProgress.done();
23 | } else {
24 | // Note: roles must be a object array! such as: ['admin'] or ['developer', 'editor']
25 | if (UserModule.roles.length === 0) {
26 | try {
27 | // Get user info, including roles
28 | await UserModule.GetUserInfo();
29 | const roles = UserModule.roles;
30 | // Generate accessible routes map based on role
31 | console.log("角色", roles);
32 |
33 | const accessedRoutes: any = await PermissionModule.GenerateRoutes(
34 | roles
35 | );
36 | // Dynamically add accessible routes
37 | router.addRoutes(accessedRoutes);
38 | // Set the replace: true, so the navigation will not leave a history record
39 |
40 | next({ ...to, replace: true });
41 | } catch (err) {
42 | // Remove token and redirect to login page
43 | UserModule.ResetToken();
44 | Message.error(err || "Has Error");
45 | next(`/login?redirect=${to.path}`);
46 | NProgress.done();
47 | }
48 | } else {
49 | next();
50 | }
51 | }
52 | } else {
53 | // Has no token
54 | if (whiteList.indexOf(to.path) !== -1) {
55 | // In the free login whitelist, go directly
56 | next();
57 | } else {
58 | // Other pages that do not have permission to access are redirected to the login page.
59 | next(`/login?redirect=${to.path}`);
60 | NProgress.done();
61 | }
62 | }
63 | });
64 |
65 | router.afterEach((to: Route) => {
66 | // Finish progress bar
67 | NProgress.done();
68 |
69 | // set page title
70 | document.title = to.meta.title;
71 | });
72 |
--------------------------------------------------------------------------------
/src/store/modules/permission.ts:
--------------------------------------------------------------------------------
1 | import {
2 | VuexModule,
3 | Module,
4 | Mutation,
5 | Action,
6 | getModule
7 | } from "vuex-module-decorators";
8 | import { RouteConfig } from "vue-router";
9 | import { asyncRoutes, constantRoutes } from "@/router";
10 | import store from "@/store";
11 |
12 | const hasPermission = (roles: string[], route: RouteConfig) => {
13 | if (route.meta && route.meta.roles) {
14 | return roles.some(role => route.meta.roles.includes(role));
15 | } else {
16 | return true;
17 | }
18 | };
19 |
20 | const deepCopy = (source: any): any => {
21 | if (!source) {
22 | return source;
23 | }
24 | let sourceCopy: any = source instanceof Array ? [] : {};
25 | for (let item in source) {
26 | sourceCopy[item] =
27 | typeof source[item] === "object" ? deepCopy(source[item]) : source[item];
28 | }
29 | return sourceCopy;
30 | };
31 |
32 | export const filterAsyncRoutes = (routes: RouteConfig[], roles: string[]) => {
33 | const res: RouteConfig[] = [];
34 | routes.forEach(route => {
35 | const tmp = { ...route };
36 | if (hasPermission(roles, tmp)) {
37 | if (tmp.children) {
38 | tmp.children = filterAsyncRoutes(tmp.children, roles);
39 | }
40 | res.push(tmp);
41 | }
42 | });
43 | return res;
44 | };
45 |
46 | export interface IPermissionState {
47 | routes: RouteConfig[];
48 | dynamicRoutes: RouteConfig[];
49 | }
50 |
51 | @Module({ dynamic: true, store, name: "permission" })
52 | class Permission extends VuexModule implements IPermissionState {
53 | public routes: RouteConfig[] = [];
54 | public dynamicRoutes: RouteConfig[] = [];
55 |
56 | @Mutation
57 | private SET_ROUTES(routes: RouteConfig[]) {
58 | this.routes = constantRoutes.concat(routes);
59 | console.log("完整路由", this.routes);
60 | this.dynamicRoutes = routes;
61 | }
62 |
63 | @Action
64 | public GenerateRoutes(roles: string[]) {
65 | // let accessedRoutes;
66 | // if (roles.includes("admin")) {
67 | // accessedRoutes = asyncRoutes;
68 | // } else {
69 | // accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
70 | // }
71 | // this.SET_ROUTES(accessedRoutes);
72 |
73 | return new Promise(resolve => {
74 | let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
75 | this.SET_ROUTES(accessedRoutes);
76 | resolve(accessedRoutes);
77 | });
78 | }
79 | }
80 |
81 | export const PermissionModule = getModule(Permission);
82 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/BarChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
98 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
15 |
16 |
23 |
17 |
18 | Editor's Dashboard
21 |
22 |
24 | ![]()
25 |
26 |
3 |
4 |
6 |
7 |
25 |
26 |
30 |
31 |
32 |
33 |
34 |
71 |
72 |
98 |
--------------------------------------------------------------------------------
/src/views/table/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
27 |
29 |
3 |
4 |
5 |
6 | {{ scope.row.id }}
7 |
8 |
9 |
10 |
11 | {{ scope.row.timestamp | parseTime }}
12 |
13 |
14 |
15 |
16 |
17 | {{ scope.row.author }}
18 |
19 |
20 |
21 |
22 | {{
23 | row.status
24 | }}
25 |
26 |
27 |
28 |
29 |
30 |
31 | Edit
34 |
35 |
36 |
37 |
38 |
46 |
47 |
48 |
87 |
88 |
99 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
17 |
18 |
19 |
56 |
57 |
127 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/LineChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
121 |
122 |
123 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const name = "TS-VUE";
3 | const sourceMap = process.env.NODE_ENV === "development";
4 |
5 | const devServerPort = 9527;
6 | const mockServerPort = 9528;
7 |
8 | module.exports = {
9 | publicPath: "/", // 基本路径
10 | outputDir: "dist", // 输出文件目录
11 | lintOnSave: process.env.NODE_ENV === "development", // eslint-loader 是否在保存的时候检查
12 | chainWebpack: config => {
13 | // Provide the app's title in webpack's name field, so that
14 | // it can be accessed in index.html to inject the correct title.
15 | config.set("name", name);
16 | },
17 | // configureWebpack: config => {
18 | // if (process.env.NODE_ENV === "production") {
19 | // // 为生产环境修改配置...
20 | // config.mode = "production";
21 | // } else {
22 | // // 为开发环境修改配置...
23 | // config.mode = "development";
24 | // }
25 |
26 | // Object.assign(config, {
27 | // // 开发生产共同配置
28 | // resolve: {
29 | // extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
30 | // alias: {
31 | // vue$: "vue/dist/vue.js",
32 | // "@": path.resolve(__dirname, "./src"),
33 | // "@c": path.resolve(__dirname, "./src/components"),
34 | // utils: path.resolve(__dirname, "./src/utils"),
35 | // less: path.resolve(__dirname, "./src/less"),
36 | // views: path.resolve(__dirname, "./src/views"),
37 | // assets: path.resolve(__dirname, "./src/assets"),
38 | // com: path.resolve(__dirname, "./src/components"),
39 | // store: path.resolve(__dirname, "./src/store"),
40 | // mixins: path.resolve(__dirname, "./src/mixins")
41 | // }
42 | // }
43 | // });
44 | // },
45 | productionSourceMap: sourceMap, // 生产环境是否生成 sourceMap 文件
46 | css: {
47 | // css相关配置
48 | // 是否使用css分离插件 ExtractTextPlugin
49 | extract: true,
50 | // 开启 CSS source maps?
51 | sourceMap: false,
52 | // css预设器配置项
53 | loaderOptions: {},
54 | // 启用 CSS modules for all css / pre-processor files.
55 | modules: false
56 | },
57 | // use thread-loader for babel & TS in production build
58 | // enabled by default if the machine has more than 1 cores
59 | parallel: require("os").cpus().length > 1,
60 | // PWA 插件相关配置
61 | // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
62 | pwa: {},
63 | devServer: {
64 | open: true,
65 | compress: true,
66 | host: "localhost",
67 | port: devServerPort,
68 | hot: true,
69 | proxy:
70 | "https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/",
71 | // proxy: {
72 | // // 设置代理
73 | // // proxy all requests starting with /api to jsonplaceholder
74 | // [process.env.VUE_APP_BASE_API]: {
75 | // target: `http://localhost:${mockServerPort}/mock-api/v1`,
76 | // changeOrigin: true,
77 | // pathRewite: {
78 | // ["^" + process.env.VUE_APP_BASE_API]: ""
79 | // }
80 | // }
81 | // },
82 | before: app => {} // 用于在服务器内部所有中间件执行前定义自定义处理程序，即此选项可在本地模拟服务器数据返回。参考https://github.com/lbwa/set/issues/8
83 | },
84 | // 第三方插件配置
85 | pluginOptions: {
86 | // style-resources-loader(https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader)
87 | // 导入一些公共的样式文件，比如：variables / mixins / functions，避免在每个样式文件中手动的@import导入
88 | "style-resources-loader": {
89 | preProcessor: "scss",
90 | patterns: [
91 | path.resolve(__dirname, "src/styles/_variables.scss"),
92 | path.resolve(__dirname, "src/styles/_mixins.scss")
93 | ]
94 | }
95 | }
96 | };
97 |
--------------------------------------------------------------------------------
/src/components/RightPanel/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
13 |
15 |
16 |
3 |
4 |
17 |
18 |
19 |
79 |
80 |
87 |
88 |
148 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ts-vue
2 |
3 |
5 |
12 |
16 |
13 |
15 |
4 |
5 | 
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
3 |
44 |
45 |
46 |
81 |
82 |
149 |
--------------------------------------------------------------------------------
/src/views/table/components/ArticleDetail.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
18 |
23 |
24 | Home
25 |
26 |
27 | Github
28 |
29 |
37 |
38 | LogOut
39 |
40 |
41 |
42 |
43 |
19 | 
20 |
21 |
22 |
20 |
21 |
3 |
9 |
14 |
22 |
29 |
30 |
31 |
38 |
39 |
44 |
45 |
52 |
53 |
54 |
144 |
145 |
150 |
--------------------------------------------------------------------------------
/src/components/InterstingDemo/tableRowEdit.vue:
--------------------------------------------------------------------------------
1 |
2 |
46 | 保存
49 |
50 |
51 |
63 | 保存
64 | 取消
65 |
66 |
67 |
68 |
69 | 编辑
70 |
71 |
72 |
10 |
13 |
17 |
21 |
29 |
30 |
31 |
32 |
33 |
50 |
51 |
52 |
53 |
138 |
184 |
185 |
196 |
--------------------------------------------------------------------------------
/src/components/ThemePicker/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
46 |
47 |
48 |
57 |
58 |
252 |
--------------------------------------------------------------------------------
/src/views/error-page/404.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
45 |
5 | 
10 | 
15 |
20 |
25 |
26 |
10 |
15 |
20 |
25 |
27 |
44 | OOPS!
28 |
29 | All rights reserved
30 | wallstreetcn
36 |
37 | {{ message }}
38 |
39 | Please check that the URL you entered is correct, or click the button
40 | below to return to the homepage.
41 |
42 | Back to home
43 |
3 |
46 |
47 |
48 |
57 |
58 |
252 |
--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | ## 在 vue 中使用 typescript
2 |
3 | ### vue-property-decorator
4 |
5 | ```
6 | import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
7 | ```
8 |
9 | - 组件声明
10 |
11 | 创建组件的方式变成如下
12 |
13 | ```
14 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
15 |
16 | @Component
17 | export default class Test extends Vue {
18 |
19 | }
20 |
21 | ```
22 |
23 | - data 对象
24 |
25 | ```
26 | import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
27 |
28 | @Component
29 | export default class Test extends Vue {
30 | private name: string;
31 | }
32 | ```
33 |
34 | - Prop 声明
35 |
36 | ```
37 | @Prop({ default: false }) private isCollapse!: boolean;
38 | @Prop({ default: true }) private isFirstLevel!: boolean;
39 | @Prop({ default: "" }) private basePath!: string;
40 | ```
41 |
42 | - !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
43 | - @Prop(options: (PropOptions | Constructor[] | Constructor) = {})
44 | - PropOptions，可以使用以下选项：type，default，required，validator
45 | - Constructor[]，指定 prop 的可选类型
46 | - Constructor，例如 String，Number，Boolean 等，指定 prop 的类型
47 |
48 | - method
49 |
50 | js 下是需要在 method 对象中声明方法，现变成如下
51 |
52 | ```
53 | public clickFunc(): void {
54 | console.log(this.name)
55 | console.log(this.msg)
56 | }
57 | ```
58 |
59 | - Watch 监听属性
60 |
61 | ```
62 | @Watch("$route", { immediate: true })
63 | private onRouteChange(route: Route) {
64 | const query = route.query as Dictionary
4 |
45 |
5 |
10 |
15 |
20 |
25 |
26 |
10 |
15 |
20 |
25 |
27 |
44 | OOPS!
28 |
29 | All rights reserved
30 | wallstreetcn
36 |
37 | {{ message }}
38 |
39 | Please check that the URL you entered is correct, or click the button
40 | below to return to the homepage.
41 |
42 | Back to home
43 |
3 |
11 |
16 |
17 |
28 |
29 |
30 |
31 |
49 |
50 | Sign in
57 |
58 |
65 |
66 |
67 |
68 |
164 |
165 |
205 |
206 |
286 |
--------------------------------------------------------------------------------
12 |
14 |
15 | Login Form
13 |
59 |
64 |
60 | username: admin
61 | password: any
62 |
63 |