vue项⽬难点_Vue项⽬初步总结（在项⽬中遇到的问题以及解
决办法）
⼀. 项⽬搭建
注意点：建议不要使⽤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：在f.js⾥加⼊
var webpack = require("webpack")
3：在ports的最后加⼊
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)如何在项⽬中封装⾃⼰的⽅法以便各个组件调⽤
(3)补充⼀个⼩公举(json查看⼯具)
(4)axios的使⽤(跨域必备)
基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使⽤在 node.js 中发送http请求
拦截请求和响应
转换请求和响应数据
⾃动转换 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);
});
如何解决跨域？
五.项⽬中遇到的⼀些问题
(1)  不同组件对应这个不同的页⾯，样式⾃然是写在当前组件中的style中，但是此时如何我们不做相应的处理两个组建中的样式便会项⽬影响。(简称为样式污染)
⼀、污染是如何产⽣的？
得益于 Vue-loader，在 Vue 中可以使⽤类似于 Web Component 的组件化写法,  ，在⼤多数情况下，我们希望组件间定义的样式是相互隔离的，在 Weex 当中的确如此，组件天⽣隔离，可是在 Vue 当中，运⾏的载体还是浏览器，所有的样式类还是会通过 style 标签插⼊头部，影响全局，交叉污染
⼆、增加 Scoped 标识
依然是 Vue-loader，通过为组件中的 style 标签增加⼀个 scoped 标识，Vue-loader 在编译的过程中会为组件每⼀个元素节点增加scopeId 作为属性，同时为所有的样式类加上属性选择器 scopeId，从⽽达到隔离的效果。
(2)在vue项⽬中关于定时器的使⽤(很恶⼼)
假如，我们在A组建中声明了⼀个定时器进⾏倒计时此时 我们在定时器中⼀直打印时间戳，此时我们通过路由跳转到下⼀个组件页⾯，按照正常理论来说，A组件在跳转后整个组件就会被销毁，到达B组件时A组件已经没有了。
但是在我们有定时器的情况下 此时跳转过后 定时器依然会存在。所以我们要在页⾯销毁时候将当前页⾯的定时器clear掉。
(3)还是⼀个关于定时器的问题，在移动端项⽬中我从后端拿来时间戳还有系统时间进⾏⽐较然后做出
jquery在项目里是干啥的倒计时，在⽹页中显⽰正常，但在移动端会出现NAN。
解决：
格式转换
服务器给的格式是2016-6-16 10:50:00 正则替换成2016/6/16 10:50:00即可；
例如
var time = '2016-6-16 10:50:00'
var times = place(/-/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的我写的东西都改掉了。结果就好了。
六.辅助⼯具-----真机调试(⾮常好⽤)
总结：初⼊前端，继续踩坑。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。