新建一個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方式創(chuàng)建 （選擇自定義方式）

vue create projectname.png

Babel 是一個 JavaScript 編譯器
TypeScript 有興趣自己看，我們這里用的JavaScript
Progressive Web App (PWA) Support 這里我們是一個中后臺項目模板，不需要PWA
Router 路由
Vuex 狀態(tài)管理工具
CSS Pre-processors css預(yù)處理器
Linter / Formatter 在編輯器中報告檢測到的錯誤和警告
Unit Testing 單元測試
E2E Testing 端到端測試
然后選擇history模式 回車，
選擇一種預(yù)處理器 ： less 。 ant-design-vue 使用的是less 回車

選擇Less.png

使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格

pick additional lint features.png

配置文件單獨(dú)放一個文件.png

然后選擇 配置文件都是單獨(dú)的文件

保存當(dāng)前設(shè)置.png

保存當(dāng)前設(shè)置模板，方便以后創(chuàng)建使用。

三、安裝ant-design-vue

進(jìn)入項目目錄：cd projectname
運(yùn)行項目 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 文件
  ]
};

根目錄下創(chuàng)建這個文件 vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            less: { javascriptEnabled: true } // 開啟后 antd 樣式 可以引用.less文件
        }
    }
};