Vue.js 小应用使用总结

这是初步使用vue.js做出todomvc,life小应用的经验;这篇文章总结由应用开始到托管到GitHub上相关技术使用时遇到的坑,不涉及具体内容,以供以后学习!

todomvc的github地址

life的github地址

因为数据请求问题协议混合使用了(在https协议中使用了http请求),life小应用在chrome,FF不能正常显示数据.

应用搭建

使用vue-cli脚手架工具,快速,准确的搭建应用结构!

使用注意

1.第一步的npm install 命令可能不会安装devDependencies的内容,这是需要特别安装: npm install –only=dev

2.在window上的cross-env(不同平台下都能运行的npm命令)loader不会安装上,但是webpack已经使用了,需要手动安装

3.css-loader style-loader也没有安装,需要手动安装

4.生成的index.html中build.js文件的地址要把开头的’/’去掉,不然部署的时候回找不到build文件

具体使用参考:vue-cli 官网

Vue.js 组件化开发

这里的组件化开发是指在webpack中进行.vue单文件组件开发.

1. 文件的导入和导出在webpack中使用有两种写法:

1. es6写法
导出: export default{这个大括号内就是new Vue({})语法内的{}对象}
导入: import name from '相对路径'
2. webpack的写法
导出: module.exports={这个大括号内就是new Vue({})语法内的{}对象 }
导入: var xx=require('相对路径');

2. js,css文件的导入

* css文件不需要导出
* js文件需要导出特定的方法,在导入的地方才能调用

3 .vue文件中的css会应用到全局,所以不同.vue文件不要使用相同的类名

4. 组件开发的时候最好使用vuex管理状态

1.props是单向的传递数据,同时在组件内部也不能直接修改传过来的props,这样会报错
2.使用vuex状态管理,能在组件内部修改状态,非常方便.
3.vuex组件内部不想修改state
d165
中的值,应当将state的值存入本组件的data属性中.

5. vue开发中最好能使用es6语法,简洁,好用,潮流.但是要用webpack工具转换为es5语法,只是开发方便,于项目部署无多大用处.

6. 布局性质的组件的显示或者隐藏应当尽量用路由控制.

vuex使用

1. vuex使用地点

1. 根状态应当使用在main.js处,在所有的组件中使用vm.$store获取之.
2. vuex可以嵌套使用,但是中小应用还是使用单一的状态中心更好.

2. vuex使用注意

1. vuex官方推荐不要在组件内部直接修改状态,而是传递个根组件修改.但是,我认为那样太麻烦,切不利于分组件开发,不易发挥.vue文件的优势,我认为应当在组件内部修改状态,只是多人协作时可能冲突.
2. vuex中心的数据应当加入到组件内部的data属性中去,当要修改data中的数据的时候,不会修改vuex中心数据
3. 承上,如需修改状态,可以在内部做修改,则依赖于这个vuex中心数据的所有视图将随之变化.

vue-router 路由的使用

1. 使用注意

1. 路由的配置应当在入口文件内.
2. 路由文件的routes可以独立为一个routes.js文件.
3. 路由的<router-link></router-link> 可以分布到根组件的子组件内,<router-view></router-view>(出口)可以分布到根组件中或者其他组件中.
4. 嵌套路由当匹配子路由时,也会显示父路由组件.
5. 当有类似life应用中展示详细新闻时,不应当使用嵌套路由,而应当使用一个与新闻列表同级的路由来展示详细页面.

2. vue-router 在程序中切换路由

1. 使用<router-link to="/path">标签
2. 使用href:  v-bind:href="'#/path'+item.url" ;这里的href可以拼接,但是要以#号开头.
3. 使用编程的方法修改:
vm.$router.push({path:'',...})  向历史记录添加一个路由记录,同时修改当前路由.
vm.$router.replace({path:'',...}) 替换当前路由.

vue-resource 使用

> API不多,使用简单,
> 利用的是es6的Promise对象,但是ie系列版本不支持Promise对象,需要使用babel-ployfill 插件在入口文件最上面引用.
> vuex同样依赖Promise对象,兼容方法同上.

托管到github上

1. 使用git,将代码上传到github上,默认代码不上传dist目录,这时如果有通过github展示网页的需求,就要强制将dist目录上传(git add dist -f)
2. 网页访问地址: https://yourUsername.github.io/yourProjectName/index.html[/code] 
浏览器协议混合的拦截问题
如在https协议下(github就是https协议),你的应用中有通过http协议请求的内容,就会被浏览器拦截而不能得到数据,但是ie会提醒是否显示全部信息,其他浏览器直接拦截.
解决方法是
1. 将http请求换成https请求