vue3+vite2+ts4 spécifications de l'environnement du projet de construction

Cet article partagera avec vous un ensemble d'environnements de projet d'ingénierie front-end standardisés vue3+vite2+ts4. J'espère qu'il sera utile à tout le monde !

Un environnement de projet d'ingénierie frontal vue3+vite2+ts4 standardisé https://webvueblog.github.io/vue3-vite2-ts4/

(Partage de vidéos d'apprentissage : tutoriel vuejs)

Vue 3 + Typescript + Vite

vue3-vite2-ts4

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

La structure des répertoires est la suivante

├── 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配置

Le rôle de chaque répertoire sera mentionné plus tard

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

Le module de chemin utilisé pour spécifier les besoins du chemin d'analyse à installer en premier@type/node

npm install @types/node --save-dev

Fonction d'emballage

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 为单位）
}

Accès aux spécifications du code

ESlint est appelé l'outil JS Linter de nouvelle génération, qui peut analyser le code JS dans un arbre de syntaxe abstraite AST, puis détecter si le AST respecte les règles établies.

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

TypeScirpt a officiellement décidé d'adopter pleinement ESLint comme outil d'inspection de code et a créé un nouveau projet typescript-eslint, qui fournit un analyseur de fichiers TypeScript @typescript-eslint/parser et les options de configuration associées @typescript-eslint/eslint-plugin, etc. .

Utilisez scss pour améliorer les capacités grammaticales de CSS

yarn add sass
yarn add stylelint
yarn add stylelint-scss

Accès à la bibliothèque Naive UI

Naive UI est une bibliothèque d'interface utilisateur vue3 hautement recommandée (https://www.naiveui.com /zh-CN/os-theme)

Connectez-vous à vue-router

npm install vue-router --save

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

Connectez-vous à l'outil de gestion de statut pinia

pinia est une bibliothèque légère de gestion de statut

npm install pinia --save

Introduction

Présenter

import { createPinia } from 'pinia'

app.use(createPinia())

dans main.ts

Créez un nouveau fichier counters.ts sous 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 &#39;@/stores/counter&#39;

    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 fournit judicieusement la méthode storeToRefs afin que nous puissions profiter du plaisir de la déconstruction :

const { count } = storeToRefs(counter)

Connectez-vous à la bibliothèque de graphiques echarts5

Installation et introduction

npm install echarts --save

Créez un nouveau echarts.ts sous src/utils/ pour présenter les composants que nous devons utiliser

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

Ensuite, vous pouvez l'utiliser sur la 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>

Configurer le traitement axios unifié

Installation et introduction de

npm install axios --save

Capture d'écran :

(Partage de vidéos d'apprentissage : développement web front-end, Introduction à la programmation)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!