前言：使用腳手架搭建vue項(xiàng)目，使用腳手架可以開發(fā)者能夠開箱即用快速地進(jìn)行應(yīng)用開發(fā)而開發(fā)。
搭建
#創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
vue init webpack my-project
#選擇所需要的選項(xiàng)
如圖：
cd my-project
npm run dev
訪問localhost:8080
vue目錄層級(jí)
理解vue項(xiàng)目的目錄層級(jí)以及文件的作用十分很重要
├── build/ # Webpack 配置目錄
├── dist/ # build 生成的生產(chǎn)環(huán)境下的項(xiàng)目
├── config/ # Vue基本配置文件，可以設(shè)置監(jiān)聽端口，打包輸出等
├── node_modules/ # 依賴包，通常執(zhí)行npm i會(huì)生成
├── src/ # 源碼目錄（開發(fā)的項(xiàng)目文件都在此文件中寫）
│ ├── assets/ # 放置需要經(jīng)由 Webpack 處理的靜態(tài)文件，通常為樣式類文件，如css，sass以及一些外部的js
│ ├── components/ # 公共組件
│ ├── filters/ # 過濾器
│ ├── store/ # 狀態(tài)管理
│ ├── routes/ # 路由，此處配置項(xiàng)目路由
│ ├── services/ # 服務(wù)（統(tǒng)一管理 XHR 請(qǐng)求）
│ ├── utils/ # 工具類
│ ├── views/ # 路由頁(yè)面組件
│ ├── App.vue # 根組件
│ ├── main.js # 入口文件
├── index.html # 主頁(yè)，打開網(wǎng)頁(yè)后最先訪問的頁(yè)面
├── static/ # 放置無(wú)需經(jīng)由 Webpack 處理的靜態(tài)文件，通常放置圖片類資源
├── .babelrc # Babel 轉(zhuǎn)碼配置
├── .editorconfig # 代碼格式
├── .eslintignore # （配置）ESLint 檢查中需忽略的文件（夾）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）在上傳中需被 Git 忽略的文件（夾）
├── package.json # 本項(xiàng)目的配置信息，啟動(dòng)方式
├── package-lock.json # 記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)npm package的具體來(lái)源和版本號(hào)
├── README.md # 項(xiàng)目說明
1、Vue的生命周期
vue生命周期圖以及詳情可以查看官方文檔：Vue生命周期
Vue實(shí)例具有生命周期：beforeCreate( 創(chuàng)建前 )、created ( 創(chuàng)建后 ）、beforeMount、mounted、beforeUpdate、updated（更新后）、beforeDestroy（銷毀前）、destroyed（銷毀后）
beforeCreate( 創(chuàng)建前 )
在Vue實(shí)例創(chuàng)建前，el 和 data 并未初始化，無(wú)法訪問methods，data，computed等上的方法和數(shù)據(jù)。
created ( 創(chuàng)建后 ）
實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用，實(shí)例已完成以下配置：數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算，watch/event事件回調(diào)，完成了data 數(shù)據(jù)的初始化，el沒有。掛在階段還沒有開始, $el屬性目前不可見，你可以調(diào)用methods中的方法，改變data中的數(shù)據(jù)，并且修改可以通過vue的響應(yīng)式綁定體現(xiàn)在頁(yè)面上，獲取computed中的計(jì)算屬性，也可以發(fā)異步請(qǐng)求。
beforeMount
此時(shí)已經(jīng)完成編譯模板，把data里面的數(shù)據(jù)和模板生成html，完成了el和data 初始化，注意此時(shí)還沒有掛在html到頁(yè)面上。
mounted
掛在完成，也就是模板中的HTML渲染到HTML頁(yè)面中，此時(shí)一般可以做一些ajax操作，mounted只會(huì)執(zhí)行一次。
beforeUpdate
在數(shù)據(jù)更新之前被調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前，可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加地重渲染過程
updated（更新后）
在由于數(shù)據(jù)更改導(dǎo)致地虛擬DOM重新渲染和打補(bǔ)丁只會(huì)調(diào)用，調(diào)用時(shí)，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作，然后在大多是情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)，該鉤子在服務(wù)器端渲染期間不被調(diào)用
beforeDestroy（銷毀前）
在實(shí)例銷毀之前調(diào)用，實(shí)例仍然完全可用，
這一步還可以用this來(lái)獲取實(shí)例，
一般在這一步做一些重置的操作，比如清除掉組件中的定時(shí)器 和 監(jiān)聽的dom事件
destroyed（銷毀后）
在實(shí)例銷毀之后調(diào)用，調(diào)用后，所以的事件監(jiān)聽器會(huì)被移出，所有的子實(shí)例也會(huì)被銷毀，該鉤子在服務(wù)器端渲染期間不被調(diào)用
生命周期內(nèi)容轉(zhuǎn)載至：作者：前端_周瑾 來(lái)源：簡(jiǎn)書
鏈接：https://www.jianshu.com/p/672e967e201c
2、Vue導(dǎo)入導(dǎo)出：import export
使用場(chǎng)景：一些公共的方法可以寫進(jìn)js中，并進(jìn)行導(dǎo)出，在需要用到的時(shí)候?qū)⑵鋵?dǎo)入即可使用
本案例：
創(chuàng)建后的項(xiàng)目為：
首先在static中創(chuàng)建一個(gè)common.js，并在common.js中定義一些公共方法
var common = {
getFullName(firstName, secondName) {
return firstName + secondName
}
}
export default common
全局導(dǎo)入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import common from "../static/js/common";
Vue.config.productionTip = false
Vue.prototype.$common = common
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
如何使用呢？
this.$common來(lái)調(diào)用里面的方法
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
firstName:'hello',
secondName:'world'
}
},
methods:{
getFullName(){
return this.$common.getFullName(this.firstName,this.secondName)
}
}
}
<h2>{{getFullName()}}</h2>
效果如下：
3、路由
更多知識(shí)請(qǐng)看官方文檔：路由
原本項(xiàng)目中是：
現(xiàn)在可以在components文件夾中創(chuàng)建多一個(gè)vue組件，本案例創(chuàng)建Info.vue
{
path: '/Info',
name: 'Info',
component: Info
}
效果如下：
路由跳轉(zhuǎn) $router
#在HelloWorld.vue中添加
<button @click="$router.push('Info')">Info</button>
點(diǎn)擊按鈕后跳轉(zhuǎn)：
又或者將跳轉(zhuǎn)寫成一個(gè)方法，兩者效果一致：
#methods中添加方法
goToInfo(){
this.$router.push('Info')
}
#添加一個(gè)按鈕，綁定一個(gè)點(diǎn)擊事件
<button @click="goToInfo()">Info</button>
vue router 路由跳轉(zhuǎn)常用的4 個(gè)方法
#1、/xx 路徑名
this.$router.push（'/xx'）
#2、路由帶參數(shù) query中放置參數(shù)
this.$router.push({
name:'xx1',
query:{
name: 'zhangsan'，
xx:xx
}
})
獲取參數(shù)：this.$route.query.xx
#3、路由帶參
this.$router.push({
path:'/xx2',
query:{
xx:xx
}
})
#4、路由不會(huì)帶查詢參數(shù)，可以在route 里面的params 里查詢到
this.$router.push({
name:'xx3',
params:{
xx:xx
}
})
獲取參數(shù)：this.$route.params.xx
$router 和 $route的區(qū)別
1.router是VueRouter的一個(gè)對(duì)象，通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個(gè)router的實(shí)例對(duì)象，這個(gè)對(duì)象中是一個(gè)全局的對(duì)象，他包含了所有的路由包含了許多關(guān)鍵的對(duì)象和屬性。
舉例：history對(duì)象
$router.push({path:‘home’});本質(zhì)是向history棧中添加一個(gè)路由，在我們看來(lái)是 切換路由，但本質(zhì)是在添加一個(gè)history記錄
2.route是一個(gè)跳轉(zhuǎn)的路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部的對(duì)象，可以獲取對(duì)應(yīng)的name,path,params,query等
查看route的信息
getRouteInfo(){
console.log(this.$route.name)
console.log(this.$route.path)
console.log(this.$route.query)
console.log(this.$route.params)
}
路由守衛(wèi)（導(dǎo)航守衛(wèi)）
vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
記住參數(shù)或查詢的改變并不會(huì)觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察 $route 對(duì)象來(lái)應(yīng)對(duì)這些變化，或使用 beforeRouteUpdate 的組件內(nèi)守衛(wèi)
全局導(dǎo)航守衛(wèi)
舉一個(gè)場(chǎng)景：用戶需要登陸了才可以訪問系統(tǒng)的后臺(tái)頁(yè)面，不然的話不允許進(jìn)行頁(yè)面跳轉(zhuǎn)。
在main.js中添加：
import router from './router'
#路由守衛(wèi)
router.beforeEach(({name}, from, next) => {
// 獲取用戶的JWT Token信息驗(yàn)證用戶是否登陸
if (localStorage.getItem('token')) {
// 用戶已經(jīng)登陸了，如果用戶在login頁(yè)面
if (name === 'Login') {
//跳轉(zhuǎn)至首頁(yè) /
next('/');
} else {
next();
}
} else {
if (name === 'Login') {
next();
} else {
next({name: 'Login'});
}
}
});
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中
每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：
-
to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
-
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
-
next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
-
next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)
-
next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕)，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
-
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象，且允許設(shè)置諸如 replace: true、name: ‘home’ 之類的選項(xiàng)以及任何用在 router-link 的 to prop 或 router.push 中的選項(xiàng)。
-
next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)。
此處路由參數(shù)內(nèi)容轉(zhuǎn)載至：
作者： 妖色調(diào)
網(wǎng)址： https://www.cnblogs.com/loveyt/p/10905662.html
Axios異步請(qǐng)求
發(fā)送請(qǐng)求給服務(wù)器一般都是異步請(qǐng)求，在main.js中配置全局axios
import axios from 'axios'
Vue.use(VueAxios,axios)
//{config}其他配置，譬如說請(qǐng)求頭等信息
發(fā)送Get請(qǐng)求：
this.$axios.get('url',{config}).then(res => {
//處理返回的數(shù)據(jù)結(jié)果
})
發(fā)送Post請(qǐng)求：
this.$axios.post('url',data,{config}).then(res => {
//處理返回的數(shù)據(jù)結(jié)果
})
發(fā)送Delete請(qǐng)求：
this.$axios.delete('url',data,{config}).then(res => {
//處理返回的數(shù)據(jù)結(jié)果
})
發(fā)送Put請(qǐng)求：
this.$axios.put('url',data,{config}).then(res => {
//處理返回的數(shù)據(jù)結(jié)果
})
請(qǐng)求攔截器interceptors
前端攔截器interceptors，作用是攔截請(qǐng)求
場(chǎng)景：每次發(fā)送請(qǐng)求到服務(wù)器時(shí)，都帶上token驗(yàn)證
在main.js中添加
axios.interceptors.request.use(config=>{
//從本地localStorage獲取token信息，并放置在請(qǐng)求頭中
if(localStorage.getItem('token')){
config.headers.Authorization = localStorage.getItem('token')
}
return config;
});
過濾器filter
場(chǎng)景：項(xiàng)目中對(duì)于日期數(shù)據(jù)格式的過濾
在main.js中添加文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-499925.html
Vue.filter('formatDate', function(value) {
// return Moment(value).format('YYYY-MM-DD HH:mm:ss')
return Moment(value).format('YYYY-MM-DD')
})
使用：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-499925.html
<div class="time">{{ birthday | formatDate }}</div>
到了這里，關(guān)于搭建Vue項(xiàng)目以及項(xiàng)目的常見知識(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
