antd-pro-vue

安装

vue create vue-cli

npm i ant-design-vue moment

yarn add ant-design-vue
yarn add moment

在.eslintrc.js文件中配置关闭Prettier；
在rules中增加一行：“prettier/prettier”: “off”

配置 vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
};

配置 babel.config

module.exports = {
    presets: ['@vue/cli-plugin-babel/preset'],
    plugins: [
        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }], // `style: true` 会加载 less 文件
    ],
};

main.js

import { Button } from 'ant-design-vue';
Vue.use(Button);

进度条就是NProgress实现的效果

// to是跳转后的页面路由，from是跳转前的，next是必须要执行的，加上next路由才会跳转

router.beforeEach((to, from, next) => {
    if (to.path !== from.path) {
        NProgress.start();
    }
    next();
});
router.afterEach(() => {
    NProgress.done();
});