Vue項目環境搭建
"""
node ~~ python：node是用c++編寫用來運行js代碼的
npm(cnpm) ~~ pip：npm是一個終端應用商城，可以換國內源cnpm
vue ~~ django：vue是用來搭建vue前端項目的
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項目創建
1) 進入存放項目的目錄
>: cd ***
2) 創建項目
>: vue create 項目名
3) 項目初始化
4.選擇手動創建項目
babel:將es6的語法解析成成es5語法（我們主要用es5）
TypeScript，如果用原生JS寫可以不選
Progressive Web App Support 網站的提高搜索的優化措施，項目優化
Router路由，需要安裝
Vuex全局單例，用於組件之間的傳參，可以安裝，存值特點當瀏覽器刷新時重置所有的數據，主要用於移動端組件的傳參
css pre-processors CSS預編譯，less和sass語法的項目需要使用，並且需要安裝對應的編譯器
Linter / Formatter格式化代碼，對代碼的格式進行規范。可選但是如果書寫不規范會報錯。
按空格選中，enter下一步
5.選擇好后enter
6.此步驟選擇Y
7.上圖選項只有選擇格式化管理后才會出現，選擇好后enter
8.enter
9.enter
注意：如果每次項目需求不同，最好不要選擇Y,一旦選擇Y,以后更改比較麻煩。
重構項目依賴
1.需要轉移的文件
如果我們需要將項目轉到其他的配置環境下我們需要，除node_modules下面所有的文件都拷走，也可只拷貝下面三個文件，一定不要拷node_modules，該文件夾里面有上萬個文件，拷貝和上傳的速度會特別的慢。
2.重構依賴
重新構建依賴（node_modules）時上面三個文件夾是一定要有的。
cd到項目對應的文件夾執行cnmp install加載依賴即可，如遇到報錯，哪里報錯就現將package文件內報錯部分的代碼刪掉，這樣就可以使項目正常加載，我們平常在GitHub中下的項目如果跑不起來可能也是配置文件的問題。
步驟：
- 將需要轉移的文件放在一個空文件夾中
- 在cmd中cd到目標文件夾然后直接執行命令：cnmp install
- 啟動項目：cnpm run serve
如果對項目進行遷移后，安裝依賴出現報錯如下，
找到對應的路由進行修改如下
pycharm配置並啟動vue項目
1.用pycharm打開vue項目
2.添加配置npm啟動
3.配置npm啟動
4.安裝解析.vue文件需要的插件，搜"vue"點擊install，然后點擊重啟軟件選項
點擊apply再OK，軟件會自動重啟並安裝插件
vue項目目錄結構分析
├── v-proj
| ├── node_modules // 當前項目所有依賴，一般不可以移植給其他電腦環境
| ├── public
| | ├── favicon.ico // 標簽圖標
| | └── index.html // 當前項目唯一的頁面
| ├── src
| | ├── assets // 靜態資源img、css、js
| | ├── components // 小組件
| | ├── views // 頁面組件
| | ├── App.vue // 根組件
| | ├── main.js // 全局腳本文件（項目的入口）
| | ├── router
| | | └── index.js// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系）
| | └── store
| | | └── index.js// 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
| ├── README.md
└ └── package.json等配置文件
vue組件(.vue文件)
# 1) template：有且只有一個根標簽,負責組件的html結構
# 2) script：必須將組件對象導出 export default {}
# 3) style: style標簽明確scoped屬性，代表該樣式只在組件內部起作用(樣式的組件化)
# 4) export default{組件內容}組件內容是該組件的邏輯處理部分
<template>
<div class="test">
</div>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped>
</style>
全局腳本文件main.js（項目入口）
下面兩種寫法是相通的，只不過第二種是我們之前常用的。之前我們定義子組件和根組件都在同一個文件內，不涉及文件的導入，但是在項目里都是分文件的，需要先對其進行文件的導入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//文件的導入，import 文件名 from '路徑'，文件名是代稱，可以和真實文件名不同
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);
},
});
完整的main.js
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 適配IE瀏覽器 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 適配移動端 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 在根路徑下找logo圖片（favicon.ico） -->
<title>v-proj</title>
</head>
<body>
<noscript>
當瀏覽器不支持JS的時候報的錯誤
</noscript>
<div id="app"></div><!-- 根組件有自己的模板 -->
</body>
</html>
<!-- 整個項目只有這一個頁面 -->
vue請求生命周期
-
啟動項目，加載主腳本main.js，加載Vue環境，創建根組件完成渲染，加載系統已有的第三方環境：router、store，加載自定義的第三方環境與自己配置的環境。
-
router被加載就會解析router文件夾下的index.js腳本文件，完成路由-組件的關系映射。
-
新建視圖組件.vue（在views文件夾中），在路由中配置(在router的index.js中)，設置路由跳轉(在導航欄組件中)
''' 瀏覽器請求/user => router插件映射User.vue組件 => User.vue組件替換App.vue中的<router-view />占位符 注： i) 可以用 <router-link to="/user">用戶頁</router-link>完成標簽跳轉 ii) this.$router.push('/user')完成邏輯跳轉 '''
vue組件的生命周期鈎子
生命周期鈎子是一個組件從創建到銷毀的眾多時間節點的回調的方法，這些方法都是vue組件實例的成員，生命周期鈎子的作用就是滿足在不同時間節點需要完成的事。
來看下面的代碼：
beforeCreate() {
console.log('Home組件要創建了');
console.log(this.back_data);
},
created() { // 重要方法：在該鈎子中完成后台數據的請求
console.log('Home組件創建成功了');
console.log(this.back_data);
},
beforeMount() {
console.log('Home組件准備加載')
},
mounted() { // 特別耗時的數據請求，可以延后到組件初步加載成功后，再慢慢請求
//不好加載的圖片等可以放在這里，等文本加載完成后再繼續加載
console.log('Home組件加載完成')
},
destroyed() {//這里可以做一些當頁面關閉時的提示信息，如讓用戶確認是否關閉頁面等
console.log('Home組件銷毀成功了')
}
關於路由
1.路由配置
我們需要配置path，name和component(注冊組件)
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Course from '../views/Course'
import CourseDetail from '../views/CourseDetail'
Vue.use(VueRouter);
const routes = [
{
path: '/',//此處相當於url,當訪問的路徑后綴是/時就訪問home頁面
name: 'home',//這里的name相當於反向解析時起的別名
component: Home
},
{
path: '/home',//當訪問的路徑后綴是/home時就重定向到/對應的頁面
redirect: '/', // 路由的重定向
},
{
path: '/course',
name: 'course', //name的使用：<router-link :to="{name: 'course'}">課程頁</router-link>
component: Course
},
{
// 第一種路由傳參
// path: '/course/detail',
// 第二種路由傳參
path: '/course/:pk/detail',
//:pk有名分組,這樣pk就能接收到對應的值
name: 'course-detail',
component: CourseDetail
}
];
2.路由跳轉
this.$router.push('/')//控制路由跳轉到括號內的路徑，
//如果已經在該路徑再次向這個路徑跳轉就會報錯
this.$route.path //獲取當前的路徑（是后綴不是全路徑）
$router.go(-1)
require('@/assets/img/001.jpg'), // 前台邏輯中加載靜態資源采用require,這里就獲取到了圖片的全路徑，@就是是src
redirect: '路徑', // 路由的重定向
this.$router.go(2); // go是歷史記錄前進后退，正為前進，負為后退，數字為前進后退的步數
<router-link to="/">主頁</router-link>
<!-- 封裝之后的a標簽 -->
<!-- 這里使用到了反向解析，:to="要跳轉的路徑" -->
3.路由傳參
方式一
<!--第一種路由傳參/course/detail?pk=1的形式-->
<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>
<!--使用to屬性綁定到子路由，這里用常量代替變量-->
<router-link :to="{
name: 'course-detail',
query: {pk: course.id}
}">{{ course.title }}
</router-link>
方式二
<!--第二種路由傳參/course/1/detail的形式-->
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link>