本篇文章给大家分享一套规范的vue3+vite2+ts4前端工程化项目环境，希望对大家有所帮助！
一套规范的vue3+vite2+ts4前端工程化项目环境 https://webvueblog.github.io/vue3-vite2-ts4/
（学习视频分享：vuejs教程）
Vue 3 + Typescript + Vite
vue3-vite2-ts4
立即学习“前端免费学习笔记（深入）”；
npm init @vitejs/app vue vue-ts npm install npm 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 sass yarn add stylelint yarn 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 routerimport { 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-vars
const 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
截图：
