目錄
創建Vue項目
環境安裝
第一步：安裝node
從node官網下載node安裝包---下載地址
下載完成之后，按照提示一步一步安裝就可以
第二步：更換鏡像源
因為node默認的下載驅動npm（相當於python的pip）是從國外的服務器進行下載，速度比較慢，所以我們可以通過切換鏡像源，更換到國內的服務器
在終端cmd中執行如下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步：
安裝腳手架，就是安裝Vue環境，還是在cmd中進行操作
cnpm install -g @vue/cli
注意：
如果下載出現錯誤，我們需要清空緩存，再次進行下載，不然還是會報錯
具體執行命令如下：
npm cache clean --force
創建項目
第一步：在cmd中cd到需要創建項目的目錄下面 cd 項目目錄
第二步：創建vue項目 vue create 項目名字
按照提示一步一步進行選擇，具體選擇結果如下：
創建成功之后，可以通過npm run serve運行項目，可以通過npm run build進行項目打包上線
這些都需要先進入項目的根目錄才能進行操作
注意：
當創建vue項目的時候，很容易報錯，如果報錯，同樣的需要清緩存
pycharm打開Vue項目
-
索引到vue項目的根目錄，進行打開項目
-
安裝vue.js插件進行高亮
通過
File --> settings --> Plugins搜索vue.js，搜索完成后直接install，安裝完成之后重啟pycharm就可以了 -
配置npm啟動服務啟動vue項目
run -->Edit Configurations進入Run/Debug Configurations頁面，點擊+按鈕，找到npm，點擊進入
項目目錄介紹
"""
| -vue-proj
| | -node_modules 項目依賴
| | -public
| | | -圖標
| | | -單頁面.html
| | -src
| | | -assets 靜態文件(img、css、js)
| | | -components 存放小組件
| | | -小組件
| | | -views 存放頁面組件
| | | -頁面組件
| | | -App.vue 根組件
| | | -main.js 主腳本文件
| | | -router.js 安裝vue-router插件的腳本文件 - 配置路由的
| | | -store.js 安裝vuex插件的腳本文件 - 全局倉庫 - 數據共享
| | -配置文件們
| | -README.md 關鍵命令說明
"""
認識完項目目錄之后，我們就要開始做項目了，但此時優點懵，該如何下手？main.js干啥的？App.vue干啥的？
入口文件（main.js）
main.js就是Vue項目程序的入口文件，是初始化Vue實例並實際使用插件，加載各種公共組件
如果main.js內部什么都沒有寫，那么運行項目，頁面中什么都不會看到。
// import 別名 from '文件(后綴可以省略)'
import Vue from 'vue' // 導入vue
// import App from './App.vue'
import App from './App' // 導入時可以省略后綴
import router from './router' // .代表相對路徑的當前路徑
import store from '@/store.js' // @表示src絕對路徑
Vue.config.productionTip = false;
// new Vue({
// router,
// store,
// render: h => h(App)
// }).$mount('#app');
// 等價於下面的
new Vue({
el: '#app',
router: router,
store,
// render: (fn) => {
// return fn(App)
// }
render (fn) { // 讀取組件渲染給掛載點el
return fn(App)
}
});
路由配置（router.js ）
相當於一個映射關系，通過頁面地址，匹配到相應的頁面組件，然后再去根組件（App.vue）進行替換，最后進行渲染
import Vue from 'vue' // 導入vue
import Router from 'vue-router' // 導入路由
// 導入單頁面組件
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
Vue.use(Router); // 全局使用
export default new Router({
mode: 'history', // 組件更換模擬頁面轉跳形成瀏覽器歷史記錄
base: process.env.BASE_URL,
routes: [
// 路由就是 url路徑 與 vue組件 的映射關系
// 映射出的組件會替換 根組件 中的 router-view 標簽
// 通過 router-link 標簽完成 url路徑 的切換
{
path: '/page-first',
name: 'page-first',
component: PageFirst
},
{
path: '/page-second',
name: 'page-second',
component: PageSecond
},
]
})
組件
組件也就是.vue文件，可分為頁面組件和小組件，但都是由三部分組成：
- 模板（template）：寫HTML標簽和內容的
- 腳本（script）：寫JavaScript腳本的
- 樣式（style）：寫CSS樣式的
<template>
<!--組件有且只有一個根標簽-->
<div id="app">
<h1 @click="btnClick">{{ title }}</h1>
</div>
</template>
<script>
// 組件內部導出，其它文件才能import導入該組件
export default {
name: "App",
data() {
return {
title: '主頁'
}
},
methods: {
btnClick() {
console.log(this.title)
}
}
}
</script>
<!--scoped樣式組件局部化-->
<style scoped>
h1 {
color: red;
}
</style>
前台路由的基本工作流程
目錄結構
"""
|__vue-proj
| |__src
| | |__components
| | | |__Nav.vue
| | |__views
| | | |__PageFirst.vue
| | | |__PageSecond.vue
| | |__App.vue
| | |__router.js
"""
根組件（App.vue）
<template>
<div id="app">
<!--根組件只需要書寫router-view-->
<!--router-view就是vue-router插件路由占位標簽-->
<router-view></router-view>
</div>
</template>
頁面組件（PageFirst.vue）
<template>
<div class="page-first">
<Nav></Nav>
<h1>page-first</h1>
</div>
</template>
<script>
// 導入進行使用組件
import Nav from '@/components/Nav'
export default {
name: "PageFirst",
components: { //注冊小組件
Nav
}
}
</script>
<style scoped>
.page-first {
width: 100%;
height: 800px;
background: orange;
}
h1 {
text-align: center;
}
</style>
小組件（Nav.vue）
<template>
<div class="nav">
<!--router-link就是vue-router插件路由頁面轉跳的標簽，頁面加載后會被解析為a標簽-->
<!--router-link不同於a標簽，路由轉跳之后更換組件，不會發送頁面轉跳，用to屬性設置轉跳路徑-->
<router-link to="/page-first">first</router-link>
<router-link :to="{name: 'page-second'}">second</router-link>
<router-link to="/course">課程</router-link>
<!-- to后跟路由路徑 | :to后可以用name設置路由別名 -->
</div>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped>
.nav {
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
}
.nav a {
margin: 0 20px;
font: normal 20px/100px '微軟雅黑';
}
.nav a:hover {
color: red;
}
</style>
配置全局樣式文件
目錄結構
"""
|__vue-proj
| |__src
| | |__assets
| | | |__css
| | | | |__global.css
| | |__main.js
"""
global.css
html, body, h1, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
/* router-link標簽激活狀態擁有的類名 */
.router-link-exact-active.router-link-active {
color: greenyellow;
border-bottom: 2px solid greenyellow;
}
main.js
// 配置全局css
import '@/assets/css/global.css'
組件生命周期鈎子
概念
一個組件從創建到銷毀，整個過程中的特殊的時間節點回調的方法，稱之為生命周期鈎子
如：一個組件創建成功就會回調 created方法，內部數據要更新和更新完畢分別調用 beforeUpdate方法與updated方法
案例
<template>
<div class="page-second">
<Nav></Nav>
<h1 @click="printTitle">{{ title }}</h1>
<input type="text" v-model="title">
</div>
</template>
<script>
import Nav from '@/components/Nav'
export default {
name: "PageSecond",
data() {
return {
title: 'page-second'
}
},
methods: {
printTitle() {
console.log(this.title)
}
},
components: {
Nav
},
beforeCreate() {
console.log('開始創建組件');
console.log(this.title);
console.log(this.printTitle);
this.title = '呵呵';
},
created() { // 重點
console.log('組件創建成功');
console.log(this.title);
console.log(this.printTitle);
// 請求后台數據，完成數據的更新
this.title = '嘿嘿';
},
beforeMount() {
console.log('組件開始渲染');
},
mounted() {
console.log('組件渲染成功');
this.title = '嘻嘻';
},
beforeUpdate() {
console.log('數據開始更新');
},
updated() {
console.log('數據更新完畢');
},
activated() {
console.log('組件激活');
},
deactivated() {
console.log('組件停用');
},
destroyed() {
console.log('組件銷毀成功');
}
}
</script>
路由的重定向
router.js
import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/page-first',
name: 'page-first',
component: PageFirst
},
{ // 重定向路由的兩種方式
path: '/page/first',
// redirect: {'name': 'page-first'},
redirect: '/page-first'
},
]
})