一. 项目搭建
传送门：https://blog.csdn.net/u013144287/article/details/78659647；
注意点：建议不要使用ESLint 后面选No 就ok 大神跳过此处，否则在项目中只要编码格式有问题就会一直拨错！
二.编辑器选择
1、推荐使用Visual Studio Code工具打开testproject文件夹即可进行开发。
（1）（打开终端快捷键 control+~）在终端里面输入npm install命令安装依赖包， npm install 执行可以进行vue已经vue的插件安装，在第三步的时 候，已经初始化了项目，并且在 package.json 里面已经有相关配置，所以在这里可以直接安装；
（2）终端执行命令npm run dev 运行，然后览器输入localhost://8080即可看到vue初始界面
三.辅助工具引入（jq）
补充：使用vue 框架时尽可能的不要使用jq，但是有些地方确实需要使用jq的话下面是在vue中引入jq的方法
1：首先安装jquery
npm install jquery --save
2：在webpack.base.conf.js里加入
var webpack = require("webpack")
3：在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
4：在main.js中引入
import $ from 'jquery'
5.最后 npm run dev就可以了
四.项目开始
(1).vue项目中引入图片的三种方式
首先给图片地址绑定变量
在script中设置变量
//方法1.直接将图片引入为模块
require imgUrl from "../assets/test.png"
//方法2.将imgUrl放在数据里
data(){
return {
imgUrl:require("../assets/test.png")
}
}
//方法3.在生命周期函数中设置
data(){
return {
imgUrl:""
}
}
created(){
this.imgUrl = require("@/"+urlTemp)
}
（2）如何在项目中封装自己的方法以便各个组件调用
传送门：https://www.cnblogs.com/aimiss/p/7396986.html
（3）补充一个小公举（json查看工具）
传送门：https://www.json.cn/
（4）axios的使用（跨域必备）
基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
功能特性
在浏览器中发送XMLHttpRequests请求
在 node.js 中发送http请求
支持PromiseAPI
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受XSRF攻击
安装
使用 bower:
$ bowerinstallaxios
使用 npm:
$ npminstallaxios
例子
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (response) {
console.log(response);
});
如何解决跨域？
传送门：https://www.jianshu.com/p/e36956dc78b8；
五.项目中遇到的一些问题
(1) 不同组件对应这个不同的页面，样式自然是写在当前组件中的style中，但是此时如何我们不做相应的处理两个组建中的样式便会项目影响。（简称为样式污染）
一、污染是如何产生的？
得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法, ，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天生隔离，可是在 Vue 当中，运行的载体还是浏览器，所有的样式类还是会通过 style 标签插入头部，影响全局，交叉污染
二、增加 Scoped 标识
依然是 Vue-loader，通过为组件中的 style 标签增加一个 scoped 标识，Vue-loader 在编译的过程中会为组件每一个元素节点增加 scopeId 作为属性，同时为所有的样式类加上属性选择器 scopeId，从而达到隔离的效果。
传送门：https://www.jb51.net/article/122535.htm
（2）在vue项目中关于定时器的使用（很恶心）
假如，我们在A组建中声明了一个定时器进行倒计时此时 我们在定时器中一直打印时间戳，此时我们通过路由跳转到下一个组件页面，按照正常理论来说，A组件在跳转后整个组件就会被销毁，到达B组件时A组件已经没有了。
但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页面销毁时候将当前页面的定时器clear掉。
（3）还是一个关于定时器的问题，在移动端项目中我从后端拿来时间戳还有系统时间进行比较然后做出倒计时，在网页中显示正常，但在移动端会出现NAN。
解决：
格式转换
服务器给的格式是2016-6-16 10:50:00 正则替换成2016/6/16 10:50:00即可；
例如
var time = '2016-6-16 10:50:00'
var times = time.replace(/-/g,"/"); //2016/6/16 10:50:00
完美解决。
（4）又是定时器问题，在项目中，我们将有定时器的页面切出到后台（不是关闭进程），过一段时间后页面的倒计时就会出现混乱。
原因：因为当我们切出到任务管理器后台时，此时在客户端中的浏览器里面，浏览器就会终止定时器因为消耗性能，当我们返回的时候此时倒计时才会恢复正常。
解决：h5有一个监听浏览器页面是否隐藏的事件 visibilitychange 两种状态 hidden和visity hidden时候页面切出此时我们要将定时器销毁，visity时候再次恢复定时器。
（5）如何刷新当前组件页面？
解决 this.$router.push(0)
(6)项目完成后 通过webPack打包的页面在安卓4.0 ios9.1出现白页面，也就是而组建无法被创建。
原因：因为低版本安卓不支持es6
（1）安装依赖包
> cnpm install --save-dev babel-polyfill 或者 > npm install --save-dev babel-polyfill
（2）webpack配置修改
/* 添加 babel-polyfill */
entry: {
app: ["babel-polyfill", "./src/main.js"]
},
但是：我的项目上面的操作都进行了，也就是对es6进行了转化但是失败了。所以我就白有关es6的我写的东西都改掉了。结果就好了。
六.辅助工具-----真机调试（非常好用）
传送门：https://blog.csdn.net/qq_16559905/article/details/60755174
总结：初入前端，继续踩坑。