This article will share with you a set of standardized vue3 vite2 ts4 front-end engineering project environment. I hope it will be helpful to everyone!
A set of standardized vue3 vite2 ts4 front-end engineering project environment https://webvueblog.github.io/vue3-vite2-ts4/
( Learning video sharing: vuejs tutorial)
vue3-vite2-ts4
npm init @vitejs/app vue vue-ts npm install npm run dev
The directory structure is as follows
├── 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配置
The role of each directory will be mentioned later
├── src │ ├── router 路由配置 │ ├── stores 状态管理 │ ├── typings ts公共类型 │ ├── utils 工具类函数封装 │ └── views 页面视图
The path module used to specify the parsing path needs to be installed first@type/node
npm install @types/node --save-dev
Packaging function
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 为单位) }
Access code specification
ESlint is called the next generation of JS Linter Tool that can parse JS code into AST abstract syntax tree, and then detect whether the AST conforms to the established rules.
yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
TypeScirpt officially decided to fully adopt ESLint as a code inspection tool and created a new project typescript-eslint, which provides a TypeScript file parser @typescript-eslint/parser and related configuration options @typescript- eslint/eslint-plugin, etc.
Use scss to enhance the grammatical capabilities of css
yarn add sass yarn add stylelint yarn add stylelint-scss
Connect to the naive ui library
Naive UI is the vue3 UI library recommended by Youda (https://www.naiveui.com/zh-CN/os-theme)
Access to 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)
Access status management tool pinia
pinia is a lightweight Level state management library
npm install pinia --save
Introduction
Introduce in main.ts
import { createPinia } from 'pinia' app.use(createPinia())
Create a new counters.ts file under src/stores
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 thoughtfully provides the storeToRefs method so that we can enjoy the fun of deconstruction:
const { count } = storeToRefs(counter)
Connect to the chart library echarts5
Installation & Introduction
npm install echarts --save
Create a new echarts.ts under src/utils/ to introduce the components we need to use
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
Then you can use it in the page:
<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>
Configure unified axios processing
Installation & introduction
npm install axios --save
Screenshot:
(Learning video sharing : Web front-end development, Introduction to programming)
The above is the detailed content of vue3+vite2+ts4 build project environment specifications. For more information, please follow other related articles on the PHP Chinese website!