这是我参与「第四届青训营」笔记创作活动的第13天.
前言: (初版,有较为详细的图文配置解说)
前端监控系统开发记录【项目工程化与基础配置】|青训营笔记 - 掘金 (juejin.cn)
--本文为前端项目基础工程记录--
基础项目相关依赖安装
创建vite + vue3 + ts 项目
npm init vite@latest -- --template vue-ts
安装 pinia 与 pinia-plugin-persist
yarn add pinia pinia-plugin-persist
安装vue3生态 axios、 vue-router、 vue-axios
yarn add axios vue-router vue-axios
安装其他实用独立模块 @vueuse/core、 echarts、
yarn add @vueuse/core echarts
~~基础独立库安装完成~~~,
安装UI组件库及图标库
yarn add @element-plus/icons-vue element-plus
yarn add -D @vicons/fluent @vicons/ionicons5 @vicons/utils
安装原子CSS开发库
yarn add -D windicss
安装项目vite实用插件
组件自动导入, ElemenPlus组件自动导入
yarn add -D unplugin-auto-import unplugin-vue-components
windicss vite插件支持, 用处?
yarn add -D vite-plugin-windicss
安装开发依赖(devDependencies)
node类型支持,解决 path等全局变量ts报错
yarn add -D @types/node
vite + vue3项目 JSX/TSX 支持
yarn add -D @vitejs/plugin-vue-jsx
项目scss语法支持
yarn add -D sass sass-loader
~~基本项目相关依赖安装完成~
项目开发配置文件初始化
- 路径别名[tsconfig.ts, vite.config.ts]
- vite插件相关配置[vite.config.ts] (JSX/TSX、WindiCSS、AutoImport、Components、ElemenPlus
- SCSS全局样式引入[vite.config.ts] (css->preprocessorOptions->scss->addtionalData)
- auto-import路径配置[tsconfig.ts]
- pinia-plugin-persist types 声明 [tsconfig.ts]
- server-proxy配置 [vite.config.ts]
注意vite插件引入路径后的“/vite”
注意vite->scss配置,需要使用
@use “{path}” as *;
, 方式引入文件,分号不可缺少
配置文件源码,不过细展示各项,坑都已提出,有爱自取
[tsconfig.ts, vite.config.ts]
- vite.config.ts
- tsconfig.ts
项目引入各开发依赖
vue生态、CSS原子库及UI组件库相关引入
- pinia导出与引用pinia-plugin-persist
- router导出, router基础路由重定向
- ElementPlus黑暗模式样式引入
- WindiCSS样式引入
代码展示
``` typescript [main.ts]
import { createApp } from "vue";
import "virtual:windi.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import App from "@/App.vue";
import router from "@/router";
import pinia from "@/store/pinia";
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount("#app");
```
App.vue等文件根据自身情况自行配置