我的vue3+vite+ts开发初始化操作

一、创建vite项目

npm init vite ViteDemo

二、安装路由

npm install vue-router@4 -S

1. 新建router文件夹 ，文件夹下新建index.ts文件并配置相关内容；
2. 新建views文件夹 ，文件夹下路由相关视图；
3. App.vue文件修改 ，<route-view />
4. main.ts文件修改 ，createApp(App).use(router).mount(“#app”)；router为创建的路由文件

三、自动导入组件配置与路径别名配置

npm i unplugin-auto-import -D

npm i @types/node -D

vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import path from "path";

export default defineConfig({
 plugins: [
   vue(),
   AutoImport({
     imports: ["vue", "vue-router"],
   }),
 ],
 resolve: {
   alias: {
     "@": path.resolve(__dirname, "./src")
   },
 },
 server: {
   host: "0.0.0.0",
 },
});

四、安装常用包

安装axios： npm install axios

安装pinia： npm install pinia

安装pinia持久化： npm i pinia-plugin-persistedstate

安装element-plus：npm install element-plus --save

安装icons：npm install @element-plus/icons-vue

安装scss：npm install sass -d

题外话：

本来还安装了一个mockjs用来模拟请求数据的，但mockjs与axios的responseType相冲，涉及blob时就不生效，所以放弃了。