一套规范的vue3+vite2+ts4前端工程化项目环境 https://webvueblog.github.io/vue3-vite2-ts4/
（学习视频分享：vuejs教程）
Vue 3 + Typescript + Vite
vue3-vite2-ts4
npm init @vitejs/appvuevue-tsnpm installnpm run dev
目录结构如下
├── public 静态资源├── src│ ├── assets 资源目录（图片、less、css等）│ ├── components 项目组件│ ├── App.vue 主应用│ ├── env.d.ts 全局声明│ └── main.ts 主入口├── .gitignore git忽略配置├── index.html 模板文件├── package.json 依赖包/运行脚本配置文件├── README.md├── tsconfig.json ts配置文件├── tsconfig.node.json ts配置文件└── vite.config.ts vite配置
每个目录的作用后文都会提及
├── src│ ├── router 路由配置│ ├── stores 状态管理│ ├── typings ts公共类型│ ├── utils 工具类函数封装│ └── views 页面视图
指定解析路径使用的 path module需要先安装@type/node
npm install @types/node --save-dev
打包功能
build: { outDir: "dist", // 指定打包路径，默认为项目根目录下的 dist 目录 terserOptions: { compress: { keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题 drop_console: true, // 生产环境去除 console drop_debugger: true // 生产环境去除 debugger }, }, chunkSizeWarningLimit: 1500 // chunk 大小警告的限制（以 kbs 为单位）}接入代码规范
ESlint 被称作下一代的 JS Linter 工具，能够将 JS 代码解析成 AST 抽象语法树，然后检测 AST 是否符合既定的规则。
yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具，并创建了一个新项目 typescript-eslint，提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等
使用 scss 来增强 css 的语法能力
yarn add sassyarn add stylelintyarn add stylelint-scss
接入naive ui库
Naive UI 是尤大推荐的 vue3 UI 库（https://www.naiveui.com/zh-CN/os-theme）
接入 vue-router
npm install vue-router --save
import { createRouter, createWebHashHistory, RouteRecordRaw,} from "vue-router"const routes: Array = [ { path: "/", name: "Home", component: () => import("views/home/index.vue")}]const router = createRouter({ history: createWebHashHistory(), // history 模式则使用 createWebHistory() routes,})export default router import { createApp } from "vue"import App from "./App.vue"import router from "./router/index"const app = createApp(App as any)app.use(router)接入状态管理工具 pinia
pinia 是一个轻量级的状态管理库
npm install pinia --save
引入
在 main.ts中引入
import { createPinia } from "pinia"app.use(createPinia())在src/stores下新建一个counters.ts文件
import { defineStore } from "pinia"export const useCounterStore = defineStore("counter", { state: () => { return { count: 0 } }, getters: { count() { return this.count } }, actions: { increment() { this.count++ } }})import { defineStore } from "pinia"export const useCounterStore = defineStore("counter", () => { const count = ref(0) function increment() { count.value++ } return { count, increment }})<script setup> import { useCounterStore } from "@/stores/counter" const counter = useCounterStore()</script> {{ counter.count }} const counter = useCounterStore()const { count } = counter{{ count }}pinia很贴心的提供了storeToRefs方法，让我们可以享受解构的乐趣：
const { count } = storeToRefs(counter)接入图表库 echarts5
安装&引入
npm install echarts --save
在src/utils/下新建echarts.ts用来引入我们需要使用的组件
import * as echarts from "echarts/core"import { BarChart, // 系列类型的定义后缀都为 SeriesOption BarSeriesOption, // LineChart, LineSeriesOption} from "echarts/charts"import { TitleComponent, // 组件类型的定义后缀都为 ComponentOption TitleComponentOption, TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, // 数据集组件 DatasetComponent, DatasetComponentOption, // 内置数据转换器组件 (filter, sort) TransformComponent, LegendComponent} from "echarts/components"import { LabelLayout, UniversalTransition } from "echarts/features"import { CanvasRenderer } from "echarts/renderers"// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型export type ECOption = echarts.ComposeOption< | BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption>// 注册必须的组件echarts.use([ TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, BarChart, LabelLayout, UniversalTransition, CanvasRenderer, LegendComponent])// eslint-disable-next-line no-unused-varsconst option: ECOption = { // ...}export const $echarts = echarts就可以在页面中使用了：
<script setup> import { onMounted } from "vue" import { $echarts, ECOption } from "@/utils/echarts" onMounted(() => { // 测试echarts的引入 const ele = document.getElementById("echarts") as HTMLCanvasElement const myChart = $echarts.init(ele) const option: ECOption = { title: { text: "ECharts 入门示例" }, tooltip: {}, legend: { data: ["销量"] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] } </script>配置统一 axios 处理
安装&引入
npm install axios --save
截图：
（学习视频分享：web前端开发、编程入门）
以上就是vue3+vite2+ts4搭建项目环境规范的详细内容，更多请关注php中文网其它相关文章！
