docs: update to vue-cli3 (#304)
parent
68ca7b907b
commit
b965d8979c
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
# Use in vue-cli 3
|
# Use in vue-cli 3
|
||||||
|
|
||||||
[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
|
[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
|
||||||
|
|
||||||
|
|
||||||
## Install and Initialization
|
## Install and Initialization
|
||||||
|
|
||||||
We need to install `vue-cli` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
|
We need to install `vue-cli` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
|
||||||
|
@ -64,22 +62,23 @@ $ yarn add ant-design-vue
|
||||||
Modify `src/main.js`, import Button component from `antd`.
|
Modify `src/main.js`, import Button component from `antd`.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import Vue from 'vue'
|
import Vue from "vue";
|
||||||
import Button from 'ant-design-vue/lib/button'
|
import Button from "ant-design-vue/lib/button";
|
||||||
import 'ant-design-vue/dist/antd.css'
|
import "ant-design-vue/dist/antd.css";
|
||||||
import App from './App'
|
import App from "./App";
|
||||||
|
|
||||||
Vue.component(Button.name, Button)
|
Vue.component(Button.name, Button);
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
/* eslint-disable no-new */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: "#app",
|
||||||
components: { App },
|
components: { App },
|
||||||
template: '<App/>'
|
template: "<App/>"
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Modify `src/App.vue`。
|
Modify `src/App.vue`。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
@ -93,10 +92,8 @@ Modify `src/App.vue`。
|
||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vue-cli` at its [User Guide ](https://github.com/vuejs/vue-cli/blob/master/README.md).
|
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vue-cli` at its [User Guide ](https://github.com/vuejs/vue-cli/blob/master/README.md).
|
||||||
|
|
||||||
|
|
||||||
## Advanced Guides
|
## Advanced Guides
|
||||||
|
|
||||||
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo.
|
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo.
|
||||||
|
@ -112,6 +109,8 @@ Now we need to customize the default webpack config.
|
||||||
$ yarn add babel-plugin-import --dev
|
$ yarn add babel-plugin-import --dev
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### if you use vue-cli 2
|
||||||
|
|
||||||
Modify `.babelrc`.
|
Modify `.babelrc`.
|
||||||
|
|
||||||
```diff
|
```diff
|
||||||
|
@ -134,6 +133,22 @@ Modify `.babelrc`.
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### if you use vue-cli 3
|
||||||
|
|
||||||
|
Modify `babel.config.js`
|
||||||
|
|
||||||
|
```diff
|
||||||
|
module.exports = {
|
||||||
|
presets: ["@vue/app"],
|
||||||
|
+ plugins: [
|
||||||
|
+ [
|
||||||
|
+ "import",
|
||||||
|
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
|
||||||
|
+ ]
|
||||||
|
+ ]
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
Remove the `import 'ant-design-vue/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
Remove the `import 'ant-design-vue/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||||
|
|
||||||
```diff
|
```diff
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
|
|
||||||
# 在 vue-cli 3 中使用
|
# 在 vue-cli 3 中使用
|
||||||
|
|
||||||
[vue-cli](https://github.com/vuejs/vue-cli) 是业界最优秀的 Vue 应用开发工具之一,本文会尝试在 vue-cli 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。
|
[vue-cli](https://github.com/vuejs/vue-cli) 是业界最优秀的 Vue 应用开发工具之一,本文会尝试在 vue-cli 创建的工程中使用 antd 组件,并自定义 webpack 的配置以满足各类工程化需求。
|
||||||
|
|
||||||
|
|
||||||
## 安装和初始化
|
## 安装和初始化
|
||||||
|
|
||||||
我们需要在命令行中安装 vue-cli 工具,你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
我们需要在命令行中安装 vue-cli 工具,你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
||||||
|
@ -63,23 +61,24 @@ $ yarn add ant-design-vue
|
||||||
修改 `src/main.js`,引入 antd 的按钮组件以及全部样式文件。
|
修改 `src/main.js`,引入 antd 的按钮组件以及全部样式文件。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import Vue from 'vue'
|
import Vue from "vue";
|
||||||
import Button from 'ant-design-vue/lib/button'
|
import Button from "ant-design-vue/lib/button";
|
||||||
import 'ant-design-vue/dist/antd.css'
|
import "ant-design-vue/dist/antd.css";
|
||||||
import App from './App'
|
import App from "./App";
|
||||||
|
|
||||||
Vue.component(Button.name, Button)
|
Vue.component(Button.name, Button);
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
/* eslint-disable no-new */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: "#app",
|
||||||
components: { App },
|
components: { App },
|
||||||
template: '<App/>'
|
template: "<App/>"
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
修改 `src/App.vue`的template内容。
|
|
||||||
|
修改 `src/App.vue`的 template 内容。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<template>
|
<template>
|
||||||
|
@ -108,7 +107,9 @@ new Vue({
|
||||||
$ yarn add babel-plugin-import --dev
|
$ yarn add babel-plugin-import --dev
|
||||||
```
|
```
|
||||||
|
|
||||||
修改`.babelrc`文件,配置babel-plugin-import
|
#### 使用 vue-cli 2 的小伙伴
|
||||||
|
|
||||||
|
修改`.babelrc`文件,配置 babel-plugin-import
|
||||||
|
|
||||||
```diff
|
```diff
|
||||||
{
|
{
|
||||||
|
@ -130,6 +131,21 @@ $ yarn add babel-plugin-import --dev
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### 使用 vue-cli 3 的小伙伴
|
||||||
|
|
||||||
|
修改`babel.config.js`文件,配置 babel-plugin-import
|
||||||
|
|
||||||
|
```diff
|
||||||
|
module.exports = {
|
||||||
|
presets: ["@vue/app"],
|
||||||
|
+ plugins: [
|
||||||
|
+ [
|
||||||
|
+ "import",
|
||||||
|
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
|
||||||
|
+ ]
|
||||||
|
+ ]
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
然后移除前面在 `src/main.js` 里全量添加的 `import 'ant-design-vue/dist/antd.css';` 样式代码,并且按下面的格式引入模块。
|
然后移除前面在 `src/main.js` 里全量添加的 `import 'ant-design-vue/dist/antd.css';` 样式代码,并且按下面的格式引入模块。
|
||||||
|
|
||||||
|
@ -158,4 +174,3 @@ $ yarn add babel-plugin-import --dev
|
||||||
### 自定义主题
|
### 自定义主题
|
||||||
|
|
||||||
按照 [配置主题](/ant-design-vue/docs/vue/customize-theme-cn) 的要求,自定义主题需要用到 less 变量覆盖功能。
|
按照 [配置主题](/ant-design-vue/docs/vue/customize-theme-cn) 的要求,自定义主题需要用到 less 变量覆盖功能。
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue