用vite快速搭建vue3项目及初始化(pinia、router、封装、element-plus的自动导入)

前言

很多是之前跟着黑马的Vue3教程配置的，但是后面husky风格啊eslint啊这些被我删了，em有点烦人。

和上一篇react一样，发现自己写项目的时候记不住需要做什么，所以现在写一篇来给自己总结一下。（后面忘了也不用翻视频了，直接照着抄答案）

只写流程，没有理论。

这是我写的习惯，只具备一定通用性，有需要可参考。

创建项目

npm create vue
npm install
npm run dev

这个选项是比较多的，可以参考一下（后面eslint和prettier没去用）上来还是一样，src里面一通删除，只留下这样。

App.vue里面只留下

<script setup></script>

<template>
  <router-view></router-view>
</template>

<style scoped></style>

 main.js里面引入css的那一句去掉。

路由

这里由于自动导入了router了，所以很方便。

还是一样用login来测试。

加了一个导航守卫对‘/’进行跳转。如果有需要对token校验的话可以再加一项，我放在下面注释。

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/Login/LoginPage.vue')
    }
  ]
})

router.beforeEach((to, from, next) => {
    // 如果路径是根路径，重定向到 /login
    if (to.path === '/') {
        next('/login')
    } else {
        // 否则正常放行
        next()
    }
})


// router.beforeEach((to, from, next) => {
//     // 获取token
//     const token = localStorage.getItem('token')

//     // 如果路径是根路径，重定向到 /login
//     if (to.path === '/') {
//         next('/login')
//     } else if (!token && to.path !== '/login') {
//         // 如果没有token, 且访问的不是登录页，拦截到登录
//         next('/login')
//     } else {
//         // 否则正常放行
//         next()
//     }
// })


export default router

 这里的路由前缀如果有需要的话再去vite.config.js里面设置base。像我这里设置的就是/home。

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base:'/home',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

仓库

这里很方便也是因为已经建好了pinia，所以不需要去太多的配置，主要加上一个自动保存到本地的工具。

npm i pinia-plugin-persistedstate

新建文件夹和文件到这样

因为大多数项目都有token，所以这里就用token为例子了。

在user.js中

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

//  token setToken removeToken
export const useTokenStore = defineStore(
  'token',
  () => {
    const accessToken = ref('')
    const setAccessToken = (newToken) => {
      accessToken.value = newToken
    }
    const removeAccessToken = () => {
      accessToken.value = ''
    }

    const refreshToken = ref('')
    const setRefreshToken = (newToken) => {
      refreshToken.value = newToken
    }
    const removeRefreshToken = () => {
      refreshToken.value = ''
    }

    return {
      accessToken,
      refreshToken,
      setAccessToken,
      removeAccessToken,
      setRefreshToken,
      removeRefreshToken
    }
  },
  {
    persist: true
  }
)

记住下面这个persist要设置为true才能自动保存。这里的双token是为了无感刷新，如果有兴趣可以看我之前的文章，在axios的运用那一篇。

然后在index.js中

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

const pinia = createPinia()
pinia.use(persist)

export default pinia
export * from './modules/user'

如何使用pinia里的呢？

这里举个例子。

import { useTokenStore } from '@/stores'
const tokenStore = useTokenStore()

const token=tokenStore.accessToken

tokenStore.removeAccessToken()

请求

又是老生常谈的请求了，直接cv吧。

npm install axios

新建一个api文件夹和api.js、utils.js

在util.js下

//utils.js
import axios from "axios"
axios.defaults.baseURL='http://127.0.0.1'
const axiosInstance = axios.create({
    timeout: 5 * 1000, // 请求超时时间（5秒）
    retry: 0, //全局重试次数
    retryDelay: 1000 //全局重试间隔
})
 
export const request = (options) => {
    return new Promise((resolve, reject) => {
        axiosInstance(options)
            .then((response) => resolve(response.data))
            .catch((error) => reject(error))
    })
}

然后在api.js下引入就好

//api.js
import { request } from "./utils";
export const login = (data) => {
    return request({
        url: '/login',
        params: data,
        method:'GET'
    })
}

然后就只剩下建杂七杂八的文件夹，搞完就这样。

自动导入element-plus

这个看情况，但是我挺多用element-plus的。

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

然后在vite.config.js里面加上这些。自己看着办就行咯。

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


export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})