常用vue3脚手架配置流程

我目前看到的脚手架搭建，多多少少都有点问题。我目前创建了很多项目，已经习惯了以下一套流程，下面总结一下：

一、创建vite项目

npm create vite@latest 
npm install
npm run dev

二、安装element plus

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

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })] // importStyle: "sass" 
    }),
  ],
})

三、配置根目录别名

这里的问题会比较多，特别是使用ts的，别名配置总归会有点问题，只是因为教程里大多都少写了一个依赖包。
在vite.config.ts中配置：

import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [
    vue(),
    // element plus 配置
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

一般到这都会报错Vue: Cannot find module 'node:url' or its corresponding type declarations.，这是因为这个node:url没有导进来。

npm install --save-dev @types/node

四、配置sass

npm install sass -D

按照我的习惯，是在src下创建一个styles文件夹

--styles
 |--index.scss  //统一出口，在main.ts中暴露
 |--global.scss  //全局样式，可以在scss中直接使用$value

对于global.scss，在vite.config.ts配置全局

import {defineConfig} from 'vite'
···
export default defineConfig({
    plugins: [
        vue(),
        //组件配置 
    ],
    resolve: {
       //别名配置 
    },
    css: {
        preprocessorOptions: {
            scss: {
                // additionalData: '@import "@/styles/global.scss";' 这行代码可能会导致报错
                additionalData: '@use "@/styles/global.scss" as *;' //建议使用这行代码
            }
        }
    }
})

在main.ts中挂载

import "./styles/index.scss";

五、配置vue-router

npm i vue-router@4

在src下创建一个router文件夹

--router
 |--index.ts  //统一出口，在main.ts中暴露
 |--router.ts  //各个路由

在index.ts中

import { createRouter, createWebHistory } from "vue-router";
import { constantRoute } from "./router";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: constantRoute,
    scrollBehavior() {
        return {
            left: 0,
            top: 0,
        };
    },
});

export default router;

在router.ts中

export const constantRoute = [
    {
        path: "/",
        name: "layout",
        component: () => import("@/layout/index.vue"),  //我喜欢把介绍页存入layout并配置为根路径
    }
];

在main.ts中挂载

import router from "./router";
app.use(router);

六、配置pinia

npm install pinia
npm install pinia-plugin-persistedstate

在src下创建一个stores文件夹

--stores
 |--index.ts  //统一出口
 |--modules
   |--test.ts //可以根据不同功能再细分文件夹

在main.ts中挂载

import { createPinia } from "pinia";
app.use(createPinia());

在index.ts中

import { createPinia } from "pinia"; //引入pinia
import piniaPluginPersistedState from "pinia-plugin-persistedstate"; //引入持久化插件

const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

export default pinia;
export * from "./modules/test.ts";