构建Vite+Vue+Pinia+Axios+el-plus基础框架

构建Vite+Vue+Pinia+Axios+el-plus基础框架

环境准备

node.js (v16以上版本),vscode

1.构建项目

npm create vite@latest

输入项目名

选择Vue

选择TypeScript

选择后项目自动创建

2.ts文件引用提示错误及vue文件引用提示错误问题解决(如果使用的是vetur插件)

刚创建完的项目ts文件及vue文件打开会报引用错误：

下载volar插件：TypeScript Vue Plugin (Volar)和Vue Language Features (Volar)
禁用vetur插件

3.安装vue-router路由组件

3.1 npm i vue-router@4
3.2 src下创建文件夹router及在其内创建index.ts，内容如下：

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

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "home",
            component: () => import("../views/Home.vue")
        }
    ]
})
export default router

3.3创建对应Home.vue内容如下：

<template>
    <div>
        <h1>This is HomePage!!</h1>
    </div>
</template>
  
<script setup lang='ts'>

</script>
  
<style lang='less' scoped>
</style>

3.4在main.ts中使用router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3.5 在App.vue中增加标签：

<RouterView></RouterView>

路由配置完成
关于路由的导航守卫等等高级用法请参考官网教程，地址如下：
https://router.vuejs.org/zh/guide/

4.安装状态管理组件pinia

4.1为什么使用pinia：这是官方推荐的状态管理组件，相比较于更早的vuex，它的写法更加简单、支持setup的语法，同时也支持原来vuex的大部分写法，代码管理更为简洁，开发效率更高，它的包体积也很小。
4.2 安装：npm i pinia
4.3 基本使用、持久化、在路由守卫中使用状态
4.3.1基本使用
新建文件src/store/index.ts内容如下：

import { createPinia } from 'pinia'

const pinia = createPinia()
export default pinia

在main.ts中注入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './store'

createApp(App).use(router).use(pinia).mount('#app')

在store目录下创建模块文件夹modules，新建文件demo.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'

const useDemoStore = defineStore('demo', () => {
    const counter = ref(0)
    const increment = () => {
        counter.value++
    }
    return {
        counter,
        increment
    }
})
export default useDemoStore

在Home.vue中使用：

<template>
    <div>
        <h1>This is HomePage!!</h1>
        <h3>counter: {{ counter }}</h3>
        <button @click="add">
            点击增加
        </button>
    </div>
</template>
  
<script setup lang='ts'>
import useDemoStore from '../store/modules/demo'
import { storeToRefs } from 'pinia'
const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)

const add = () => {
    demoStore.increment()
}
</script>
  
<style lang='less' scoped>
</style>

这里需要注意的是storeToRefs方法是用于响应式，如果直接解构demoStore会失去响应式效果。

4.3.2 持久化
状态管理持久化是因为存储的一些状态信息是保存在内存中的，这些信息在退出登录之前都应该保留，而刷新浏览器会导致状态回归初始值，所以需要对状态做持久化。具体方法如下：
A.安装组件 npm i pinia-plugin-persistedstate
B.引入组件
在创建pinia时使用修改store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia

C.修改src/store/modules/demo.ts
在defineStore方法中增加第三个参数：

 {persist: true}

这个参数将会把状态存入localstorage中，刷新页面时会同步回状态。
此时状态已完成持久化。
如果需要将状态存储进sessionStorage中需要把persist修改为对象：

{
    persist: {
        key: 'aaa',
        storage: sessionStorage
    }
}

4.3.3 在路由守卫中使用状态
A.创建路由守卫文件src/router/guard/index.ts

import router from '../../router'
import useDemoStore from '../../store/modules/demo'
import { storeToRefs } from 'pinia'

// 全局前置守卫
router.beforeEach((to, from) => {
    const demoStore = useDemoStore()
    const { counter } = storeToRefs(demoStore)
    // 从 store 中获取其他值，再决定返回值
    // 这里演示获取 store 中 counter 的值
    console.log('counter：' + counter.value)
    return true
})

B.在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './store'
import './router/guard/index'

createApp(App).use(router).use(pinia).mount('#app')

以上则为路由守卫中使用状态方法。

5.集成element-plus

5.1安装 npm i element-plus
5.2 引入，方式分为全局引入和按需引入，全局引入省事但是包体积较大，按需引入（自动引入）是官方推荐方式，这里只介绍自动引入方式，想了解其他方式可参考element-plus官网。
5.2.1 安装自动引入组件 npm install -D unplugin-vue-components unplugin-auto-import
5.2.2 修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),]
})

至此配置已完成，可以使用了。
5.2.3 使用
修改Home.vue的button改为element-plus的按钮样式，无需做任何额外引用

运行效果：

6.集成axios用于与后端交互

6.1安装 npm i axios
6.2配置跨域在vite.config.ts中增加代理

  server: {
    open: true,
    host: '127.0.0.1',
    port: 5173,
    https: false,
    proxy: { // 配置跨域
      '/demo': {
        target: 'https://www.baidu.com/',
        ws: true,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/demo/, '')
      }
    }
  }

6.3在对应页面使用例如

import axios from 'axios'
axios.get("demo").then((res) => {
    console.log(res)
})

至此基础框架搭建完成，更多封装用法及其他用法后续再介绍。