Vue項目環境搭建
node 相當於 python
npm 相當於 pip
vue 相當於 django
1) 安裝node，在官網下載好，然后在本地安裝 官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/ 2) 換源安裝cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安裝vue項目腳手架 >: cnpm install -g @vue/cli 注：2或3終端安裝失敗時，可以清空 npm緩存 再重復執行失敗的步驟 npm cache clean --force
Vue項目創建
在cmd中創建
1) 先進入存放項目的目錄（自己創建目錄） >: cd *** 2) 創建項目 >: vue create 項目名 3) 項目初始化，按照下面的選擇
第四個選擇第一條
pycharm配置並啟動vue項目
1.項目創建好后，用pycharm打開
2.添加配置npm啟動
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文件）
.vue文件由三大部分組成：template/script/style
# 1) template：有且只有一個根標簽div # 2) script：必須將組件對象導出 export default {} # 3) style: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
//html代碼：有且只有一個跟標簽
<template> <div class="test"> </div> </template> // js代碼:在export default {}的括號內完成組件的各項成員:data|methods|... <script> export default { name: "Test" } </script> // css代碼:scoped樣式化組件-樣式只在該組件內部起作用 <style scoped> </style>
全局腳本文件main.js(項目入口)
import Vue from 'vue' // node_modules下的依賴直接寫名字 import App from './App.vue' // ./代表相對路徑的當前目錄，文件后綴軍可以省略 import router from './router' import store from './store'
// 在main中配置的信息就是給整個項目配置
// 已配置 vue | 根組件App | 路由 | 倉庫
// 以后還可以配置 cookie | ajax(axios) | element-ui
Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
改寫
import Vue from 'vue' // 加載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); }, });
vue項目啟動生命周期與頁面組件的運用（重點）*****
請求過程
1) 先加載main.js啟動項目 i) import Vue from 'vue' 為項目加載vue環境 ii) import App from './App.vue' 加載根組件用於渲染替換掛載點 （App.vue只要寫五句話） iii) import router from './router' 加載路由腳本文件，進入路由相關配置 2) 加載router.js文件，為項目提供路由服務，並加載已配置的路由(鏈接與頁面組件的映射關系) 注：不管當前渲染的是什么路由，頁面渲染的一定是根組件，鏈接匹配到的頁面組件只是替換根組件中的 <router-view></router-view> 3) 如果請求鏈接改變(路由改變)，就會匹配新鏈接對應的頁面組件，新頁面組件會替換渲染router-view標簽，替換掉之前的頁面標簽(就是完成了頁面跳轉)
參與文件
1、main.js:該文件內容不變
2、App.vue （根組件只需要寫五句話，新頁面組件會替換router-view標簽，從而進行頁面的切換）
<template> <div id="app"> <!-- url路徑會加載不同的頁面組件 eg：/red => RegPage | /blue => BluePage 來替換router-view標簽，完成頁面的切換 --> <router-view></router-view> </div> </template>
3、router.js (先導入需要的vue文件)
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 },
//red頁面展示 { path: '/red', name: 'red', component: RedPage },
//blue頁面展示 { path: '/blue', name: 'blue', component: BluePage } ] })
全局樣式文件配置
在assets中寫html,js,css文件，需要全局配置就在main.js中導入
assets/css/global.css
html, body, h1, h2, ul, p { margin: 0; padding: 0; } ul { list-style: none; } a { color: black; text-decoration: none; }
main.js中新增
// 配置全局樣式 import '@/assets/css/global.css'
封裝小組件-Nav導航欄組件
（從目錄得知views里面是頁面組件，components是小組件，小組件可以組成頁面組件，在頁面組件中components注冊小組件就可以在模板渲染出小組件）
components/Nav.vue
<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>
views/Home.vue、RedPage.vue、BluePage.vue三個頁面都是添加下面三個步驟的代碼
<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>
新增頁面的三個步驟
1) 在views文件夾中創建視圖組件 2) 在router.js文件中配置路由 3) 設置路由跳轉，在指定路由下渲染該頁面組件(替換根組件中的router-view標簽)
1.views/TanPage.vue (創建視圖組件)
vue視圖由三部分組成template/script/style,因為要用到小組件Nav,所以先導入Nav組件
<template>
<div class="tan-page">
//3.渲染Nav組件的模板
<Nav></Nav>
</div>
</template>
<script>
//1.導入Nav
import Nav from '@/components/Nav'
export default {
name: "TanPage",
//2.注冊Nav組件
components: {
Nav
}
}
</script>
<style scoped>
.tan-page {
width: 100vw;
height: 100vh;
background-color: tan;
}
</style>
2.router.js 路由配置
// ... import TanPage from "./views/TanPage"; export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ // ... { path: '/tan', //路徑 name: 'tan', component: TanPage } ] })
3.設置路由跳轉 router-link:to完成路由指定路徑跳轉
components/Nav.vue
... <li> <router-link to="/tan">土頁</router-link> </li> ...
組件生命周期鈎子（官網API）
# 1）一個組件從創建到銷毀的整個過程，就稱之為組件的生命周期 # 2）在組件創建到銷毀的過程中，會出現眾多關鍵的時間節點，如 組件要創建了、組件創建完畢了、組件數據渲染完畢了、組件要被銷毀了、組件銷毀完畢了 等等時間節點，每一個時間節點，vue都為其提供了一個回調函數(在該組件到達該時間節點時，就會觸發對應的回調函數，在函數中就可以完成該節點需要完成的業務邏輯) # 3）生命周期鈎子函數就是 vue實例 成員
任何一個組件：在vue組件的script的export default導出字典中直接寫鈎子函數
export default { // ... beforeCreate() { console.log('組件創建了，但數據和方法還未提供'); console.log(this.title); console.log(this.alterTitle); }, // 該鈎子需要掌握，一般該組件請求后台的數據，都是在該鈎子中完成 // 1）請求來的數據可以給頁面變量進行賦值 // 2）該節點還只停留在虛擬DOM范疇，如果數據還需要做二次修改再渲染到頁面， // 可以在beforeMount、mounted鈎子中添加邏輯處理 created() { console.log('組件創建了，數據和方法已提供'); console.log(this.title); console.log(this.alterTitle); console.log(this.$options.name); }, destroyed() { console.log('組件銷毀完畢') } }
根據請求路徑高亮路由標簽案例
1) router-link會被解析為a標簽，用to完成指定路徑跳轉，但是不能添加系統事件(因為是組件標簽) 2) 在js方法中可以用 this.$router.push('路徑') 完成邏輯跳轉 3) 在js方法中可以用 this.$route.path 拿到當前請求的頁面路由
components/Nav.vue
<template>
<div class="nav">
<!--采用vue-router完成頁面跳轉，不能采用a標簽（會發生頁面刷新，本質就是重新加載了一次項目界面）-->
<ul>
<li @click="changePage('/')" :class="{active: currentPage === '/'}">
<!--<a href="/">主頁</a>-->
<!--<router-link to="/">主頁</router-link>-->
主頁
</li>
<li @click="changePage('/red')" :class="{active: currentPage === '/red'}">
<!--<router-link to="/red">紅頁</router-link>-->
紅頁
</li>
<li @click="changePage('/blue')" :class="{active: currentPage === '/blue'}">
<!--<router-link to="/blue">藍頁</router-link>-->
藍頁
</li>
<li @click="changePage('/tan')" :class="{active: currentPage === '/tan'}">
<!--<router-link to="/tan">土頁</router-link>-->
土頁
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav",
data() {
return {
// 沒渲染一個頁面，都會出現加載Nav組件，currentPage就會被重置，
// 1）在點擊跳轉事件中，將跳轉的頁面用 數據庫 保存，在鈎子函數中對currentPage進行數據更新
// currentPage: localStorage.currentPage ? localStorage.currentPage: ''
// 2）直接在created鈎子函數中，獲取當前的url路徑，根據路徑更新currentPage
currentPage: ''
}
},
methods: {
changePage(page) {
// console.log(page);
// 當Nav出現渲染，該語句就無意義，因為在data中將currentPage重置為空
// this.currentPage = page;
// 有bug，用戶不通過點擊，直接修改請求路徑完成頁面跳轉，數據庫就不會更新數據
// localStorage.currentPage = page;
// 任何一個標簽的事件中，都可以通過router完成邏輯條件
// console.log(this.$route); // 管理路由數據
// console.log(this.$router); // 管理路由跳轉
this.$router.push(page); // 路由的邏輯跳轉
}
},
// 當前組件加載成功，要根據當前實際所在的路徑，判斷當前激活標簽
created() {
// console.log(this.$route.path);
this.currentPage = this.$route.path;
}
}
</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>