我目前看到的脚手架搭建，多多少少都有点问题。我目前创建了很多项目，已经习惯了以下一套流程，下面总结一下：
一、创建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";
