Shulou(Shulou.com)05/31 Report--

This article mainly explains "the method of building project environment specification in vue3+vite2+ts4". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the method of building project environment specification in vue3+vite2+ts4".

Vue 3 + Typescript + Vite

Vue3-vite2-ts4

Npm init @ vitejs/appvuevue-tsnpm installnpm run dev

The directory structure is as follows

├── public static resources ├── src │ ├── assets resource directory (picture, less, Css, etc.) │ ├── components project component │ ├── App.vue main application │ ├── env.d.ts global declaration │ └── main.ts main entry ├── .gitignore git ignores configuration ├── index.html template file ├── package.json dependency package / run script configuration Set file ├── README.md ├── tsconfig.json ts configuration file ├── tsconfig.node.json ts configuration file └── vite.config.ts vite configuration

The role of each catalog will be mentioned later.

├── src │ ├── router routing configuration │ ├── stores State Management │ ├── typings ts Common types │ ├── utils tool class functions encapsulate │ └── views page view

The path module used to specify the resolution path requires @ type/node to be installed first.

Npm install @ types/node-- save-dev

Packaging function

Build: {outDir: 'dist', / / specifies the packaging path. By default, it defaults to the dist directory under the project root directory terserOptions: {compress: {keep_infinity: true, / / to prevent Infinity from being compressed to 1DB 0 This may cause performance problems on Chrome drop_console: true, / / production environment removal console drop_debugger: true / / production environment removal debugger},}, chunkSizeWarningLimit: 1500 / / limits on chunk size warnings (in kbs)}

Access code specification

ESlint is called the next-generation JS Linter tool that parses JS code into an AST abstract syntax tree and then checks whether AST conforms to established rules.

Yarn add eslint @ typescript-eslint/parser @ typescript/eslint-plugin eslint-plugin-vue

TypeScirpt officially decided to fully adopt ESLint as a code review tool, and created a new project typescript-eslint, which provides the parser @ typescript-eslint/parser of the TypeScript file and the related configuration option @ typescript-eslint/eslint-plugin, etc.

Using scss to enhance the syntax ability of css

Yarn add sassyarn add stylelintyarn add stylelint-scss

Access to naive ui library

Naive UI is the recommended vue3 UI library (https://www.naiveui.com/zh-CN/os-theme).

Access to vue-router

Npm install vue-router-- saveimport {createRouter, createWebHashHistory, RouteRecordRaw,} from 'vue-router'const routes: Array = [{path:' /', name: 'Home', component: () = > import (' views/home/index.vue')}] const router = createRouter ({history: createWebHashHistory (), / / history mode uses 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)

Access status Management tool pinia

Pinia is a lightweight state management library

Npm install pinia-save

Introduce

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}}) import {useCounterStore} from'@ / stores/counter' const counter = useCounterStore () {{counter.count}} const counter = useCounterStore () const {count} = counter {{count}}

Pinia is very sweet to provide storeToRefs methods, so that we can enjoy the fun of deconstruction:

Const {count} = storeToRefs (counter)

Access 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, / / Series types are defined with suffixes SeriesOption BarSeriesOption, / / LineChart, LineSeriesOption} from' echarts/charts'import {TitleComponent, / / component types are defined with ComponentOption TitleComponentOption, TooltipComponent, TooltipComponentOption, GridComponent, GridComponentOption, / / dataset components DatasetComponent, DatasetComponentOption, / / built-in data converter components (filter Sort) TransformComponent, LegendComponent} from 'echarts/components'import {LabelLayout, UniversalTransition} from' echarts/features'import {CanvasRenderer} from 'echarts/renderers'// combines an Option type export type ECOption = echarts.ComposeOption with only necessary components and charts through ComposeOption

/ / Registration required components 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

You can use it on the page:

Import {onMounted} from 'vue' import {$echarts, ECOption} from' @ / utils/echarts' onMounted (() = > {/ / Test the introduction of echarts const ele = document.getElementById ('echarts') as HTMLCanvasElement const myChart = $echarts.init (ele) const option: ECOption = {title: {text:' ECharts getting started'}, tooltip: {} Legend: {data: ['sales']}, xAxis: {data: ['shirt', 'woolen sweater', 'chiffon shirt', 'trousers', 'high heels', 'socks']}, yAxis: {} Series: [{name: 'sales', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]}

Configure Unified axios processing

Installation & introduction

Npm install axios-save

Screenshot:

Thank you for your reading, the above is the content of "the method of building project environment specification for vue3+vite2+ts4". After the study of this article, I believe you have a deeper understanding of the method of building project environment specification of vue3+vite2+ts4, and the specific use needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.