(精简版)vue3项目模板框架搭建(含踩坑点)|青训营笔记

238 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的第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 image.png - tsconfig.ts
image.png

项目引入各开发依赖

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等文件根据自身情况自行配置