antd-pro-vue

90 阅读 0 评论 60 点赞

我是靠谱客的博主细腻白开水，这篇文章主要介绍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

复制代码

1
2
3
4
5
6
7
8
9
10
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    },
};

配置 babel.config

复制代码

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

main.js

复制代码

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

进度条就是NProgress实现的效果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// to是跳转后的页面路由，from是跳转前的，next是必须要执行的，加上next路由才会跳转

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