腳本之家服務器常用軟件

快捷導航

使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建項目

更新時間：2021年08月24日 11:39:13 作者：YuShiYue

因為vue3出了一段時間了，element也出了基于vue3.x版本的element-plus，這篇文章就拿他們搭建一個項目，希望能給你帶來幫助

一. 參考文檔

Ant Design Vue2.x官方文檔

axios文檔

二. vite搭建項目

安裝

# npm 安裝
npm init vite@latest

# yarn 安裝
yarn create vite

# 快速安裝vue模板項目
yarn create vite my-vue-app --template vue

npm init vite@latest my-vue-app -- --template vue

運行

npm run dev 

# or
yarn dev

三. 配置element-ui

下載包

npm install element-plus --save

修改src/main.js

import { createApp } from 'vue'

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

驗證是否配置成功

如果組件要按需引入的話可以參考文檔介紹

四. 配置vue-router

從vue2遷移

安裝

npm install vue-router@4

創(chuàng)建src/router/index.js文件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/demo',
    name: 'demo',
    component: () => import('../views/demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

修改main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
// 引入路由配置
import router from './router/index'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
// 注冊
app.use(router)
app.mount('#app')

修改App.vue添加路由視圖

<template>
  <el-button type="primary">按鈕</el-button>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'app'
}
</script>

創(chuàng)建src/views/demo.vue文件

經(jīng)過以上的過程,訪問http://localhost:3000/demo 就可以看到一下界面,表明我們的路由配置成功~

五. 配置vuex 安裝

npm install vuex@next --save

創(chuàng)建src/store/index.js文件

import { createStore } from "vuex";

const store = createStore({
  state () {
    return {
      app: '我是app'
    }
  },
  mutations: {

  },
  actions: {

  }
})

export default store

修改src/main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import router from './router/index'
// 引入文件
import store from './store/index'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
// 注冊
app.use(store)
app.mount('#app')

在App.vue中查看是否配置成功

能夠成功打印測配置成功

六. 配置axios

安裝

npm install axios -S

創(chuàng)建src/utils/request.js

import axios from 'axios'

const services = axios.create({
  baseURL: 'https://api.apiopen.top',
  timeout: 6000
})

// 請求攔截
services.interceptors.request.use(config => {
  // 在這可以添加一些請求頭的邏輯,如配置token
  return config
}, error => {
  return Promise.reject(error)
})

// 響應攔截
services.interceptors.response.use(response => {
  // 在這可以根據(jù)實際后臺的響應值去進行判斷,如code: 0 或者登錄失效跳轉(zhuǎn)到登錄頁等
  return response.data
}, error => {
  return Promise.reject(error)
})

export default services

創(chuàng)建src/api/app.js配置氣你跪求方法

import request from '../utils/request'

export const send = () => {
  return request({
    url: '/getJoke',
    method: 'get',
    params: {
      page: 1,
      count: 2,
      type: 'video'
    }
  })
}

在App.vue引入測試

<template>
  <el-button type="primary">按鈕</el-button>
  <router-view></router-view>
</template>

<script>
// 引入請求方法 
import { send } from "./api/app";
export default {
  name: "app",
  async mounted() {
    console.log("store>>>", this.$store.state.app);
    // 請求
    const res = await send()
    console.log('res>>>', res)
  },
};
</script>

查看瀏覽器是否請求成功