Vue項目目錄結構分析
├── v-proj | ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境 | ├── public | | ├── favicon.ico // 標簽圖標 | | └── index.html // 當前項目唯一的頁面 | ├── src | | ├── assets // 靜態資源img、css、js | | ├── components // 小組件 | | ├── views // 頁面(視圖)組件 | | ├── App.vue // 根組件 | | ├── main.js // 全局腳本文件（項目的入口） | | ├── router.js // 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系） | | └── store.js // 倉庫腳本文件（vuex插件的配置文件，數據倉庫） | ├── README.md └ └── **配置文件
Vue組件(.vue文件)
// template : 有且只能有一個跟標簽 // script : 必須將組件對象導出 export default { } // style : style標簽明確scoped屬性,代表該樣式只在組件內部起作用(即:樣式組件化)
<template> <div class="test"> </div> </template> <script> export default { name: "Test" } </script> <style scoped> </style>
新增頁面三步驟:
1) 在views文件中創建視圖組件
2) 在router.js文件中配置路由
3) 設置路由跳轉，在指定路由下渲染該頁面組件(替換根組件中的router-view標簽)
補充:
// 1) 小組件代碼書寫完后將其導出 // 2) 頁面組件需要哪個小組件就將該小組件導入並注冊,同時將頁面組件導出 // 3) 在路由組件中導入頁面組件並配置注冊
<template> <div class="text2"> <p>text2</p> </div> </template> <script> // 導出該小組件 export default { name: "Text2" } </script> <style scoped> p { color: blueviolet; } </style>
<template> <div class="home"> <T></T> <T2></T2> </div> </template> <script> // 將小組件導入到頁面組件並注冊 import T from '@/components/Text' import T2 from '@/components/Text2' export default { // 將頁面組件對象導出,配置到路由中 name: 'home', // 小組件注冊到頁面組件中 components: { T, T2 } } </script>
import Vue from 'vue'
import Router from 'vue-router'
// 導入頁面組件
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
// 配置頁面組件路由,名稱,並注冊
path: '/',
name: 'home',
component: Home
},
},
]
})
全局腳本文件main.js(項目入口)
import Vue from 'vue' // 為項目加載vue環境 import App from './App.vue' // 加載根組件用於替換掛載點 import router from './router' // 加載路由腳本文件，進入路由相關配置 import store from './store' // 加載數據倉庫環境 Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app'); // 掛載index.html文件中的 div 標簽
補充:
加載插件環境：路由、倉庫、ajax、cookie、element-ui...
加載自定義環境：全局樣式（global.css）、全局配置(settings.js)
渲染根組件
改寫:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; new Vue({ el: '#app', router, store, render: function (readFn) { return readFn(App) } });
補充: 靜態資源要在main.js中配置
// 配置全局樣式 import '@/assets/css/global.css'
Vue項目啟動生命周期 與 頁面組件的運用(*****)
請求過程:
# 1) 加載mian.js啟動項目 i) import Vue from 'vue' 為項目加載vue環境 ii) import App from './App.vue' 加載根組件用於渲染替換掛載點 iii) import router from './router' 加載路由腳本文件，進入路由相關配置 # 2) 加載router.js文件，為項目提供路由服務，並加載已配置的路由(鏈接與頁面組件的映射關系) 注：不管當前渲染的是什么路由，頁面渲染的一定是根組件，鏈接匹配到的頁面組件只是替換根組件中的 <router-view></router-view> # 3) 如果請求鏈接改變(路由改變)，就會匹配新鏈接對應的頁面組件，
新頁面組件會替換渲染router-view標簽，替換掉之前的頁面標簽(就是完成了頁面跳轉
總結: main.js => router.js => 鏈接 => 頁面組件 => 替換根組件中的 router-view 標簽完成頁面渲染
=> 通過 router-link | this.$router.push() 切換路由(鏈接) => 完成渲染組件的替換 => 頁面的跳轉
參與文件:
main.js:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; new Vue({ el: '#app', router, store, render: function (readFn) { return readFn(App) } });
APP.vue :
<template> <div id="app"> <!-- url路徑會加載不同的頁面組件 eg：/red => RegPage | /blue => BluePage 來替換 router-view 標簽,完成頁面的切換 --> <router-view></router-view> </div> </template> 補充: 一般項目開發該文件內也就這五行代碼
views/RedPage.vue
<template> <div class="red-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "RedPage", components: { Nav }, } </script> <style scoped> .red-page { width: 100vw; height: 100vh; background-color: red; } </style>
<template> <div class="blue-page"> <Nav></Nav> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "BluePage", components: { Nav } } </script> <style scoped> .blue-page { width: 100vw; height: 100vh; background-color: blue; } </style>
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import RedPage from "./views/RedPage"; import BluePage from "./views/BluePage"; Vue.use(Router); export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/red', name: 'red', component: RedPage }, { path: '/blue', name: 'blue', component: BluePage } ] })
案例:
<template> <div class="nav"> <!--采用vue-router完成頁面跳轉，不能采用a標簽（會發生頁面刷新，本質就是重新加載了一次項目界面）--> <ul> <li> <!--<a href="/">主頁</a>--> <router-link to="/">主頁</router-link> </li> <li> <router-link to="/red">紅頁</router-link> </li> <li> <router-link to="/blue">藍頁</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: orange; } .nav li { float: left; font: normal 20px/60px '微軟雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div class="home"> <!-- 3）使用Nav組件 --> <Nav></Nav> </div> </template> <script> // 1）導入Nav組件 import Nav from '@/components/Nav' export default { // 2）注冊Nav組件 components: { Nav, } } </script>