如何配置一個(gè)vue3.0項(xiàng)目

這篇文章主要介紹如何配置一個(gè)vue3.0項(xiàng)目，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

1.初始化項(xiàng)目

1.1全局安裝vue-cli

創(chuàng)建vue項(xiàng)目，首先要確保全局安裝了vue命令行工具。

我這邊使用yarn而不用npm，因?yàn)閥arn要比npm好用的多，強(qiáng)烈推薦使用。如果大家對(duì)yarn不熟悉，我這邊免費(fèi)贈(zèng)送我的yarn教程。 點(diǎn)擊查看 。

yarn add global @vue/cli

1.2 新建項(xiàng)目

使用vue-cli3開發(fā)項(xiàng)目，可以使用圖形化界面，也可以使用命令行，還可以基于原型進(jìn)行開發(fā)。我這里以常見(jiàn)的基于命令行的開發(fā)為例。

我想在我D盤的test文件夾下新建一個(gè)圖書管理項(xiàng)目，項(xiàng)目名叫book。執(zhí)行如下命令即可。

D:\test>vue create book

這里可以選擇我們需要安裝的預(yù)處理器preset。我們可以直接選下圖中的第一個(gè)選項(xiàng)，這樣可以省去很多麻煩。不過(guò)這里為了講解需要，我們選擇默認(rèn)的（bable+eslint）。往后我們?cè)儆懻撛趺词謩?dòng)安裝其他preset。我強(qiáng)烈建議你選擇第一項(xiàng)，這樣真的可以省去很多麻煩。

程序執(zhí)行完后，項(xiàng)目結(jié)構(gòu)如下：

.
|-book
 |-babel.config.js
 |-package.json
 |-public
 | |-favicon.ico
 | |-index.html
 |-README.md
 |-src
 | |-App.vue
 | |-assets
 | | |-logo.png
 | |-components
 | | |-HelloWorld.vue
 | |-main.js
 |-yarn.lock

將命令行路徑設(shè)置為book項(xiàng)目所在的路徑

D:\test>cd book

啟動(dòng)項(xiàng)目

yarn serve

執(zhí)行完，我這邊沒(méi)有報(bào)錯(cuò)，就說(shuō)明安裝沒(méi)有問(wèn)題。

2.項(xiàng)目結(jié)構(gòu)

vue已經(jīng)給我們新建了一個(gè)初始的項(xiàng)目結(jié)構(gòu)，但是這個(gè)項(xiàng)目結(jié)構(gòu)還不完善。我們需要新建一下幾個(gè)目錄。新建的目錄都是新建在src目錄下。

• views 用戶存放我們的頁(yè)面

• store 放置vuex程序

• api 放置所有的接口程序

• utils 放置工具函數(shù)（可有可無(wú)）

• router 放置路由信息

• styles 放置全局樣式（可有可無(wú)）

• components 這個(gè)已經(jīng)有了，用來(lái)存放我們頁(yè)面中的組件。我們可以直接把組件新建在components目錄下，不過(guò)這樣不太清晰，我喜歡在components目錄下，再為每個(gè)頁(yè)面新建一個(gè)文件夾，把每個(gè)頁(yè)面的組件放在對(duì)應(yīng)的文件下

• assets 這個(gè)也已經(jīng)有了，用來(lái)存放我們的資源文件，視頻、音頻、圖片等。

此時(shí)的目錄結(jié)構(gòu)如下：

|-book
 |-babel.config.js
 |-package.json
 |-public
 | |-favicon.ico
 | |-index.html
 |-README.md
 |-src
 | |-api
 | |-App.vue
 | |-assets
 | | |-logo.png
 | |-components
 | | |-HelloWorld.vue
 | |-main.js
 | |-router
 | |-store
 | | |-index.js
 | |-utils
 | |-views
 |-yarn.lock

3.項(xiàng)目介紹

我們要講解vue的使用，總的拿個(gè)項(xiàng)目練手。我就做一回產(chǎn)品經(jīng)理，虛擬一個(gè)圖書管理項(xiàng)目吧。我們有2個(gè)頁(yè)面。分別如下

• 登錄頁(yè) ，用戶輸入賬號(hào)admin和密碼admin，就跳轉(zhuǎn)到我們的首頁(yè)

• 首頁(yè)，顯示一些圖書信息（我為了省事就不顯示了）。

這個(gè)項(xiàng)目會(huì)涉及到那些操作呢：

• 點(diǎn)擊跳轉(zhuǎn)

• 請(qǐng)求

• 展示

因此處理，vue提供給我們的組件外，我們還需要手動(dòng)添加一下這些組件

• 路由組件：vue-router

• 請(qǐng)求組件：axios mock

• ui組件：element-ui sass

• 表單驗(yàn)證組件：vee-validate

• 狀態(tài)：vuex js-cookie

好了現(xiàn)在我們根據(jù)我們的需求，一步步開發(fā)我們的頁(yè)面。

4. 開發(fā)項(xiàng)目

4.1 登錄頁(yè)

在views文件夾下新建Login.vue、Index.vue 。這三個(gè)頁(yè)面的代碼大同小異，目前只是基本的代碼，稍后還要修改。

<template>
 <!-- 這是login頁(yè)面 -->
 <div>這里是login 頁(yè)面</div>
 <!-- 這是index頁(yè)面 -->
 <div>這里是index 頁(yè)面</div>
</template>
<style>
</style>
<script>
export default {
 name: 'Login',
 data() {
 return {

 }
 },
}
</script>

修改src目錄下的App.vue 文件。刪掉#app文件里的內(nèi)容，改為<router-view>，這里就是以為顯示其他組件的地方。刪除script中的內(nèi)容。修改后的App.vue代碼如下：

<template>
 <div id="app">
 <router-view></router-view>
 </div>
</template>
<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

5.vue-router

使用vue開發(fā)任何一個(gè)項(xiàng)目都涉及都路由，所以我們先講解路由。這里需要安裝的組件是vue-router

D:\test\book>yarn add vue-router

在我們剛剛新建的router文件夾下新建index.js文件，程序如下

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Index from '../views/Index.vue'

Vue.use(Router)
const router = new Router({
 routes: [{
 path: '/',
 redirect: '/index'
 }, {
 path: '/login',
 name: 'Login',
 components: Login
 }, {
 path: 'index',
 name: 'Index',
 components: Index
 }]
})

export default router

修改main.js，引入我們的路由。在第3行我引入了路由，在new Vue的時(shí)候還需要把router加進(jìn)去了，這樣才能正常使用路由。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

好了現(xiàn)在我們可以訪問(wèn)我們的頁(yè)面了，忽略鏈接上的端口號(hào)，vue會(huì)根據(jù)你電腦端口的使用情況，自動(dòng)選擇一個(gè)合適的端口號(hào)，所以我的端口號(hào)可能跟你的不同。

• http://localhost:8081/#/ index頁(yè)面，這是因?yàn)槲以诼酚衫锸褂胷edirect重定向

• http://localhost:8081/#/index 還是index頁(yè)面

• http://localhost:8081/#/login login頁(yè)面

ok 自此我們的路由配置成功。我這邊訪問(wèn)頁(yè)面是沒(méi)有問(wèn)題，如果你有問(wèn)題，你就找下自己的錯(cuò)誤在哪里。

6.element-ui

下面就進(jìn)入我們的頁(yè)面開發(fā)模式，首先我們要開發(fā)的是login頁(yè)。我們可以使用原生的html開發(fā)，但是，效率低下，所以我們還是用vue組件吧。這里我以element-ui為例

安裝

D:\test\book>yarn add element-ui

配置：在main.js中引入element

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

修改Login.vue。

把代碼修改成下面這樣子后，我們的表單就建完了。打開頁(yè)面。發(fā)現(xiàn)我們頁(yè)面功能是有了，但是太丑了，表單占據(jù)了整個(gè)頁(yè)面的寬度，因此我們還要修改下樣式。這里我們就要用到sass

<template>
 <div class="login">
 <div class="l-form">
  <div class="l-tip">圖書館管理系統(tǒng)</div>
  <el-form ref="form" :model="form">
  <el-form-item>
   <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item>
   <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
   <el-button type="primary" @click="onSubmit">登錄</el-button>
  </el-form-item>
  </el-form>
 </div>
 </div>
</template>

<script>
export default {
 name: 'Login',
 data() {
 return {
  form: {
  name: '',
  password: ''
  }
 }
 },
 methods: {
 onSubmit() {

 },
 },
}
</script>
<style>
</style>

7.sass

我們可以直接用css的，但是我不推薦這樣用，因?yàn)樵罅?。我們要使用css預(yù)處理器寫css樣式。css預(yù)處理器有sass和less，當(dāng)然還有其他的但是我沒(méi)用過(guò)。less我不推薦使用，因?yàn)楣δ懿粡?qiáng)、像自定義函數(shù)功能就沒(méi)有，寫代碼特別別扭，我推薦sass。

安裝sass

D:\test\book>yarn add node-sass sass-loader

vue-cli3 對(duì)sass簡(jiǎn)直是0配置，上面我們安裝好處理器后，直接在style標(biāo)簽上加上 lang="scss" 就可以使用sass了。

修改Login.vue中的style

<style lang="scss">
.login {
 width: 100%;
 height: 100%;
 background: #000;
 .l-form {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 width: 300px;
 margin: auto;
 border-radius: 8px;
 background: #fff;
 padding: 20px;
 .l-tip {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
 }
 .el-form {
  width: 100%;
  margin: auto;
  margin-top: 20px;
  .el-form-item {
  button {
   width: 100%;
  }
  }
 }
 }
}
</style>

樣式跟我們想要的還有點(diǎn)差別，這是是因?yàn)楦冈氐臉邮絾?wèn)題引起的，修改App.vue中的style。主要是給html，body還有#app元素設(shè)置了寬和高和邊距。

<template>
 <div id="app">
 <router-view></router-view>
 </div>
</template>


<style lang="scss">
html,
body,
#app{
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
}
</style>

再打開瀏覽器，看我們的頁(yè)面，已經(jīng)很好看了。頁(yè)面長(zhǎng)下面這樣。

8.normalize.css

安裝normalize.css 其實(shí)這個(gè)安不安裝都可以，我是有強(qiáng)迫癥就安裝了。

安裝

yarn add normalize.css

修改main.js引入normalize.css。

配置

import 'normalize.css'

9.axios

我們?cè)诘卿涰?yè)要登錄，這就涉及到了發(fā)ajax請(qǐng)求，這個(gè)我們使用axios

安裝

D:\test\book>yarn add axios

使用

在api文件夾下新建config.js文件，配置一些請(qǐng)求的通用選項(xiàng)，同時(shí)還對(duì)gei和post請(qǐng)求進(jìn)一步封裝。其實(shí)封裝不封裝都無(wú)所謂，我個(gè)人感覺(jué)封裝后會(huì)省事一點(diǎn)。代碼如下：

import axios from "axios"
import { Message } from "element-ui"

// 這個(gè)baseUrl要根據(jù)實(shí)際情況進(jìn)行改變
axios.defaults.baseURL = "/"
axios.defaults.headers.common["Content-Type"] =
 "application/json; charset=UTF-8"
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"

// 請(qǐng)求攔截器 添加token
axios.interceptors.request.use(
 config => {
 return config
 },
 error => {
 return Promise.reject(error)
 }
)

// 響應(yīng)攔截器即異常處理
axios.interceptors.response.use(
 response => {
 return response
 },
 error => {
 Message({
  message: error.message,
  type: "error",
  duration: 5000,
 })
 return Promise.resolve(error)
 }
)

export default {
 // get請(qǐng)求
 get(url, param) {
 return new Promise((resolve, reject) => {
  axios({
  method: "get",
  url,
  params: param,
  })
  .then(res => {
   resolve(res)
  })
  .catch(error => {
   Message({
   message: error,
   type: "error",
   duration: 5000,
   })
   reject(error)
  })
 })
 },
 // post請(qǐng)求
 post(url, param) {
 return new Promise((resolve, reject) => {
  axios({
  method: "post",
  url,
  data: param,
  })
  .then(res => {
   resolve(res)
  })
  .catch(error => {
   Message({
   message: error,
   type: "error",
   duration: 5000,
   })
   reject(error)
  })
 })
 },
 // all get
 allGet(fnArr) {
 return axios.all(fnArr)
 },
}

在api的文件夾下新建login.js文件。這個(gè)函數(shù)的作用就是請(qǐng)求后臺(tái)的login接口。

代碼如下:

import service from './config'
class Login {
 login(params) {
 return service.post('login', params)
 }
}
export default new Login()

axios不用特別配置的，引入就可以用?，F(xiàn)在問(wèn)題來(lái)了，有了接口了，但是我們沒(méi)有后臺(tái)啊。我們沒(méi)法做登錄的功能。不過(guò)不用擔(dān)心，現(xiàn)在的我們的前端已經(jīng)很強(qiáng)大了。沒(méi)有后端，我們可以使用mock來(lái)模擬后端。

10.設(shè)置eslint

在安裝mock前，我們還有一個(gè)小問(wèn)題要解決，就是設(shè)置eslint的規(guī)則，默認(rèn)的eslint的規(guī)則很嚴(yán)格的，我們?cè)陧?yè)面甚至不能使用console.log() 這就會(huì)給我們的調(diào)試帶來(lái)困難。因此我們要禁用一些eslint規(guī)則。

打開package.json，找到 eslintConfig 項(xiàng)，在找到其下的rules。配置 "no-console": "off" 。就可以關(guān)閉eslint對(duì)console的限制。

"eslintConfig": {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/essential",
  "eslint:recommended"
 ],
 "rules": {
  "no-console": "off"
 },
 "parserOptions": {
  "parser": "babel-eslint"
 }
 },

好了，現(xiàn)在我們就可以愉快的在vue寫console了。

11. mock

mock是啥呢？mock是一個(gè)測(cè)試工具。mock會(huì)攔截ajax請(qǐng)求并可以按照一定規(guī)則返回?cái)?shù)據(jù)。以前需要后臺(tái)返回給我們的數(shù)據(jù)，現(xiàn)在我們可以使用mock返回了。mock的功能很強(qiáng)大，可以模擬出后端的增刪改查等功能。非常方便我們前端進(jìn)行測(cè)試.

安裝

D:\test\book>yarn add mockjs

使用

在main.js的同級(jí)目錄下新建mock.js。我們?cè)趍ock.js里定義剛剛我們需要的login接口。代碼如下：

import Mock from 'mockjs'

Mock.mock('/login', 'post', (options) => {
 // console.log('options:', options)
 let data = JSON.parse(options.body)
 let name = data.name
 let password = data.password
 if (name === 'admin' && password === 'admin') {
 return {
  status: 1,
  message: '登錄成功'
 }
 } else {
 return {
  status: 0,
  message: '賬號(hào)或者密碼錯(cuò)誤'
 }
 }
})

這段代碼的作用即使攔截login接口請(qǐng)求，當(dāng)賬號(hào)和密碼是admin的時(shí)候，就返回請(qǐng)求成功，否則返回‘賬號(hào)密碼錯(cuò)誤'

現(xiàn)在問(wèn)題來(lái)了？我們寫好程序了，怎么使用mock呢，其實(shí)非常簡(jiǎn)單，簡(jiǎn)單到我都不敢相信。我們直接在main.js文件中引入mock.js既可。

配置

在main.js中添加如下代碼。

// 引入mock
import './mock.js'

ok，現(xiàn)在再打開我們的login頁(yè)。輸入賬號(hào)和密碼。如果不是admin，則彈窗報(bào)錯(cuò).

如果賬號(hào)密碼正確，則跳轉(zhuǎn)到index頁(yè)面。

自此大體工作都完成了，接下來(lái)，我們繼續(xù)完成項(xiàng)目（好累）。

12.vee-validate

我們的登錄表單還有個(gè)問(wèn)題，就是怎么加驗(yàn)證。表單不驗(yàn)證，一來(lái)不容易發(fā)現(xiàn)問(wèn)題，二來(lái)會(huì)頻繁的騷擾后端。自己寫驗(yàn)證也可以，但是每次都要重復(fù)寫很多代碼，鍵盤都受不了。so，還是用組件吧，我使用的是vee-validate。

安裝：

yarn add vee-validate

配置：

在main.js中引入vee-validate

// 引入表單驗(yàn)證
import VeeValidate, {
 Validator
} from 'vee-validate'
Vue.use(VeeValidate, {
 fieldsBagName: 'vee-fields'
})

// 漢化表單驗(yàn)證
import zhCN from 'vee-validate/dist/locale/zh_CN'
Validator.localize('zh_CN',
 zhCN)

修改login.vue 添加表單驗(yàn)證，以用戶名為例，我的要求是用戶名不能為空，添加的規(guī)則如下：

<el-input
v-model="form.name"
v-validate="{required:true}"
name="name"
:class="{'is-danger':errors.has('name')}"
data-vv-as="用戶名"
placeholder="請(qǐng)輸入用戶名"
></el-input>

• v-validate 里配置的是驗(yàn)證規(guī)則

• name 是字段名稱，這個(gè)名稱可以自己定

• is-danger 是我為報(bào)錯(cuò)的字段配置的一個(gè)class名，如果erros.has(字段名)不為空，則說(shuō)明驗(yàn)證沒(méi)通過(guò)，就添加該class。

is-danger 樣式如下，把錯(cuò)誤表單的邊框設(shè)置成紅色，目的是為了突出顯示錯(cuò)誤信息。至于為什么加 /deep/ 前綴，是因?yàn)?el-input 組件是element組件，我們?cè)?style 中設(shè)置的樣式是局部的，沒(méi)法應(yīng)用的到element子組件上，所以需要加上/deep/。需不需要加你自己視情況而定。

/deep/ .is-danger input {
 border-color: #ff3860;
}

接下來(lái)，我們要考慮錯(cuò)誤信息怎么顯示。我的做法是直接在表單下顯示錯(cuò)誤信息就可以，缺點(diǎn)是如果錯(cuò)誤信息很多，每個(gè)輸入框都有一個(gè)錯(cuò)誤信息的話，表單就會(huì)變得很高。

因?yàn)槊總€(gè)輸入框都要顯示錯(cuò)誤信息，所以我覺(jué)得把顯示錯(cuò)誤信息的功能做成組件比較好，這樣可以通用，省了很多重復(fù)代碼。

在components文件夾下新建common文件夾，再在commen文件夾下新建 FormErrorMessage.vue 組件

代碼如下：

<template>
 <div class="help is-danger">
 <slot></slot>
 </div>
</template>
<script>
export default {
 name: 'FormErrorMessage'
}
</script>
<style scoped>
.help {
 font-size: 0.75rem;
 margin-top: 0.25rem;
 line-height: 0.75rem;
}

.help.is-danger {
 color: #ff3860;
}
</style>

在Login.vue中引入

import FormErrorMessage from '../components/common/FormErrorMessage.vue'

在components中配置

 name: 'Login',
 components: {
 FormErrorMessage
 },
 data() {
 return {
  form: {
  name: '',
  password: ''
  }
 }
 },

使用

<el-form-item>
 <el-input
  v-model="form.name"
  v-validate="{required:true}"
  name="name"
  :class="{'is-danger':errors.has('name')}"
  data-vv-as="用戶名"
  placeholder="請(qǐng)輸入用戶名"
 ></el-input>
</el-form-item>
<el-form-item>
 <FormErrorMessage v-if="errors.has('name')">{{ errors.first('name') }}</FormErrorMessage>
</el-form-item>

表單驗(yàn)證添加了，錯(cuò)誤顯示的組件也添加了，現(xiàn)在只差怎么觸發(fā)表單驗(yàn)證了。很簡(jiǎn)單，修改onSubmit函數(shù)，代碼如下,如果result為true，則說(shuō)明表單驗(yàn)證通過(guò)了，否則就是有錯(cuò)。

 onSubmit() {
  this.$validator.validate().then(result => {
  if (result) {
   login.submit(this.form).then(res => {
   // console.log('res:', res);
   if (res.data.status === 1) {
    // 如果登錄成功則跳轉(zhuǎn)我index頁(yè)面
    this.$router.push('/index')
   } else {
    // 使用element-ui的message組件，顯示登錄報(bào)錯(cuò)信息
    this.$message({
    message: res.data.message,
    type: 'error',
    duration: 5000
    })
   }
   }).catch(error => {
   this.$message({
    message: error,
    type: 'error',
    duration: 5000
   })
   })
  }
  })
 },

添加錯(cuò)誤提示后，表單樣式還需要調(diào)整下，我就不調(diào)了，結(jié)果如下：

完整 Login.vue 代碼如下:

<template>
 <div class="login">
 <div class="l-form">
  <div class="l-tip">圖書館管理系統(tǒng)</div>
  <el-form ref="form" :model="form">
  <el-form-item>
   <el-input
   v-model="form.name"
   v-validate="{required:true}"
   name="name"
   :class="{'is-danger':errors.has('name')}"
   data-vv-as="用戶名"
   placeholder="請(qǐng)輸入用戶名"
   ></el-input>
  </el-form-item>
  <el-form-item>
   <FormErrorMessage v-if="errors.has('name')">{{ errors.first('name') }}</FormErrorMessage>
  </el-form-item>

  <el-form-item>
   <el-input
   v-model="form.password"
   type="password"
   v-validate="{required:true}"
   name="password"
   :class="{'is-danger':errors.has('password')}"
   data-vv-as="密碼"
   placeholder="請(qǐng)輸入密碼"
   ></el-input>
  </el-form-item>
  <el-form-item>
   <FormErrorMessage v-if="errors.has('password')">{{ errors.first('password') }}</FormErrorMessage>
  </el-form-item>

  <el-form-item>
   <el-button type="primary" @click="onSubmit">登錄</el-button>
  </el-form-item>
  </el-form>
 </div>
 </div>
</template>

<script>
import login from '../api/login.js'
import FormErrorMessage from '../components/common/FormErrorMessage.vue'
export default {
 name: 'Login',
 components: {
 FormErrorMessage
 },
 data() {
 return {
  form: {
  name: '',
  password: ''
  }
 }
 },
 methods: {
 onSubmit() {
  this.$validator.validate().then(result => {
  if (result) {
   login.submit(this.form).then(res => {
   // console.log('res:', res);
   if (res.data.status === 1) {
    // 如果登錄成功則跳轉(zhuǎn)我index頁(yè)面
    this.$router.push('/index')
   } else {
    // 使用element-ui的message組件，顯示登錄報(bào)錯(cuò)信息
    this.$message({
    message: res.data.message,
    type: 'error',
    duration: 5000
    })
   }
   }).catch(error => {
   this.$message({
    message: error,
    type: 'error',
    duration: 5000
   })
   })
  }
  })
 },
 },
}
</script>
<style lang="scss" scoped>
.login {
 width: 100%;
 height: 100%;
 background: #000;
 .l-form {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 width: 300px;
 margin: auto;
 border-radius: 8px;
 background: #fff;
 padding: 20px;
 .l-tip {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
 }
 .el-form {
  width: 100%;
  margin: auto;
  margin-top: 20px;
  .el-form-item {
  button {
   width: 100%;
  }
  }
 }
 }
}
.is-danger input {
 border-color: #ff3860;
}
</style>

13. js-cookie

本來(lái)接下來(lái)該講vuex了，這里插播一個(gè)組件 js-cookie

地址：js-cookie

安裝

yarn add js-cookie

至于這個(gè)怎么用，我們稍后講vuex的時(shí)候再講解。

14.vuex

先在我們終于講到最后一個(gè)知識(shí)點(diǎn)vuex了。為什么要用vuex,在本項(xiàng)目里，使用vuex是為了保持網(wǎng)站的登錄狀態(tài)。比如我們index頁(yè)面要求用戶必須登錄才能夠訪問(wèn)，這里就要用vuex了。vuex實(shí)例化后叫store。

地址：vuex

安裝

D:\test\book>yarn add vuex

在store文件夾下，新建index.js文件

代碼如下：

import Vue from 'vue'
import Vuex from 'vuex'
// 引入js-cookie
import Cookies from 'js-cookie'
Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 name: ''
 },
 mutations: {
 loginIn(state, name) {
  state.name = name
  // 設(shè)置過(guò)期時(shí)間為1天
  Cookies.set('name', name, {
  expires: 1
  })
 },
 loginOut(state) {
  state.name = ''
  Cookies.remove('name')
 }
 }
})
export default store

我們定義了一個(gè)loginIn方法，調(diào)用這個(gè)方法，我們就可以把用戶的用戶名存在store中，同時(shí)也存在cookie里，cookie的有效期是1天。

配置

修改main.js，把store引入進(jìn)去main.js中，然后在 new Vue 函數(shù)中配置

import store from './store/index.js'
……
new Vue({
 router,
 store,
 render: h => h(App),
}).$mount('#app')

好啦，這時(shí)候我們就可以愉快的使用store了。

修改 Login.vue 的 onSubmit 方法，用戶登錄成功后，就把用戶信息存在store中。

if (res.data.status === 1) {
 // 將用戶信息存儲(chǔ)在vuex中
 this.$store.commit('loginIn', this.form.name)
 // 如果登錄成功則跳轉(zhuǎn)我index頁(yè)面
 this.$router.push('/index')
} else {
 ……
}

修改 Index.vue 頁(yè)面，我們就可以在這個(gè)頁(yè)面獲取登錄用戶的用戶名了。

Index.vue 代碼如下：

<template>
 <div>這里是Index 頁(yè)面，此時(shí)登錄的用戶是{{userName}}</div>
</template>
<style>
</style>
<script>
export default {
 name: 'Index',
 data() {
 return {
 }
 },
 computed: {
 userName() {
  return this.$store.state.name
 }
 },
}
</script>

自此，一個(gè)我們常用vue項(xiàng)目基本上配置完成了。當(dāng)然不同的項(xiàng)目，還有不同的組件需要安裝，到時(shí)候你們?cè)俑鶕?jù)情況確定吧。

最后再講一個(gè)關(guān)于路由攔截的問(wèn)題。

15.路由攔截

現(xiàn)在我們的項(xiàng)目已經(jīng)有登錄功能了，但是并沒(méi)有對(duì)用戶進(jìn)行限制。比如我的Index.vue頁(yè)面要求只有登錄用戶才能訪問(wèn)。這時(shí)該怎么辦呢？ 這就要用路由攔截了，凡是沒(méi)有登錄的用戶要訪問(wèn)Index.vue的時(shí)候，統(tǒng)一讓他重定向到Login頁(yè)面，讓其登錄。

修改main.js。添加如下代碼：

// 設(shè)置路由攔截
router.beforeEach((to, from, next) => {
 let name = Cookies.get('name') || store.state.name
 // 如果cookie沒(méi)有過(guò)期或者store中有name值,則允許訪問(wèn)直接通過(guò)。否則就讓用戶登錄
 if (name) {
 store.commit('loginIn', name)
 next()
 } else {
 if (to.path == '/login') {
  next()
 } else {
  next({
  name: 'Login'
  })
  store.commit('loginOut')
 }
 }
})

router.afterEach(() => {})

ok，現(xiàn)在我們?cè)L問(wèn)Index頁(yè)面的時(shí)候就要求用戶必須登錄了。

以上是“如何配置一個(gè)vue3.0項(xiàng)目”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！