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

目录

• 一. 参考文档
• 二. vite搭建项目
• 三. 配置element-ui
• 四. 配置vue-router
• 五. 配置vuex 安装
• 六. 配置axios
• 七. 总结

# 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

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

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

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

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

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

import { createStore } from "vuex";

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

  },
  actions: {

  }
})

export default store

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

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 => {
  // 在这可以根据实际后台的响应值去进行判断,如code: 0 或者登录失效跳转到登录页等
  return response.data
}, error => {
  return Promise.reject(error)
})

export default services

import request from "../utils/request"

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

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