vue-cli3 + ant-design 项目

新建一个vue-cli3 + ant-design 项目

一、前提：

1. 安装vue-cli3 npm install -g @vue/cli
2. 安装 vue-antd npm install vue-antd --save

二、使用vue-cli3新建一个空的项目

新建vue-cli3项目有两种方式
1. vue create projectname
2. vue ui
以vue create name方式创建 （选择自定义方式）

vue create projectname.png

Babel 是一个 JavaScript 编译器
TypeScript 有兴趣自己看，我们这里用的JavaScript
Progressive Web App (PWA) Support 这里我们是一个中后台项目模板，不需要PWA
Router 路由
Vuex 状态管理工具
CSS Pre-processors css预处理器
Linter / Formatter 在编辑器中报告检测到的错误和警告
Unit Testing 单元测试
E2E Testing 端到端测试
然后选择history模式 回车，
选择一种预处理器 ： less 。 ant-design-vue 使用的是less 回车

选择Less.png

Pick a linter / formatter config: Prettier

使用ESLint+Prettier来统一前端代码风格

pick additional lint features.png

Pick additional lint features: ◉ Lint on save ◉ Lint and fix on commit
Pick a unit testing solution:Jest

配置文件单独放一个文件.png

然后选择 配置文件都是单独的文件

保存当前设置.png

保存当前设置模板，方便以后创建使用。

三、安装ant-design-vue

进入项目目录：cd projectname
运行项目 npm run serve

1. 安装antd的vue库npm install ant-design-vue --save-dev

2、在main文件中添加antd的全局引入

 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css' //引入的样式文件
 Vue.use(Antd)

3. 也可以在 babel 中配置引入的样式文件

需要安装 babel-plugin-import npm install --save babel-plugin-import
babel.config.js

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

根目录下创建这个文件 vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            less: { javascriptEnabled: true } // 开启后 antd 样式 可以引用.less文件
        }
    }
};