vue構(gòu)建單頁面應(yīng)用實戰(zhàn)
1. 為什么要 SPA？
SPA： 就是俗稱的單頁應(yīng)用（Single Page Web Application）。
在移動端，特別是 hybrid 方式的H5應(yīng)用中，性能問題一直是痛點。 使用 SPA，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達到接近原生的流暢體驗。
2. 為什么選擇 vue？
在選擇 vue 之前，使用 reactjs 也做過一個小 Demo，雖然兩者都是面向組件的開發(fā)思路，但是 reactjs 的全家桶方式，實在太過強勢，而自己定義的 JSX 規(guī)范，揉和在 JS 的組件框架里，導(dǎo)致如果后期發(fā)生頁面改版工作，工作量將會巨大。
vue 相對來說，就輕量的多，他的view層，還是原來的 dom 結(jié)構(gòu)，除了一些自定義的 vue 指令作為自定義標簽以外，只要學(xué)會寫組件就可以了，學(xué)習(xí)成本也比較低。
3. 環(huán)境配置
初始化工程，需要 node 環(huán)境使用 npm 安裝相應(yīng)的依賴包。
先創(chuàng)建一個測試目錄，在里面依次輸入以下命令。
//初始化package.json npm init //安裝vue的依賴 npm install vue --save npm install vue-router --save //安裝webpack的開發(fā)依賴 npm install webpack --save-dev npm install babel --save-dev npm install babel-core --save-dev npm install babel-loader --save-dev npm install babel-preset-es2015 --save-dev //安裝html loacer 的開發(fā)依賴 npm install html-loader --save-dev
4. 目錄結(jié)構(gòu)
src 為開發(fā)目錄，其中 components 為組件子目錄，templates 為模板子目錄。
dist 為構(gòu)建出的文件目錄。
index.html 為入口文件。
package.json 為項目描述文件，是剛才 npm init 所建立。
webpack.config.js 是 webpack 的構(gòu)建配置文件
5. Webpack 配置
下面是 webpack 的配置文件，如何使用 webpack，請移步 webpack 的官網(wǎng)。
var webpack= require("webpack");
module.exports={
entry:{
bundle:[ "./src/app.js"]
},
output:{
path:__dirname,
publicPath:"/",
filename:"dist/[name].js"
},
module:{
loaders:[
{test: /\.html$/, loaders: ['html']},
{test: /(\.js)$/, loader:["babel"] ,exclude:/node_modules/,
query:{
presets:["es2015"]
}
}
]
},
resolve:{
},
plugins:[
/*
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
*/
]
}
6. 入口文件
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Router Demo</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script src="dist/bundle.js"></script> </body> </html>
其中 id 為 app 的 div 是頁面容器，其中的 router-view 會由 vue-router 去渲染組件，講結(jié)果掛載到這個 div 上。
app.js
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
Vue.config.debug = true;
Vue.config.delimiters = ['${', '}']; // 把默認的{{ }} 改成ES6的模板字符串 ${ }
Vue.config.devtools = true;
var App = Vue.extend({});
var router = new VueRouter({});
router.map(require('./routes'));
router.start(App, '#app');
router.go({"path":"/"});
這是 vue 路由的配置。 其中由于習(xí)慣問題，我把 vue 默認的{{ }} 改成了的 ${ } ,總感覺這樣看模板，才順眼一些。
routes.js
module.exports = {
'/': {
component: require('./components/index')
},
'/list': {
component: require('./components/list')
},
'*': {
component: require('./components/notFound')
}
}
7. 第一個組件
components/index.js
module.exports = {
template: require('../templates/index.html'),
ready: function () {
}
};
templates/index.html
<h1>Index</h1> <hr/> <p>Hello World Index!</p>
執(zhí)行 webpack 構(gòu)建命令
瀏覽器中訪問：
查看 bundle 源碼：
發(fā)現(xiàn) template 模板文件，已經(jīng)被 webpack 打成字符串了。這其中，其實是 webpack 的 html-loader 起的作用
8. 組件之間跳轉(zhuǎn)
修改剛才的 index 組件，增加一個跳轉(zhuǎn)鏈接，不用 href 了，要用 vue 的指令 v-link。
<h1>Index</h1>
<hr/>
<p>Hello World Index!</p>
<p><a v-link="{path:'/list'}" >List Page</a></p>添加 list 組件
components/list.js
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
},
ready: function () {
}
};
templates/list.html
<h1>List</h1>
<hr/>
<p>Hello List Page!</p>
<ul>
<li v-for="(index,item) in items">
${item.id} : ${item.name}
</li>
</ul>
v-for 也是 vue 的默認指令，是用來循環(huán)數(shù)據(jù)列表的。
現(xiàn)在開始執(zhí)行 webpack --watch 命令，這樣就不用每次敲 webpack 命令了。只要開發(fā)者每次修改 js 點了保存，webpack 都會自動構(gòu)建最新的 bundle 文件。
瀏覽器里試試看：
index 頁
點擊 List Page 跳轉(zhuǎn)到 list 頁
Bingo！ 單頁面兩個組件之間跳轉(zhuǎn)切換成功！
9. 組件生命周期
修改 **componets/list.js **
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
},
//在實例開始初始化時同步調(diào)用。此時數(shù)據(jù)觀測、事件和 watcher 都尚未初始化
init:function(){
console.log("init..");
},
//在實例創(chuàng)建之后同步調(diào)用。此時實例已經(jīng)結(jié)束解析選項，這意味著已建立：數(shù)據(jù)綁定，計算屬性，方法，watcher/事件回調(diào)。但是還沒有開始 DOM 編譯，$el 還不存在。
created:function(){
console.log("created..");
},
//在編譯開始前調(diào)用。
beforeCompile:function(){
console.log("beforeCompile..");
},
//在編譯結(jié)束后調(diào)用。此時所有的指令已生效，因而數(shù)據(jù)的變化將觸發(fā) DOM 更新。但是不擔保 $el 已插入文檔。
compiled:function(){
console.log("compiled..");
},
//在編譯結(jié)束和 $el 第一次插入文檔之后調(diào)用，如在第一次 attached 鉤子之后調(diào)用。注意必須是由 Vue 插入（如 vm.$appendTo() 等方法或指令更新）才觸發(fā) ready 鉤子。
ready: function () {
console.log("ready..");
},
//在 vm.$el 插入 DOM 時調(diào)用。必須是由指令或?qū)嵗椒ǎㄈ?$appendTo()）插入，直接操作 vm.$el 不會 觸發(fā)這個鉤子。
attached:function(){
console.log("attached..");
},
//在 vm.$el 從 DOM 中刪除時調(diào)用。必須是由指令或?qū)嵗椒▌h除，直接操作 vm.$el 不會 觸發(fā)這個鉤子。
detached:function(){
console.log("detached..");
},
//在開始銷毀實例時調(diào)用。此時實例仍然有功能。
beforeDestroy:function(){
console.log("beforeDestroy..");
},
//在實例被銷毀之后調(diào)用。此時所有的綁定和實例的指令已經(jīng)解綁，所有的子實例也已經(jīng)被銷毀。如果有離開過渡，destroyed 鉤子在過渡完成之后調(diào)用。
destroyed:function(){
console.log("destroyed..");
}
};
在瀏覽器里執(zhí)行了看看：
首次進入 List 頁面的執(zhí)行順序如下：
此時點一下瀏覽器的后退，List Component 會被銷毀，執(zhí)行順序如下：
這是官方的生命周期的圖：
10. 父組件與子組件
在很多情況下，組件是有父子關(guān)系的，比如 list 列表組件有個子組件 item
components/item.js
module.exports = {
template: require('../templates/item.html'),
props:["id","name"],
ready: function () {
}
};
templates/item.html
<p>我是subitem： ${id} - ${name}</p>修改 list 組件，添加 item 的引用
components/list.js
//引用item組件
import item from "./item";
module.exports = {
template: require('../templates/list.html'),
data:function(){
return {items:[{"id":1,"name":"hello11"},{"id":2,"name":"hello22"}]};
},
//定義item組件為子組件
components:{
"item":item
},
ready: function () {
}
};
templates/list.html
<h1>List</h1> <hr/> <p>Hello List Page!</p> <ul> <li v-for="(index,item) in items"> <!--使用item子組件，同時把id,name使用props傳值給item子組件--> <item v-bind:id="item.id" v-bind:name="item.name"></item> </li> </ul>
瀏覽器里試試看：
子組件成功被調(diào)用了
11. 組件跳轉(zhuǎn)傳參
組件之間的跳轉(zhuǎn)傳參，也是一種非常常見的情況。下面為列表頁，增加跳轉(zhuǎn)到詳情頁的跳轉(zhuǎn)，并傳參 id 給詳情頁
修改路由 routes.js
module.exports = {
'/': {
component: require('./components/index')
},
'/list': {
component: require('./components/list')
},
//增加詳情頁的跳轉(zhuǎn)路由，并在路徑上加上id傳參，具名為name：show
'/show/:id': {
name:"show",
component: require('./components/show')
},
'*': {
component: require('./components/notFound')
}
}
添加組件 show
components/show.js
module.exports = {
template: require('../templates/show.html'),
data:function(){
return {};
},
created:function(){
//獲取params的參數(shù)ID
var id=this.$route.params.id;
//根據(jù)獲取的參數(shù)ID，返回不同的data對象（真實業(yè)務(wù)中，這里應(yīng)該是Ajax獲取數(shù)據(jù)）
if (id==1){
this.$data={"id":id,"name":"hello111","age":24};
}else{
this.$data={"id":id,"name":"hello222","age":28};
}
},
ready: function () {
console.log(this.$data);
}
};
templates/show.html
<h1>Show</h1>
<hr/>
<p>Hello show page!</p>
<p>id:${id}</p>
<p>name:${name}</p>
<p>age:${age}</p>
修改 templates/item.html
<p>我是subitem： <a v-link="{name:'show',params: { 'id': id } }"> ${id} : ${name}</a> </p>
這里 name:‘show’ 表示具名路由路徑，params 就是傳參。
繼續(xù)瀏覽器里點到詳情頁試試：
點擊“hello11”，跳轉(zhuǎn)到詳情頁：
傳參邏輯成功。
12. 嵌套路由
僅有路由跳轉(zhuǎn)是遠遠不夠的，很多情況下，我們還有同一個頁面上，多標簽頁的切換，在 vue 中，用嵌套路由，也可以非常方便的實現(xiàn)。
添加兩個小組件
components/tab1.js
module.exports = {
template: "<p>Tab1 content</p>"
};
components/tab2.js
module.exports = {
template: "<p>Tab2 content</p>"
};
修改 components/index.js 組件，掛載這兩個子組件
import tab1 from "./tab1";
import tab2 from "./tab2";
module.exports = {
template: require('../templates/index.html'),
components:{
"tab1":tab1,
"tab2":tab2
},
ready: function () {
}
};
在路由里加上子路由
module.exports = {
'/': {
component: require('./components/index'),
//子路由
subRoutes:{
"/tab1":{
component:require('./components/tab1')
},
"/tab2":{
component:require('./components/tab2')
}
}
},
'/list': {
component: require('./components/list')
},
'/show/:id': {
name:"show",
component: require('./components/show')
},
'*': {
component: require('./components/notFound')
}
}
好了，在瀏覽器里試一下：
初始狀態(tài)：
點了 tab1，tab2：
Tab 切換沒問題，可是，初始狀態(tài)顯示是空的，能不能默認顯示 Tab1 Content 呢？很簡單，調(diào)整下路由就可以了：
module.exports = {
'/': {
component: require('./components/index'),
//子路由
subRoutes:{
//默認顯示Tab1
"/":{
component:require('./components/tab1')
},
"/tab1":{
component:require('./components/tab1')
},
"/tab2":{
component:require('./components/tab2')
}
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
學(xué)習(xí) Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。這篇文章主要介紹了Vue 樣式綁定的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
防抖就是對于頻繁觸發(fā)的事件添加一個延時同時設(shè)定一個最小觸發(fā)間隔,防抖大家都學(xué)過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細講講2023-10-10
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
第一次在Vue中完整使用AJAX請求和axios.js的實戰(zhàn)記錄
AJAX是現(xiàn)代Web開發(fā)的一個關(guān)鍵部分,盡管它一開始看起來令人生畏,但在你的武庫中擁有它是必須的,下面這篇文章主要給大家介紹了關(guān)于第一次在Vue中完整使用AJAX請求和axios.js的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue3中SetUp函數(shù)的參數(shù)props、context詳解
我們知道setup函數(shù)是組合API的核心入口函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中SetUp函數(shù)的參數(shù)props、context的相關(guān)資料,需要的朋友可以參考下2021-07-07
Vue關(guān)于Element UI中的文本域換行問題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇關(guān)于在Vue項目中取消ESLint代碼檢測的步驟講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vue3實現(xiàn)alert自定義的plugins方式
這篇文章主要介紹了vue3實現(xiàn)alert自定義的plugins方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08