本篇文章给大家分享一套规范的vue3+vite2+ts4前端工程化项目环境，希望对大家有所帮助！
一套规范的vue3+vite2+ts4前端工程化项目环境 https://webvueblog.github.io/vue3-vite2-ts4/
（学习视频分享：vuejs教程）
vue 3 + typescript + vitevue3-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<routerecordraw> = [ { 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><template> <div @click="counter.increment()"> {{ counter.count }} </div></template>
const counter = usecounterstore()const { count } = counter<div @click="counter.increment()">{{ count }}</div>
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搭建项目环境规范的详细内容。