vue cli 3 + Ant Design of Vue

一、安装 @vue/cli
如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉
// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装

npm uninstall vue-cli -g
# OR
yarn global remove vue-cli 

然后重新安装新版本的 @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

[注意：全局有vue，如果没有需要全局安装 npm install vue -g，如果安装之后提示‘vue 不是内部或外部命令,也不是可运行的程序 ’，则需要把找到vue.md文件，安装到环境变量里面，具体步骤：我的电脑右击----属性----高级系统设置---环境变量----系统变量---path---编辑----新建---填写vue.md地址--确定]

二、创建一个antd-dome

vue create antd-demo

创建项目-选择第二项

• 这里推荐选择第二项 Manually select features，然后根据自己的需求，使用空格键选择具体的模块

  
  
  空格选择需要项

• 勾选之后，使用回车键进入下一步

image

这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式，新手可以先从 hash 模式入手，不过实际项目通常采用 history 模式

• 然后选择一个合适 CSS 的预编译工具

  
  
  选择css预编译工具
  
  
  完成

三、vue.config.js配置

• 手动创建一个 vue.config.js，官方的配置文档可以参考这里

// vue.config.js
module.exports = {
  baseUrl: '/',
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  devServer: {
    open: true, // 启动服务后是否打开浏览器
    host: '0.0.0.0',
    port: 8080, // 服务端口
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },
}

四、安装并引入Ant Design of Vue

yarn add ant-design-vue

(1) 全局引用main.js

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

(2)按需引用组件需要babel-plugin-import

yarn add babel-plugin-import --dev

修改babel.config.js文件

module.exports = {
    presets: ["@vue/app"],
    plugins: [
        [
            "import",
            {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
        ]
    ]
};

main.js引用

import { Button } from 'ant-design-vue';
Vue.component(Button.name, Button)

应用

Button