From b965d8979c61718cf236d9f36e4dd346442aa454 Mon Sep 17 00:00:00 2001 From: Jackyzm <781522366@qq.com> Date: Wed, 19 Dec 2018 19:34:11 -0600 Subject: [PATCH] docs: update to vue-cli3 (#304) --- docs/vue/use-with-vue-cli.en-US.md | 41 +++++++++++++++++++--------- docs/vue/use-with-vue-cli.zh-CN.md | 43 ++++++++++++++++++++---------- 2 files changed, 57 insertions(+), 27 deletions(-) diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md index 8136cdf60..f4ae4f136 100644 --- a/docs/vue/use-with-vue-cli.en-US.md +++ b/docs/vue/use-with-vue-cli.en-US.md @@ -1,9 +1,7 @@ - # 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. - ## Install and Initialization 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`. ```jsx -import Vue from 'vue' -import Button from 'ant-design-vue/lib/button' -import 'ant-design-vue/dist/antd.css' -import App from './App' +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.component(Button.name, Button); -Vue.config.productionTip = false +Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ - el: '#app', + el: "#app", components: { App }, - template: '' -}) + template: "" +}); ``` + Modify `src/App.vue`。 ```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). - ## Advanced Guides 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 ``` +#### if you use vue-cli 2 + Modify `.babelrc`. ```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: ```diff diff --git a/docs/vue/use-with-vue-cli.zh-CN.md b/docs/vue/use-with-vue-cli.zh-CN.md index c53c471ba..79bc305a5 100644 --- a/docs/vue/use-with-vue-cli.zh-CN.md +++ b/docs/vue/use-with-vue-cli.zh-CN.md @@ -1,9 +1,7 @@ - # 在 vue-cli 3 中使用 [vue-cli](https://github.com/vuejs/vue-cli) 是业界最优秀的 Vue 应用开发工具之一，本文会尝试在 vue-cli 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。 - ## 安装和初始化 我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。 @@ -63,23 +61,24 @@ $ yarn add ant-design-vue 修改 `src/main.js`，引入 antd 的按钮组件以及全部样式文件。 ```jsx -import Vue from 'vue' -import Button from 'ant-design-vue/lib/button' -import 'ant-design-vue/dist/antd.css' -import App from './App' +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.component(Button.name, Button); -Vue.config.productionTip = false +Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ - el: '#app', + el: "#app", components: { App }, - template: '' -}) + template: "" +}); ``` -修改 `src/App.vue`的template内容。 + +修改 `src/App.vue`的 template 内容。 ```jsx