预览模式: 普通 | 列表

最近跟着慕课网的教材实战了一个项目:http://coding.imooc.com/learn/list/74.html(Vue.js高仿饿了么外卖App)。我从vue1.0到2.0都撸了一下代码,做出了例子。本文讲到的一些坑,都是根据我的笔记整理的,菜鸟们可参考,大牛请无视。

 
一、是否要升vue 2.0
vue版本已经升到2.*,所有配套的vueRouter、第三方组件,都跟着升到2.0。1.0的淘汰指日可待。因此没啥好犹豫的,能用2.0就直接升吧。
目前所有的官方文档已经升2.0了,但是网上流传的大量例子,都还是1.0的,因此实践前,请一定注意版本!请一定注意版本!请一定注意版本!
 
二、是否要使用vue-cli
要实践vue组件化、单页面应用的例子,请一定使用vue-cli。我之前没有使用脚手架,自己用Webpack实验,太麻烦了!说多了都是泪。如果使用vue-cli,基本上跟着教程走就行了。再次提到版本问题!--目前(2017年2月)默认vue init命令,安装的是2.0的脚手架。
 
三、npm大坑
如果你是新人,并不需要兼容之前1.0版本,那么恭喜你,请直接入2.0坑 ------vue init命令很容易就完成了,接下来的npm i安装是一个大坑。我在新手群里看到一半以上的新人都卡在这里。npm说白了,就是要把所有的依赖项安装好。我从头装了一下vue-cli2.0,并统计了一下,node_modules目录下有87个子目录,140M。
 
但这个过程并不会很顺利!
我在数次安装vue-cli的过程中,都没有一次搞定。基本流程是,装完后运行一下npm run dev---报错---根据报错信息,用npm i --save *** 修复某个依赖---再run---再报错---再修复.....修复个五六次,最后才出现locathost:8080的提示,浏览器中出现第一个demo页,这时候才叫安装成功!
 
有时候,npm奇慢无比,5分钟以上还没装完。这时候要果断ctrl+c,再次npm,或转用cnpm---cnpm安装过程也有坑,此处不展开,请自行百度。
我在这里分享一个纯净包,可直接越过冗长的npm i过程,这个包里面已经带上了node_modules目录,解压后直接npm run dev即可调试。
 
四、单页面还是多页面
vue推荐的方式是单页面应用(SPA)。但是实际情况,就本地区(长沙)来说,现实工作中,多页面方式更普遍。多页面方式一样也可以使用vue强大的组件系统和脚手架。在github.com搜索“vue2 multipage”,会得到不少多页面脚手架。此处不展开。
 
五、关于npm run build的几个参数
如果你九死一生走到这里,能生成dist目录下的文件的话,这才迈入了真正的实战。
config/index.js可以配置输出,以下几项可修改成如下:
 
assetsSubDirectory: 'static',     //输出的依赖文件夹路径可自定义
assetsPublicPath: '',     //默认值是assetsPublicPath: '/',即引用的js以“/”开头,则必须在根路径下使用
productionSourceMap: false,     //不输入.map调试文件
 
总结:
 
越过以上几道关,VUE的开发环境就基本搭建成功。意味着你可以愉快的调试代码,按一下ctrl+s存盘,就能在浏览器中看到相应的变化。Vue接下来的一千多个大坑,都在后面等着你......
 
一些关于vue的实践将陆续首发到本人技术博客上,长沙前端开发与培训,blog.258754.cn
推荐一个资源站:https://www.awesomes.cn/subject/vue(感谢佳浩提供资源线索)

Tags: vue.js vue-cli

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 10634

2017年VUE2.0试手项目--奔奔算术

利用春节假期,系统的学习了VUE2.0/组件/webpack/SPA技术。正好儿子每天要做口算题,就利用这些新学的知识,花2天时间,为他写了一个移动端的小型出题软件。

 
 
 
 
功能点:
  • 随机出题,加减均可;
  • 可进行一些基础模式的配置,
  • 对加减法做了一些优化,避免出现太简单的题目;
  • 练习模式下,可进行计时、自统计错题功能
  • 一些动画效果用GSAP实现
 
技术点:
  • vue2.0组件
  • vue-cli2.0+webpack生成单页应用
  • sass、flex布局
  • localStorage读写
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5007