栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vue项目实战踩坑之旅

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240706.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号