Home > Web Front-end > Vue.js > body text

vue3+vite2+ts4 build project environment specifications

青灯夜游
Release: 2022-04-25 10:40:01
forward
2771 people have browsed it

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!

vue3+vite2+ts4 build project environment specifications

A set of standardized vue3 vite2 ts4 front-end engineering project environment https://webvueblog.github.io/vue3-vite2-ts4/

( Learning video sharing: vuejs tutorial)

Vue 3 Typescript Vite

vue3-vite2-ts4

npm init @vitejs/app
vue
vue-ts
npm install
npm run dev
Copy after login

vue3+vite2+ts4 build project environment specifications

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配置
Copy after login

The role of each directory will be mentioned later

├── src
│   ├── router           路由配置
│   ├── stores           状态管理
│   ├── typings          ts公共类型
│   ├── utils            工具类函数封装
│   └── views            页面视图
Copy after login

The path module used to specify the parsing path needs to be installed first@type/node

npm install @types/node --save-dev
Copy after login

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 为单位)
}
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login
import {
    createRouter, createWebHashHistory, RouteRecordRaw,
} from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    { path: &#39;/&#39;, name: &#39;Home&#39;, component: () => import(&#39;views/home/index.vue&#39;)}
]

const router = createRouter({
    history: createWebHashHistory(),    // history 模式则使用 createWebHistory()
    routes,
})

export default router
Copy after login
import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router/index&#39;

const app = createApp(App as any)
app.use(router)
Copy after login

Access status management tool pinia

pinia is a lightweight Level state management library

npm install pinia --save
Copy after login

Introduction

Introduce in main.ts

import { createPinia } from &#39;pinia&#39;

app.use(createPinia())
Copy after login

Create a new counters.ts file under src/stores

import { defineStore } from &#39;pinia&#39;

export const useCounterStore = defineStore(&#39;counter&#39;, {
    state: () => {
        return {
            count: 0
        }
    },
    getters: {
        count() {
            return this.count
        }
    },
    actions: {
        increment() {
            this.count++
        }
    }
})
Copy after login
import { defineStore } from &#39;pinia&#39;

export const useCounterStore = defineStore(&#39;counter&#39;, () => {
    const count = ref(0)
    function increment() {
      count.value++
    }

    return { count, increment }
})
Copy after login
<script setup>
    import { useCounterStore } from &#39;@/stores/counter&#39;

    const counter = useCounterStore()
</script>
<template>
    <div @click="counter.increment()">
        {{ counter.count }}
    </div>
</template>
Copy after login
const counter = useCounterStore()
const { count } = counter

<div @click="counter.increment()">{{ count }}</div>
Copy after login

pinia thoughtfully provides the storeToRefs method so that we can enjoy the fun of deconstruction:

const { count } = storeToRefs(counter)
Copy after login

Connect to the chart library echarts5

Installation & Introduction

npm install echarts --save
Copy after login

Create a new echarts.ts under src/utils/ to introduce the components we need to use

import * as echarts from &#39;echarts/core&#39;
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    // LineChart,
    LineSeriesOption
} from &#39;echarts/charts&#39;
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent,
    LegendComponent
} from &#39;echarts/components&#39;
import { LabelLayout, UniversalTransition } from &#39;echarts/features&#39;
import { CanvasRenderer } from &#39;echarts/renderers&#39;

// 通过 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
Copy after login

Then you can use it in the page:

<script setup>
    import { onMounted } from &#39;vue&#39;
    import { $echarts, ECOption } from &#39;@/utils/echarts&#39;

    onMounted(() => {
        // 测试echarts的引入
        const ele = document.getElementById(&#39;echarts&#39;) as HTMLCanvasElement
        const myChart = $echarts.init(ele)
        const option: ECOption = {
            title: {
                text: &#39;ECharts 入门示例&#39;
            },
            tooltip: {},
            legend: {
                data: [&#39;销量&#39;]
            },
            xAxis: {
                data: [&#39;衬衫&#39;, &#39;羊毛衫&#39;, &#39;雪纺衫&#39;, &#39;裤子&#39;, &#39;高跟鞋&#39;, &#39;袜子&#39;]
            },
            yAxis: {},
            series: [
                {
                    name: &#39;销量&#39;,
                    type: &#39;bar&#39;,
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        }     
</script>
Copy after login

Configure unified axios processing

Installation & introduction

npm install axios --save
Copy after login

Screenshot:

vue3+vite2+ts4 build project environment specifications

(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!

Related labels:
vue
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template