安装
使用 npm 或 yarn 安装
我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
$ npm install ant-design-vue --save
$ yarn add ant-design-vue
如果你的网络环境不佳，推荐使用 cnpm。
Install
$ npm install cnpm -g
If you're in China, maybe you should install it from our China mirror:
$ npm install cnpm -g --registry=https://r.npm.taobao.org
修改 src/main.js，引入 antd 的按钮组件以及全部样式文件。
import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';
Vue.component(Button.name, Button);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
修改 src/App.vue的 template 内容。
<template>
<div id="app">
<img src="./assets/logo.png">
<a-button type="primary">Button></a-button>
</div>
</template>
...
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件。
项目中安装 less 和 less-loader 命令
npm命令如下：
npm install less less-loader --save-dev
或者 yarn命令如下：
yarn add less less-loader --dev
Inline JavaScript is not enabled. Is it set in your options?
在vue2.0+ 版本 脚手架创建的项目中 ，less 引入出现了问题。
原因就是：less 版本 有问题，package.json 文件中 搜索 less，查看less 版本是不是 3.0+，如果是就改成3.0 以下版本。
修改后：
"less": "^2.5.1",
"less-loader": "^4.0.3",
重新 npm install 然后npm run dev 启动项目 就ok了。
VUE-CLI3全局引入less的变量
在使用Vue开发的过程中，通常会用到一些样式的全局变量，如果在每个组件中引入就太繁琐了，维护性也不好，因此全局引入是个不错的想法。下面以less为例，记录一下全局引入less变量的步骤：
1、首先安装依赖
在项目根目录的命令行工具里，执行以下命令。
|
1
|
`npm i style-resources-loader vue-cli-plugin-style-resources-loader -D`
|
推荐使用脚手架安装，会自动添加以下配置文件。
vue add style-resources-loader
2、配置vue.config.js文件
|
1
2
3
4
5
6
| const path = require("path"); module.exports = { pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [path.resolve(__dirname, "src/assets/theme.less")] } } } |
