Rumah > hujung hadapan web > View.js > teks badan

vue3 vite2 ts4 spesifikasi persekitaran projek pembinaan

青灯夜游
Lepaskan: 2022-04-25 10:40:01
ke hadapan
2786 orang telah melayarinya

Artikel ini akan berkongsi dengan anda satu set persekitaran projek kejuruteraan bahagian hadapan vue3 vite2 ts4 yang standard. Saya harap ia akan membantu semua orang!

vue3 vite2 ts4 spesifikasi persekitaran projek pembinaan

Satu set persekitaran projek kejuruteraan bahagian hadapan vue3 vite2 ts4 terpiawai https://webvueblog.github.io/vue3-vite2-ts4/

( Mempelajari perkongsian video: tutorial vuejs)

Vue 3 Typescript Vite

vue3-vite2-ts4

npm init @vitejs/app
vue
vue-ts
npm install
npm run dev
Salin selepas log masuk

vue3 vite2 ts4 spesifikasi persekitaran projek pembinaan

Struktur direktori adalah seperti berikut

├── 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配置
Salin selepas log masuk

Fungsi setiap direktori akan disebut kemudian

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

Modul laluan yang digunakan untuk menentukan penghuraian laluan perlu dipasang dahulu@type/node

npm install @types/node --save-dev
Salin selepas log masuk

Fungsi pembungkusan

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 为单位)
}
Salin selepas log masuk

Spesifikasi kod akses

ESlint dipanggil generasi seterusnya Alat JS Linter boleh menghuraikan kod JS ke dalam pepohon sintaks abstrak AST, dan kemudian mengesan sama ada AST mematuhi peraturan yang ditetapkan.

yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
Salin selepas log masuk

TypeScirpt secara rasmi memutuskan untuk menggunakan ESLint sepenuhnya sebagai alat pemeriksaan kod, dan mencipta typescript-eslint projek baharu, yang menyediakan penghurai fail TypeScript @typescript-eslint/parser dan pilihan konfigurasi yang berkaitan@ typescript- eslint/eslint-plugin, dsb.

Gunakan scss untuk meningkatkan keupayaan tatabahasa css

yarn add sass
yarn add stylelint
yarn add stylelint-scss
Salin selepas log masuk

Sambung Masukkan pustaka ui naif

UI naif ialah perpustakaan UI vue3 yang sangat disyorkan (https://www.naiveui.com/zh-CN/os-theme)

Sambung ke vue-router

npm install vue-router --save
Salin selepas log masuk
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
Salin selepas log masuk
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)
Salin selepas log masuk

Sambung ke pinia alat pengurusan status

pinia ialah perpustakaan pengurusan negeri yang ringan

npm install pinia --save
Salin selepas log masuk

Diperkenalkan

Diperkenalkan dalam main.ts

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

app.use(createPinia())
Salin selepas log masuk

Dalam src Cipta baharu fail counters.ts di bawah /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++
        }
    }
})
Salin selepas log masuk
import { defineStore } from &#39;pinia&#39;

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

    return { count, increment }
})
Salin selepas log masuk
<script setup>
    import { useCounterStore } from &#39;@/stores/counter&#39;

    const counter = useCounterStore()
</script>
<template>
    <div @click="counter.increment()">
        {{ counter.count }}
    </div>
</template>
Salin selepas log masuk
const counter = useCounterStore()
const { count } = counter

<div @click="counter.increment()">{{ count }}</div>
Salin selepas log masuk

pinia dengan teliti menyediakan kaedah storeToRefs supaya kita boleh menikmati keseronokan penyahbinaan:

const { count } = storeToRefs(counter)
Salin selepas log masuk

Sambung ke pustaka carta echarts5

Pemasangan & Import

npm install echarts --save
Salin selepas log masuk

Buat echarts.ts baharu di bawah src/utils/ untuk kegunaan Memperkenalkan komponen yang perlu kita gunakan

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
Salin selepas log masuk

boleh digunakan dalam halaman:

<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>
Salin selepas log masuk

Konfigurasikan pemprosesan aksios bersatu

Pemasangan & Pengenalan

npm install axios --save
Salin selepas log masuk

Petikan skrin:

vue3 vite2 ts4 spesifikasi persekitaran projek pembinaan

(Belajar perkongsian video: Pembangunan bahagian hadapan web, Pengenalan kepada Pengaturcaraan)

Atas ialah kandungan terperinci vue3 vite2 ts4 spesifikasi persekitaran projek pembinaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan