前言：一直用的vue-cli2，趁着不忙，记录下使用cli3+的点滴。

如果帮助到了你，还请点个赞！！！！！

1、nodejs

具体下载安装不在赘述：详见 菜鸟教程——nodeJs安装
或者官网：node.js中文文档
或者直接下载指定版本：8.9.0版本（修改地址栏对应版本号即可下载对应版本）

2、安装cnpm淘宝镜像代替npm

#	npm install -g cnpm --registry=https://registry.npm.taobao.org

Tips：使用cnpm有时会出现莫名其妙的bug，我们使用重新指定 registry 命令解决npm安装缓慢的问题（自行选择）

#	npm install --registry=https://registry.npm.taobao.org

3、安装3.0

如果已经安装了2.0，可以使用命令卸载

#	cnpm/npm uninstall -g vue-cli

然后在全局安装3.0（vue-cli 更改为 @vue/cli）

#	cnpm/npm install -g @vue/cli

4、 创建项目

#	vue create obj-name //（项目名不能大写）

上下键选择配置，回车选定；
①：用户保存的自定义的配置模板
②：默认配置
③：自定义配置（一般选择这个好点，自行选择）

上下键切换，空格选中/取消选中
①：当然必选了，JavaScript 编译器
②：JavaScript 的超集，自行选择
③：是否开启渐进式网络应用程序支持，自行选择
④：路由，当然选择了，不选的话项目中自行安装
⑤：状态管理，自行选择
⑥：css预处理
⑦：代码规范
⑧：组件单元测试
⑨：端对端测试，模拟真实场景

设置路由模式，自行选择,项目里也可以配置。

css预处理，自行选择

自行选择
①：只进行报错提醒；
②：不严谨模式；
③：正常模式；
④：严格模式；

自行选择
①：保存时提醒
②：提交时提醒

保存位置选择，建议选第一个
①：独立文件夹
②：package.json里

是否保存配置，供将来使用，自行选择，yes的话，起个名字就好，这里选n

至此，项目创建完毕。

这是3.0的项目结构：

这是2.0的项目结构：

很明显，3.0的结构更加的精简。但是3.0默认隐藏了配置文件，我们可以自己在根目录下新建vue.config.js文件进行配置。

这里放置简单的配置demo：（接口用的是easy-mock，具体配置可参考我的另一篇文章：Windows系统本地部署easy-mock ）

module.exports = {
    publicPath:'./',
    outputDir: 'hello-cli3', //打包输出目录默认dist
    devServer: {
        host: 'localhost',
        port: 8080,
        open: true, //配置自动启动浏览器
        proxy: {
          '/api': {
            target: 'http://127.0.0.1:7300/mock/5df83c4e36786b49606baff6/example', //easy-mock接口
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
       },
}

其他具体配置，详见官网：Vue Cli
或者参考该博主：vue-cli3.0安装及配置（完整版）

启动项目
默认是：

# 	cnpm/npm run serve

如果还是想使用

# 	cnpm/npm run dev

可以修改package.json配置，如下图：

项目打包

#	cnpm/npm run build

Tips：

3.0版本增加了 vue ui命令，开启GUI图形化项目管理页面，可以通过可视化的方式去管理、创建、导入项目。依赖、插件都可以可视化的安装。给官方大大点赞，棒棒哒。

#	vue ui

至此，3.0的项目创建完毕，并且已经可以运行，下面引入vant ui。

5、引入Vant UI

具体教程，详见 Vant UI官方网站

进入项目文件夹，安装vant：

#	cnpm/npm i vant -S

引入组件（推荐按需引入，减少体积）
需要安装 babel-plugin-import 插件：
一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

#	cnpm/npm i babel-plugin-import -D //注意：配置 babel-plugin-import 插件后，将不可以再全局导入组件

修改配置文件：

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

使用方法举例：在main.js里面全局引用

#	import Vue from 'vue';
#	import { Button } from 'vant';

#	Vue.use(Button);

到这里，一个项目模板就已经搭建完毕了，但是，vant官方用的尺寸都是px的静态尺寸，也就是说在不同的分辨率下，存在变形的问题，那么问题来了，怎么在使用vant时，自动适配移动端呢？

官方也有说明rem适配方案

如官方所说，要想适配，需要安装两个插件

#	cnpm/npm install postcss-pxtorem --save-dev
#	cnpm/npm i -S amfe-flexible

我们在 main.js 里面引入 amfe-flexible

#	import 'amfe-flexible/index.js'

然后在配置 postcss.config.js 文件，如果没有就手动在根目录新建一个

module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8'
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5,//根据设计稿的基准尺寸设置。一般是iphone6的375*667为基准或者2倍尺寸
            propList: ['*']
        }
    }
}

配置完之后，重启项目，我们可以看到改变尺寸，对应的页面也都发生了变化


OK，到这里，已经可以适配移动端了。。。。。。

附加一个移动端调试神器：vconsole

可以查看打印信息等，很方便
安装一下

#	cnpm/npm install vconsole 

然后在 manin.js 中引入

#	import Vconsole from 'vconsole'
#	let vConsole = new Vconsole()

#	Vue.use(vConsole)

点击这个绿色按钮就可以看到项目里的调试信息了。

再推荐一个滴滴官方的ui框架：Cube-UI

详见：Cube-UI官方网站 创建项目的话，会直接帮你解决适配问题，只需要按照设计稿写就好

以上内容，如有错误请指出，大家一起交流学习，欧耶！

如果帮助到了你，还请点个赞！！！