vue项目实战踩坑之旅

一直很想学习vue，但是没有机会下手，因为老板让我们用angular做项目，而这次。。。我偷偷摸摸的用了vue，做了一个pc端的项目，哈哈哈，知道上线也没跟老板说我用的vue，我好任性啊

好了，废话不多说，我就开始讲哈我的vue之路吧。

1.首先，就是安装vue-cli脚手架了，一句：

 cmd 》npm install  -g vue-cli 就可以了

2.接下来就是新建项目：

2.1 Vue init webpack ProjectName（项目名称）

2.2 然后按照提示操作：

cd ProjectName

npm install

npm run dev启动项目

然后就ok了，接下来就是开始coding之路了

我这次使用的是vue-router + vuex + vue-resource

看一下我的目录结构：

那我就说一下vue-router的使用了：

第一步就是常规的npm install vue-router了，不过现在在vue init的时候就可以选用不用router了，挺方便。下载下来之后呢就在router文件夹下的index.js.注册你需要的页面了，如图：

记得要在main.js里面import哦，

在main.js引入

页面中的使用：

路由跳转link

默认路由选中效果

对于插件的使用呢，就是先npm install **

然后在main.js里面引入：

引入第三方库之后，都要先在main.js里面import，然后使用Vue.use()方法使用；

关于打包发布，执行npm run build，但是要注意，打包之后的项目样式可能会出现变化，这里考虑样式的引入顺序：

还有一个踩坑的bug，就是看下图：吼吼吼

还要注意每个页面类名应该不一样，不然打包之后可能会引用错乱，巨坑啊，记得我发布之后，引用的swapper是4.0以上的，然后ie直接给我白屏啊，吓得我瑟瑟发抖，最后查了半天原来的版本问题，所以大家引入其他组件的时候最好不要使用最新版本的了。

吖嘿，忘记说一下vuex了，毕竟它挺好用的。。。哈哈，那我就再啰嗦几句好了，算了，直接贴图吧，我变懒了，看下面，耶耶耶：

先定义你需要的state和方法

记得要在main里面“用一下哦”

改变状态

获取状态

动态更新数据之后刷新页面的时候数据会消失，所以可以采用sessionStorage处理：

唔，终于完了，第一次发，大家凑合看了，有啥问题留言谈论蛤

作者：前端小天使
链接：https://www.jianshu.com/p/838231255144