目錄
Vue項目創建
1) 進入存放項目的目錄
>: cd vue_project
2) 創建項目
>: vue create v-proj
3) 項目初始化
- 輸入
npm run serve初始化項目
pycharm配置並啟動vue項目
1) 用pycharm打開vue項目
2) 添加配置npm啟動
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等配置文件
js原型補充
function A() {}
let a1 = new A();
let a2 = new A();
// 為A類添加原型 類似於類屬性
A.prototype.num = 100;
console.log(a1.num);
console.log(a2.num);
// ES6語法下的類
class B {
constructor(name) {
this.name = name
}
}
let b1 = new B('cwz');
let b2 = new B('neo');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);
console.log(b1.name);
console.log(b2.name);
vue項目生命周期
全局腳本文件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({
router,
store,
render: h => h(App)
}).$mount('#app');
改為：
// 項目一啟動，加載一堆環境
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: router, // 把路由、倉庫配置到vue對象中
store: store,
render: function (read_vue_fn) {
return read_vue_fn(App)
}
});
-
啟動項目，加載主腳本文件 mian.js，加載vue環境， 創建根組件完成渲染；加載系統已有的第三方環境：router、store；加載自定義的第三方環境與自己配置的環境，后期項目不斷添加
-
router被加載，就會解析router文件夾下的index.js腳本文件，完成路由-組件 的映射關系
-
新建視圖組件.vue（在views文件夾中）, 在路由中配置（在router的index.js中），設置路由跳轉（在導航欄組件中）
<router-link to="/user">去用戶頁面</router-link> 完成標簽跳轉 this.$router.push('/user') 完成邏輯跳轉
頁面組件
views文件夾下新建Home.vue
<!--
template標簽負責組件的html結構，有且只有一個根標簽
-->
<template>
<div class="home">
<h1>主頁</h1>
<hr>
<Nav></Nav>
</div>
</template>
<!--
script標簽負責組件的js邏輯：邏輯固定導出（外界才可以導入）
-->
<script>
import Nav from '../components/Nav'
export default {
data() {
return {}
},
methods: {},
components: {
Nav,
}
}
</script>
<!--
style標簽負責組件的css樣式: scoped保證樣式的組件化 樣式只在該組件內部起作用
-->
<style scoped>
</style>
根組件 App.vue：
<template>
<div id="app">
<!--頁面組件占位符-->
<router-view/>
</div>
</template>
配置自定義全局樣式
在mian.js中配置：
// 配置全局樣式 @就代表src文件夾的絕對路徑
// import '@/assets/css/global.css'
// import './assets/css/global.css'
require('./assets/css/global.css'); // 官方提倡required加載靜態文件
路由邏輯跳轉
this.$router 控制路由跳轉
this.$route 控制路由數據
this.$router.push('/') 往下再跳轉一頁
this.$router.go(-2) go是歷史記錄前進后退， 正為前進，負為后退，數字為步數
// router文件夾 index.js中
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/course',
name: 'course',
component: Course
},
]
// 其中name的用法：
<router-link :to="{name: 'course'}">課程頁</router-link>
路由重定向
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home/',
redirect: '/',
},
]
組件的生命周期鈎子
- 一個組件從創建到銷毀的眾多時間節點回調的方法
- 這些方法都是vue組件 實例的成員
- 生命周期鈎子的作用就是滿足不同時間節點需要完成的事
new Vue({
el: "#app",
data: {
msg: "message"
},
beforeCreate () {
console.log("組件要創建了");
console.log(this.msg);
},
created () { // 在該鈎子中完成后台數據的請求
console.log("實例創建成功, data, methods已擁有");
console.log(this.msg);
},
beforeMount() {
console.log("組件准備加載")
},
mounted () { // 特別耗時的數據請求，可以延后到組件初步加載成功，再慢慢請求
console.log("組件加載完成");
},
destroyed() {
console.log("組件銷毀成功了")
}
// 拿到需求 => 確定鈎子函數 => 解決需求的邏輯代碼塊
})
路由傳參
第一種：
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
{
path: '/detail',
redirect: '/course/detail'
}
this.$router.push('/course/detail');
this.$router.push('/course/detail?pk=1'); => this.$route.query.pk
第二種：
{
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
this.$router.push('/course/detail/10'); => this.$route.params.pk