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中的值,應當將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. 路由的 可以分佈到根組件的子組件內,(出口)可以分佈到根組件中或者其他組件中.

4. 嵌套路由當匹配子路由時,也會顯示父路由組件.

5. 當有類似life應用中展示詳細新聞時,不應當使用嵌套路由,而應當使用一個與新聞列表同級的路由來展示詳細頁面.

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

1. 使用標簽

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

瀏覽器協議混合的攔截問題

如在https協議下(github就是https協議),你的應用中有通過http協議請求的內容,就會被瀏覽器攔截而不能得到數據,但是ie會提醒是否顯示全部信息,其他瀏覽器直接攔截.

解決方法是

1. 將http請求換成https請求

發佈留言