最近在博客園上看到不少關於vue的文章但感覺都是在簡單原生寫法上,真正vue在實際開發中的優點組件化,spa應用,路由好像都沒涉及到,我在學angular1的時候發現沒有中文版的api,於是本人不才弄了angular api網站方便大家學習和查詢,剛好在學vue就用vue重構下這個網站,我會將我重構的所有步驟寫下來,當然這個是實際開發中的步驟,可能對package.json 的講解不那么仔細。
開發環境：node6.2 webstrom2016 vue2.0 vue-cli
第一步安裝node，這個我就不詳說了，百度網上一大堆
第二部安裝配置好node之后，就是安裝vue-cli，cmd下輸入命令
npm install vue-cli
這個估計要翻牆,翻不了牆的可以用淘寶的鏡像.
npm install vue-cli -g --registry=http://registry.npm.taobao.org/ --disturl=https://npm.taobao.org/dist
提示
安裝成功后,運行命令
vue init webpack my-project
創建項目,按提示輸入項目信息
創建成功后會自動創建項目用到基礎文件
用到vue包也自動加載到package.json中
下面就來介紹vue的組件結果:
這是一個組件,組件的代碼分為三層,html層,cs層,js層
調用這個組件是在app.vue中如圖:
這個app.vue也是一個組件,整個項目只有一個index.html頁面,其他的都是用一個一個組件組合起來的,這就是典型的spa應用.
有個入庫main.js
ok用vue-cli例子創建完了,就是加路由了.
在package.json加這個包
在main.js中
html的路由標簽是
<router-view></router-view>
大概的框架介紹完了,我重構的網站值設置兩個路由,用vue實現了菜單的效果.這里就不詳細介紹了,后期還要優化,加搜索功能.
重構的網站在git上地址是:https://github.com/Walnuthetao/demo
后期會用angular2的重構下這個網站,大神可能看不上眼呵呵,我只是個普通的碼農,為能在大城市買房而奮斗着,加班着!
忘了加運行方法:輸入命令
npm install
之后在輸入
npm run dev