5.5.2、AntD Vue 使用

二、使用 webpack 生成项目

如果没有webpack可以顺便装一个 cnpm install -g webpack 安装全局的，用起来也方便

安装 web-pack：

cnpm install -g webpack

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack jeebiz-ui-antd

二、安装基础依赖

# With npm
cnpm install axios echarts vue-cookies vue-ueditor-wrap vuex vuex-along --save
cnpm install ckeditor4-vue dingtalk-jsapi --save
# With yarn
yarn add axios echarts vue-cookies vue-ueditor-wrap vuex vuex-along
yarn add ckeditor4-vue dingtalk-jsapi

2.1、配置 scss 解析

https://blog.csdn.net/robot7th/article/details/100642085

安装sass 依赖包 ，在cmd界面输入：

cnpm install node-sass sass-loader@7.3.1 --save-dev

2.找到build中webpack.base.conf.js,在rules中添加scss规则

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

⑤ scss使用测试：如下测试修改字体颜色

<style lang="scss">
$color:red;
div {color:$color;}
</style>

三、引入 ant-design-vue 前端组件

使用 npm 或 yarn 安装

推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

# With npm
$ npm install ant-design-vue --save

# With yarn
$ yarn add ant-design-vue

示例

import Vue from 'vue';
import { DatePicker } from 'ant-design-vue';
Vue.use(DatePicker);

引入样式：

import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

按需加载

下面两种方式都可以只加载用到的组件。

 使用 babel-plugin-import（推荐）。

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
      ]
    }

注意：webpack 1 无需设置 libraryDirectory。

然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'ant-design-vue';

手动引入

import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS