diff --git a/docs/markdown/quickstart.en-US.md b/docs/markdown/quickstart.en-US.md index af09b7101..901edf0f6 100644 --- a/docs/markdown/quickstart.en-US.md +++ b/docs/markdown/quickstart.en-US.md @@ -2,12 +2,27 @@ ### Starter kit -Use [vue-cli](https://github.com/vuejs/vue-cli) to create a vant project. +We recomment to use [Vue Cli 3](https://cli.vuejs.org/zh/) to create a project. -```shell -vue init youzan/vue-cli-template-vant projectName +```bash +# Install Vue Cli +npm install -g @vue/cli + +# Create a project +vue create hello-world ``` +After the creation is complete, you can open the GUI by command. + +```bash +# Open GUI +vue ui +``` + +In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies. + + + ### Install #### NPM @@ -54,6 +69,17 @@ npm i babel-plugin-import -D }] ] } + +// For users who use babel7, that can be configured in babel.config.js +module.exports = { + plugins: [ + ['import', { + libraryName: 'vant', + libraryDirectory: 'es', + style: true + }, 'vant'] + ] +}; ``` Then you can import components from vant, equivalent to import manually below. diff --git a/docs/markdown/quickstart.zh-CN.md b/docs/markdown/quickstart.zh-CN.md index 39d982024..273fcc10c 100644 --- a/docs/markdown/quickstart.zh-CN.md +++ b/docs/markdown/quickstart.zh-CN.md @@ -2,12 +2,31 @@ ### 脚手架 -我们提供了开箱即用的开发脚手架,通过 [vue-cli](https://github.com/vuejs/vue-cli) 即可快速创建一个基于 `Vant` 的项目。 +推荐使用 Vue 官方提供的脚手架 [Vue Cli 3](https://cli.vuejs.org/zh/) 创建项目 -```shell -vue init youzan/vue-cli-template-vant my-project +```bash +# 安装 Vue Cli +npm install -g @vue/cli + +# 创建一个项目 +vue create hello-world ``` +创建完成后,可以通过命令打开图形化界面 + +```bash +# 打开图形化界面 +vue ui +``` + +在图形化界面中,点击`依赖` -> `安装依赖`,然后将 `vant` 添加到依赖中即可。 + + + +### 示例工程 + +我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo) + ### 安装 #### NPM @@ -47,7 +66,7 @@ npm i babel-plugin-import -D ``` ```js -// 在 .babelrc 或 babel-loader 中添加插件配置 +// .babelrc 中配置 // 注意:webpack 1 无需设置 libraryDirectory { "plugins": [ @@ -58,6 +77,17 @@ npm i babel-plugin-import -D }] ] } + +// 对于使用 babel7 的用户,可以在 babel.config.js 中配置 +module.exports = { + plugins: [ + ['import', { + libraryName: 'vant', + libraryDirectory: 'es', + style: true + }, 'vant'] + ] +}; ``` 接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式