vue学习（2）手把手教你手动构建ant design项目

 首先确保你的vue-cli已经到了3.0以上，否则不能使用vue create命令。

全局安装 cnpm i -g @vue/[email protected]

首先,打开cmd，切换到你想放置项目的文件夹，如我想放到D:/学习，就如下设置

然后使用vue create 创建一个项目,名字任取，我取做vue_test,然后它会让你选择默认，还是手动添加，我们选择第二个，即

Manually select features

 出现如下几个配置项，我们选择Babel(实现按需加载),Router(路由),Vuex(状态管理)、Css Pre-processors(CSS预处理）、Linter/Formatter(代码规范）、Unit Testing(单元测试）

 按空格键选择好后，按回车,会出现如下选择

我们选择Y, 然后会出现让我们选择CSS预处理器

我们这里选择less，可以方便我们定制主题,回车看到如下选择

选择最后一项,回车，然后问我们什么时候进行代码规范，可以选择第一项：保存的时候

 然后是选择用哪种单元测试，我们就选择Jest

 然后问我们这些配置文件是放到package.json，还是独立一个文件，我们选择独立一个文件

出现如下选择，我们选择N 

然后就是等它去创建了，时间可能 有点长

我大约一分半后创建成功 

 现在，我们拥IDEA打开这个项目,可以看到这个项目包括了这些文件

现在，我们输入npm run serve来看一下效果,最后就是这个效果

现在我们看到package.json，发现我们还没有ant-design-vue,因此我们需要下载，输入npm i ant-design-vue，安装完毕后如下所示

package.json也有ant-design-vue了

好,现在我们就在main.js中引入ant-design-vue 

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";//引入Antd的css

Vue.use(Antd);

最后main.js如下所示

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

Vue.use(Antd);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

然后我们修改一下App.vue使用一下a-button来随便看看样式

<template>
  <div id="app">
      <a-button type="primary">按钮</a-button>
  </div>
</template>

<style lang="less">
#app {
}
</style>

运行npm run serve看看效果，可以看到按钮的样式出来了，说明我们Ant design框架已经运用成功

不过我们想用的是less，而不是css，虽然Antd下有less，但我们直接引入less是不行的，需要进行额外配置 

首先，我们需要自己创建一个vue.config.js在根目录下，然后输入如下代码，使用less-loader

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
};

这时，我们把引入的css改为less，再重新启动，就能发现得到一样的效果，说明我们less加载成功

现在，我们还想实现按需加载组件，不想直接引入所有组件，占据大量空间，我们这时可以使用babel,去下载babel-plugin-import

运行npm i babel-plugin-import -D,我们放到"devDependencies"里

 现在我们可以进行按需加载了,我们修改之前的引入代码，只引入Button

import { Button } from "ant-design-vue";

Vue.use(Button);

然后在babel.config.js添加配置,整个文件配置如下

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

再运行，会得到一样的效果，但引入大大减少，当我们需要增加组件时，只需往后添加即可

最后，我们希望自己来定制主题，不想用它默认的样式，less就可以帮助我们做到，因为它可以定义全局样式，我们在刚才写的vue.config.js里修改

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        //修改默认样式
        modifyVars: {
          "primary-color": "#1890ff", // 全局主色
          "link-color": "#1890ff", // 链接色
          "success-color": "#52c41a", // 成功色
          "warning-color": "#faad14", // 警告色
          "error-color": "#f5222d", // 错误色
          "font-size-base": "14px", // 主字号
          "heading-color": "rgba(0, 0, 0, 0.85)", // 标题色
          "text-color": "rgba(0, 0, 0, 0.65)", // 主文本色
          "text-color-secondary": "rgba(0, 0, 0, 0.45)", // 次文本色
          "disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
          "border-radius-base": "4px", // 组件/浮层圆角
          "border-color-base": "#d9d9d9", // 边框色
          "box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)" // 浮层阴影
        },
        javascriptEnabled: true
      }
    }
  }
};

这几个样式是Ant design默认的样式，我们可以根据自己的需要自己去修改。

现在我们就能愉快地使用Ant Design组件来做自己的事了。