Vue-cli 3.0

一、安装环境

1.安装Node.js，网上下载（Node.js自带了软件包管理器npm，用npm安装webpack）
2.全局安装webpacknpm install webpack -g，使用命令webpack -v获取当前webpack版本
3.全局安装webpack-cli，npm install webpack webpack-cli -g
4.全局安装vue-cli,3.0对应的新命令为:npm install -g @vue/cli或yarn global add @vue/cli,使用命令vue -V(大写的V)或vue --version来获取当前vue-cli的版本
（什么是webpack，为什么要使用他：https://www.cnblogs.com/-walker/p/6056529.html）

二、创建项目

1.使用命令vue create (项目名称)，回车创建
2.第一项默认配置，第二项手动配置

3.若选择手动配置，配置项如下：

分为4项，Babel、Router、Vuex、CSS Pre-processors,分别表示ES6转ES5、路由、数据管理、css预处理器。回车确定。
4.之后询问是否使用Router的history模式，选择“是”
5.使用哪种CSS预处理器，我选择了Less
6.之后询问将Babel、PostCSS、ESLint等的配置放在哪里？随便选一个
7.是否作为模板保存，方便以后用？这个随意，花点时间等待，自行创建完毕

三、安装npm包

1.安装axious（功能相当于ajax）：npm install axios
2.安装vux：npm install vux --save、 npm install vux-loader --save-dev 、npm install vue-loader@14.2.2 -D(都要安装)
3.创建vue.config.js文件，进行如下配置：

module.exports = {
    baseUrl: './',
    configureWebpack: config => {
      require('vux-loader').merge(config, {
        options: {},
        plugins: ['vux-ui']
      })
    },
  }

四、命令

1.npm run serve：运行项目，出现一个地址（http://localhost:8080）用浏览器访问此网址，即为当前项目，之后无需刷新，保存代码后页面自动更新
2.npm run build：打包项目，自动生成dist文件夹，即为项目最终需要上传的目录
3.Ctrl + C：中断当前指令
4.错误：Error: Watching remote files is not supported.
原因：webpack-dev-server出了问题，这是setupWatchStaticFeature函数在3.7.2和3.8.0之间发生了变化引起的问题
解决办法：npm install webpack-dev-server@3.7.2 --save-dev

五、白丁友记遇到的问题

1.token失效，需要微信浏览器或者微信开发者工具打开才行
2.Google Chrome 不能模拟微信环境
3.在开发者平台输入服务器端的网址，相当于真正跑的项目
4.http://localhost:8080在跨域后的浏览器上输入，然后开发者平台中的Application中Local Storage中的内容复制到浏览器中，即可。