Ant Deign Vue搭建问题

     写作目的，并不是为了炫耀什么或者分享什么，纯粹是因为每次搭建的时候，都要去百度或者翻看之前的代码，故在此这里记录一下。

一. 按需加载

第一步，安装 babel-plugin-import 依赖，使用如下命令：

npm i babel-plugin-import -D 

第二步，在 babel.config.js 中的内容如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
        [
            "import",
            { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
        ]
    ]
}

第三步，如果在 main.js 中每引入某个组件，然后再 use 一下，会导致 main.js 看起来很乱。解决该问题，我们可以新建 src/utils 目录，然后再新建一个 antdv.js 文件(当然也可以叫其他名字)，然后在 main.js 中引入该 js 文件即可。

// src/utils/antdv.js 文件中的内容
import Vue from 'vue'
// 按需加载
import {Button, Layout, Menu, Row, Col} from 'ant-design-vue'
Vue.use(Button)
    .use(Layout)
    .use(Menu)
    .use(Row)
    .use(Col)

// main.js 中的内容
import '@/utils/antdv.js' 

二. sass-loader和node-sass的兼容性问题

每次安装 sass-loader 和 node-sass 的时候，每次都要被恶心一下，现已测出一个比较好的版本搭配。

node-sass@6.0.1

sass-loader@10.2.0

三. 自动打开浏览器以及端口设置

在根目录下创建 vue.config.js 在文件中加入如下内容：

module.exports = {
    devServer: {
        // 设置端口
        port: 8686,
        // 启动时自动打开浏览器
        open: true
    }
}