配置一個vue-cli3.0專案

郭邯發表於2019-04-27

Vue

謝謝大家指正，我之前分不清，vue3指的是vue3還是vue-cli3，我這裡講的確實是vue-cli3，我這裡訂正下。之前router的程式碼是貼錯了，也感謝網友的指正，已訂正。

至於評論裡噴我的，本人宣告下吧，本文只合適誠心學習交流的人觀看，傻逼請略過。

----分割線----

以下是正文

說起來有點丟人，我已經使用vue好久了，但是怎麼從0開始配置一個vue專案，每次還是要百度。這次決定寫個部落格，加強下記憶，如果再記不住就直播自己的女朋友洗澡。

以下以新建一個圖書管理專案為例。我使用vue3新建專案，對於建立一個專案來說，vue3真的比vue2簡單很多。

1.初始化專案

1.1全域性安裝vue-cli

建立vue專案，首先要確保全域性安裝了vue命令列工具。

我這邊使用yarn而不用npm，因為yarn要比npm好用的多，強烈推薦使用。如果大家對yarn不熟悉，我這邊免費贈送我的yarn教程。點選檢視。

yarn add global @vue/cli
複製程式碼

1.2 新建專案

使用vue-cli3開發專案，可以使用圖形化介面，也可以使用命令列，還可以基於原型進行開發。我這裡以常見的基於命令列的開發為例。

我想在我D盤的test資料夾下新建一個圖書管理專案，專案名叫book。執行如下命令即可。

D:\test>vue create book
複製程式碼

這裡可以選擇我們需要安裝的前處理器preset。我們可以直接選下圖中的第一個選項，這樣可以省去很多麻煩。不過這裡為了講解需要，我們選擇預設的（bable+eslint）。往後我們再討論怎麼手動安裝其他preset。我強烈建議你選擇第一項，這樣真的可以省去很多麻煩。

程式執行完後，專案結構如下：

.
|-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
複製程式碼

將命令列路徑設定為book專案所在的路徑

D:\test>cd book
複製程式碼

啟動專案

yarn serve
複製程式碼

執行完，我這邊沒有報錯，就說明安裝沒有問題。

2.專案結構

vue已經給我們新建了一個初始的專案結構，但是這個專案結構還不完善。我們需要新建一下幾個目錄。新建的目錄都是新建在src目錄下。

views 使用者存放我們的頁面
store 放置vuex程式
api 放置所有的介面程式
utils 放置工具函式（可有可無）
router 放置路由資訊
styles 放置全域性樣式（可有可無）
components 這個已經有了，用來存放我們頁面中的元件。我們可以直接把元件新建在components目錄下，不過這樣不太清晰，我喜歡在components目錄下，再為每個頁面新建一個資料夾，把每個頁面的元件放在對應的檔案下
assets 這個也已經有了，用來存放我們的資原始檔，視訊、音訊、圖片等。

此時的目錄結構如下：

|-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.專案介紹

我們要講解vue的使用，總的拿個專案練手。我就做一回產品經理，虛擬一個圖書管理專案吧。我們有2個頁面。分別如下

登入頁，使用者輸入賬號admin和密碼admin，就跳轉到我們的首頁
首頁，顯示一些圖書資訊（我為了省事就不顯示了）。

這個專案會涉及到那些操作呢：

點選跳轉
請求
展示

因此處理，vue提供給我們的元件外，我們還需要手動新增一下這些元件

路由元件：vue-router
請求元件：axios mock
ui元件：element-ui sass
表單驗證元件：vee-validate
狀態：vuex js-cookie

好了現在我們根據我們的需求，一步步開發我們的頁面。

4. 開發專案

4.1 登入頁

在views資料夾下新建Login.vue、Index.vue 。這三個頁面的程式碼大同小異，目前只是基本的程式碼，稍後還要修改。

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

    }
  },
}
</script>

複製程式碼

修改src目錄下的App.vue 檔案。刪掉#app檔案裡的內容，改為<router-view>，這裡就是以為顯示其他元件的地方。刪除script中的內容。修改後的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開發任何一個專案都涉及都路由，所以我們先講解路由。這裡需要安裝的元件是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'
import Detail from '../views/Detail.vue'

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

export default router
複製程式碼

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

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')
複製程式碼

好了現在我們可以訪問我們的頁面了，忽略連結上的埠號，vue會根據你電腦埠的使用情況，自動選擇一個合適的埠號，所以我的埠號可能跟你的不同。

http://localhost:8081/#/ index頁面，這是因為我在路由裡使用redirect重定向
http://localhost:8081/#/index 還是index頁面
http://localhost:8081/#/login login頁面

ok 自此我們的路由配置成功。我這邊訪問頁面是沒有問題，如果你有問題，你就找下自己的錯誤在哪裡。

6.element-ui

下面就進入我們的頁面開發模式，首先我們要開發的是login頁。我們可以使用原生的html開發，但是，效率低下，所以我們還是用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。

把程式碼修改成下面這樣子後，我們的表單就建完了。開啟頁面。發現我們頁面功能是有了，但是太醜了，表單佔據了整個頁面的寬度，因此我們還要修改下樣式。這裡我們就要用到sass

<template>
  <div class="login">
    <div class="l-form">
      <div class="l-tip">圖書館管理系統</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的，但是我不推薦這樣用，因為原生太醜了。我們要使用css前處理器寫css樣式。css前處理器有sass和less，當然還有其他的但是我沒用過。less我不推薦使用，因為功能不強、像自定義函式功能就沒有，寫程式碼特別彆扭，我推薦sass。

安裝sass

D:\test\book>yarn add node-sass sass-loader
複製程式碼

vue-cli3 對sass簡直是0配置，上面我們安裝好處理器後，直接在style標籤上加上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>

複製程式碼

樣式跟我們想要的還有點差別，這是是因為父元素的樣式問題引起的，修改App.vue中的style。主要是給html，body還有#app元素設定了寬和高和邊距。

<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>

複製程式碼

再開啟瀏覽器，看我們的頁面，已經很好看了。頁面長下面這樣。

8.normalize.css

安裝normalize.css 其實這個安不安裝都可以，我是有強迫症就安裝了。

安裝

yarn add normalize.css
複製程式碼

修改main.js引入normalize.css。

配置

import 'normalize.css'
複製程式碼

9.axios

我們在登入頁要登入，這就涉及到了發ajax請求，這個我們使用axios

安裝

D:\test\book>yarn add axios
複製程式碼

使用

在api資料夾下新建config.js檔案，配置一些請求的通用選項，同時還對gei和post請求進一步封裝。其實封裝不封裝都無所謂，我個人感覺封裝後會省事一點。程式碼如下：

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

//  這個baseUrl要根據實際情況進行改變
axios.defaults.baseURL = "/"
axios.defaults.headers.common["Content-Type"] =
  "application/json; charset=UTF-8"
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"

// 請求攔截器 新增token
axios.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

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

export default {
  // get請求
  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請求
  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檔案。這個函式的作用就是請求後臺的login介面。

程式碼如下:

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

axios不用特別配置的，引入就可以用。現在問題來了，有了介面了，但是我們沒有後臺啊。我們沒法做登入的功能。不過不用擔心，現在的我們的前端已經很強大了。沒有後端，我們可以使用mock來模擬後端。

10.設定eslint

在安裝mock前，我們還有一個小問題要解決，就是設定eslint的規則，預設的eslint的規則很嚴格的，我們在頁面甚至不能使用console.log() 這就會給我們的除錯帶來困難。因此我們要禁用一些eslint規則。

開啟package.json，找到eslintConfig項，在找到其下的rules。配置"no-console": "off"。就可以關閉eslint對console的限制。

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

好了，現在我們就可以愉快的在vue寫console了。

11. mock

mock是啥呢？mock是一個測試工具。mock會攔截ajax請求並可以按照一定規則返回資料。以前需要後臺返回給我們的資料，現在我們可以使用mock返回了。mock的功能很強大，可以模擬出後端的增刪改查等功能。非常方便我們前端進行測試.

安裝

D:\test\book>yarn add mockjs
複製程式碼

使用

在main.js的同級目錄下新建mock.js。我們在mock.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: '賬號或者密碼錯誤'
    }
  }
})
複製程式碼

這段程式碼的作用即使攔截login介面請求，當賬號和密碼是admin的時候，就返回請求成功，否則返回‘賬號密碼錯誤’

現在問題來了？我們寫好程式了，怎麼使用mock呢，其實非常簡單，簡單到我都不敢相信。我們直接在main.js檔案中引入mock.js既可。

配置

在main.js中新增如下程式碼。

// 引入mock
import './mock.js'
複製程式碼

ok，現在再開啟我們的login頁。輸入賬號和密碼。如果不是admin，則彈窗報錯.

如果賬號密碼正確，則跳轉到index頁面。

自此大體工作都完成了，接下來，我們繼續完成專案（好累）。

12.vee-validate

我們的登入表單還有個問題，就是怎麼加驗證。表單不驗證，一來不容易發現問題，二來會頻繁的騷擾後端。自己寫驗證也可以，但是每次都要重複寫很多程式碼，鍵盤都受不了。so，還是用元件吧，我使用的是vee-validate。

安裝：

yarn add vee-validate
複製程式碼

配置：

在main.js中引入vee-validate

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

// 漢化表單驗證
import zhCN from 'vee-validate/dist/locale/zh_CN'
Validator.localize('zh_CN',
  zhCN)
複製程式碼

修改login.vue 新增表單驗證，以使用者名稱為例，我的要求是使用者名稱不能為空，新增的規則如下：

<el-input
v-model="form.name"
v-validate="{required:true}"
name="name"
:class="{'is-danger':errors.has('name')}"
data-vv-as="使用者名稱"
placeholder="請輸入使用者名稱"
></el-input>
複製程式碼

v-validate 裡配置的是驗證規則
name 是欄位名稱，這個名稱可以自己定
is-danger 是我為報錯的欄位配置的一個class名，如果erros.has(欄位名)不為空，則說明驗證沒通過，就新增該class。

is-danger 樣式如下，把錯誤表單的邊框設定成紅色，目的是為了突出顯示錯誤資訊。至於為什麼加/deep/字首，是因為el-input元件是element元件，我們在style中設定的樣式是區域性的，沒法應用的到element子元件上，所以需要加上/deep/。需不需要加你自己視情況而定。

/deep/ .is-danger input {
  border-color: #ff3860;
}
複製程式碼

接下來，我們要考慮錯誤資訊怎麼顯示。我的做法是直接在表單下顯示錯誤資訊就可以，缺點是如果錯誤資訊很多，每個輸入框都有一個錯誤資訊的話，表單就會變得很高。

因為每個輸入框都要顯示錯誤資訊，所以我覺得把顯示錯誤資訊的功能做成元件比較好，這樣可以通用，省了很多重複程式碼。

在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="請輸入使用者名稱"
    ></el-input>
</el-form-item>
<el-form-item>
    <FormErrorMessage v-if="errors.has('name')">{{ errors.first('name') }}</FormErrorMessage>
</el-form-item>
複製程式碼

表單驗證新增了，錯誤顯示的元件也新增了，現在只差怎麼觸發表單驗證了。很簡單，修改onSubmit函式，程式碼如下,如果result為true，則說明表單驗證通過了，否則就是有錯。

    onSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          login.submit(this.form).then(res => {
            // console.log('res:', res);
            if (res.data.status === 1) {
              // 如果登入成功則跳轉我index頁面
              this.$router.push('/index')
            } else {
              // 使用element-ui的message元件，顯示登入報錯資訊
              this.$message({
                message: res.data.message,
                type: 'error',
                duration: 5000
              })
            }
          }).catch(error => {
            this.$message({
              message: error,
              type: 'error',
              duration: 5000
            })
          })
        }
      })
    },
複製程式碼

新增錯誤提示後，表單樣式還需要調整下，我就不調了，結果如下：

完整Login.vue程式碼如下:

<template>
  <div class="login">
    <div class="l-form">
      <div class="l-tip">圖書館管理系統</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="請輸入使用者名稱"
          ></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="請輸入密碼"
          ></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) {
              // 如果登入成功則跳轉我index頁面
              this.$router.push('/index')
            } else {
              // 使用element-ui的message元件，顯示登入報錯資訊
              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

本來接下來該講vuex了，這裡插播一個元件js-cookie

地址：js-cookie

安裝

yarn add js-cookie
複製程式碼

至於這個怎麼用，我們稍後講vuex的時候再講解。

14.vuex

先在我們終於講到最後一個知識點vuex了。為什麼要用vuex,在本專案裡，使用vuex是為了保持網站的登入狀態。比如我們index頁面要求使用者必須登入才能夠訪問，這裡就要用vuex了。vuex例項化後叫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
      // 設定過期時間為1天
      Cookies.set('name', name, {
        expires: 1
      })
    },
    loginOut(state) {
      state.name = ''
      Cookies.remove('name')
    }
  }
})
export default store
複製程式碼

我們定義了一個loginIn方法，呼叫這個方法，我們就可以把使用者的使用者名稱存在store中，同時也存在cookie裡，cookie的有效期是1天。

配置

修改main.js，把store引入進去main.js中，然後在new Vue函式中配置

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

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

修改Login.vue的onSubmit方法，使用者登入成功後，就把使用者資訊存在store中。

if (res.data.status === 1) {
    // 將使用者資訊儲存在vuex中
    this.$store.commit('loginIn', this.form.name)
    // 如果登入成功則跳轉我index頁面
    this.$router.push('/index')
} else {
    ……
}
複製程式碼

修改Index.vue頁面，我們就可以在這個頁面獲取登入使用者的使用者名稱了。

Index.vue程式碼如下：

<template>
  <div>這裡是Index 頁面，此時登入的使用者是{{userName}}</div>
</template>
<style>
</style>
<script>
export default {
  name: 'Index',
  data() {
    return {
    }
  },
  computed: {
    userName() {
      return this.$store.state.name
    }
  },
}
</script>

複製程式碼

自此，一個我們常用vue專案基本上配置完成了。當然不同的專案，還有不同的元件需要安裝，到時候你們再根據情況確定吧。

最後再講一個關於路由攔截的問題。

15.路由攔截

現在我們的專案已經有登入功能了，但是並沒有對使用者進行限制。比如我的Index.vue頁面要求只有登入使用者才能訪問。這時該怎麼辦呢？這就要用路由攔截了，凡是沒有登入的使用者要訪問Index.vue的時候，統一讓他重定向到Login頁面，讓其登入。

修改main.js。新增如下程式碼：

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

router.afterEach(() => {})
複製程式碼

ok，現在我們訪問Index頁面的時候就要求使用者必須登入了。

終於，終於關於配置一個vue.3.0專案的所有內容，大概講完了。在寫這篇部落格之前，我還一直髮愁該怎麼講，這麼多內容。沒想到一點點講，終於把自己想講的都講完了。

當然我講的都是簡單的使用，入門而已。如果真的做專案還需要對每個元件都深入瞭解，比如element和mock和vee-validate。你們自己去研究吧。

為了方便檢視程式碼，我把整個專案上傳到了githubl了。整個專案的github地址如下：book

vue-cli3.0腳手架+typescript專案建立
2018-08-08
VueTypeScript
配置一個簡單的傳統SSM專案
2021-10-03
SSM
? 升級vue-cli3.0/vue.config.js配置檔案/vue-cli3.0移動端適配
2019-02-22
VueJS
IDEA配置Maven執行一個簡單的專案
2022-07-18
IdeaMaven
vue-cli3.0 多頁面配置
2018-08-16
Vue
vue-cli3.0配置GZIP壓縮
2018-12-27
Vue
一個簡單的 SpringBoot 專案的 Dockfile 和 cicd 檔案配置
2020-06-24
Spring Boot
spring mvc專案配置一覽
2021-09-09
SpringMVC
webpack實戰（一）：真實專案中一個完整的webpack配置
2019-03-04
Web
搭建一個專案
2024-08-16
Apache配置多個專案公用80埠
2024-06-15
Apache
Java配置17-配置Nginx代理多個前端專案
2018-11-01
JavaNginx前端
gitlab webhook 如何針對一個專案下的子模組配置
2020-08-13
GitlabWebHook
Django 專案配置初體驗（一）
2019-02-16
Django
關於一個java專案呼叫另一個java專案的心得
2019-03-28
Java
基於webpack4.x專案實戰2 - 配置一次,多個專案執行
2019-04-05
Web
搭建一個SSM專案
2019-01-19
SSM
第一個SpringBoot專案
2020-08-24
Spring Boot
開始一個專案
2020-10-30
第一個activity專案
2024-07-18
推薦一個.Ner Core開發的配置中心開源專案
2023-05-12
Android進階一個專案，一個Toolbar
2019-03-04
Android
vue專案配置
2018-12-12
Vue
IDEA如何在一個專案空間下管理多個專案？
2021-04-18
Idea
SpringBoot專案建立與第一個SSM專案示例
2019-04-19
Spring BootSSM
一個vue-cli建立專案webpack相關都配置合簡介
2019-03-02
VueWeb
Django建立第一個專案
2019-01-17
Django
建立第一個django專案
2018-07-20
Django
如何搭建一個vue專案
2023-05-17
Vue
一個完整的scrapy 專案
2020-05-02
如何接手一個新專案
2018-04-16
如何吃透一個java專案？
2021-08-18
Java
Python 建立一個Django專案
2021-07-24
PythonDjango
完了，又火一個專案
2021-07-10
SpringBoot 專案中配置多個 Jackson 的 ObjectMapper ，以及配置遇到的坑
2023-01-13
Spring BootObjectAPP
Laravel 學習筆記一: 專案框架和配置檔案
2022-07-31
Laravel筆記框架
這 10 套專案，一個比一個驚豔！
2024-11-18
Golang 專案之配置檔案
2018-12-02
Golang