一、安装环境
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中的内容复制到浏览器中,即可。