antd-pro-vue

最新推荐文章于 2025-10-17 05:02:12 发布

原创最新推荐文章于 2025-10-17 05:02:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

博客介绍了Vue项目的安装与配置过程。使用vue create创建项目，通过npm或yarn安装ant-design-vue和moment。还提到在.eslintrc.js文件中关闭Prettier，配置vue.config.js和babel.config，以及main.js，最后指出进度条由NProgress实现。

安装

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();
});