vue3+vite2+ts4 빌드 프로젝트 환경 사양

이 글은 표준화된 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            页面视图

파싱 경로를 지정하는 데 사용되는 경로 모듈이 필요합니다. 먼저 설치하세요@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 코드를 AST 추상 구문 트리로 구문 분석할 수 있는 차세대 JS Linter 도구라고 합니다. AST는 확립된 규칙을 준수합니다.

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

TypeScirpt는 공식적으로 ESLint를 코드 검사 도구로 완전히 채택하기로 결정하고 TypeScript 파일 파서 @typescript-eslint/parser 및 관련 구성 옵션 @typescript-eslint/eslint- 플러그인 등을 제공하는 새로운 프로젝트 typescript-eslint를 만들었습니다. .

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: &#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)

상태 관리 도구 pinia에 연결

pinia는 경량 상태 관리 라이브러리입니다

npm install pinia --save

소개되었습니다

In 소개하다

import { createPinia } from 'pinia'

app.use(createPinia())

in main.ts

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 &#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는 우리가 해체의 즐거움을 누릴 수 있도록 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 &#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>

통합 Axios 처리 구성

npm install axios --save

설치 및 소개 스크린샷:

(동영상 공유 학습: 웹 프론트엔드 개발, 프로그래밍 입문)

위 내용은 vue3+vite2+ts4 빌드 프로젝트 환경 사양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!