Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。采用自底向上增量開發(fā)的設(shè)計(jì)。
一直在用vue 腳手架把玩項(xiàng)目。
記錄下流程：
①部署node環(huán)境，安裝node.js
②安裝cnpm淘寶鏡像，
npm install -g cnpm --registry=https://registry.npm.taobao.org
③安裝vue-cli腳手架模版
cnpm install -g vue-cli
④全局安裝 webpack
cnpm install webpack -g
⑤創(chuàng)建vue項(xiàng)目
vue init webpack mydemo（mydemo項(xiàng)目名稱）
⑥安裝依賴
cd mydemo
cnpm install
npm run dev
當(dāng)當(dāng)當(dāng)當(dāng)，一個(gè)嶄新的vue項(xiàng)目完成
會(huì)自動(dòng)打開瀏覽器，默認(rèn)端口號(hào)：8080
可以自行在config/index.js中修改端口號(hào)。
⑦編譯
npm run build
自動(dòng)生成一個(gè)dist文件夾。包含一個(gè)static 和index.html
⑧nginx部署
下載 nginx
解壓 文件，編輯nginx/conf 下的nginx.conf
啟動(dòng)nginx ，直接雙擊 nginx.exe
瀏覽器輸入 http://127.0.0.1:8080/ 或者 http://localhost:8080
完美運(yùn)行
- 如何解決history 模式下 刷新頁面404問題
location / {
root D:\site\webpos; //項(xiàng)目路徑
try_files $uri $uri/ /index.html;
}
使用express搭建靜態(tài)服務(wù)
mock數(shù)據(jù)寫在json文件中，proxyTable 里將接口代理到具體mock數(shù)據(jù)json文件上。
具體方法：
創(chuàng)建 mock 文件夾
build/dev-server.js 中添加如下代碼
Vue 生命周期
為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會(huì)調(diào)用。例如：
v-if & v-show區(qū)別
v-if 插入or刪除。
一般來說，v-if有更高的切換消耗。v-show有更多的初始化渲染消耗。
因此對(duì)需要頻繁切換而對(duì)安全性無要求，使用v-show
如果在運(yùn)行時(shí)，條件不可能改變使用 v-if
[v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢
Vue 中的 v-cloak 解讀
"active-class" 屬 性
這個(gè)屬性是設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁面所有與當(dāng)前地址所匹配的的鏈接都會(huì)被添加class屬性
<router-link :to="/home" active-class="u-link--Active">Home</router-link>
active-class屬性的默認(rèn)值是router-link-active,所以如果沒有設(shè)置，就會(huì)被渲染為這個(gè)class
可以在router.js里面設(shè)置
const router = new VueRouter({
mode: 'hash',
linkActiveClass: 'u-link--Active', // 這是鏈接激活時(shí)的class
})
路由中常常會(huì)攜帶參數(shù)。http://xxx,com/detail?id=2
對(duì)于參數(shù)唯一的，
<a v-link="{path:'/detail/001'}">新聞001</a>
<a v-link="{path:'/detail/002'}">新聞002</a> //跳轉(zhuǎn)鏈接后面帶參數(shù)
{
path: '/detail/:id',
name: 'detail',
component: Detail,
},
獲取參數(shù)方法let id = $route.params.id
優(yōu)化后 http://xxx,com/detail/2
參考資料
element
react.js,angular.js,vue.js學(xué)習(xí)哪個(gè)好？
新手向：Vue 2.0 的建議學(xué)習(xí)順序
React還是Vue：你該如何選擇？
windows下vue+webpack前端開發(fā)環(huán)境搭建及nginx部署
