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!
Satu set persekitaran projek kejuruteraan bahagian hadapan vue3 vite2 ts4 terpiawai https://webvueblog.github.io/vue3-vite2-ts4/
( Mempelajari perkongsian video: tutorial vuejs)
vue3-vite2-ts4
npm init @vitejs/app vue vue-ts npm install npm run dev
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配置
Fungsi setiap direktori akan disebut kemudian
├── src │ ├── router 路由配置 │ ├── stores 状态管理 │ ├── typings ts公共类型 │ ├── utils 工具类函数封装 │ └── views 页面视图
Modul laluan yang digunakan untuk menentukan penghuraian laluan perlu dipasang dahulu@type/node
npm install @types/node --save-dev
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 为单位) }
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
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
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
import { createRouter, createWebHashHistory, RouteRecordRaw, } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: () => import('views/home/index.vue')} ] 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)
Sambung ke pinia alat pengurusan status
pinia ialah perpustakaan pengurusan negeri yang ringan
npm install pinia --save
Diperkenalkan
Diperkenalkan dalam main.ts
import { createPinia } from 'pinia' app.use(createPinia())
Dalam src Cipta baharu fail counters.ts di bawah /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 '@/stores/counter' 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 dengan teliti menyediakan kaedah storeToRefs supaya kita boleh menikmati keseronokan penyahbinaan:
const { count } = storeToRefs(counter)
Sambung ke pustaka carta echarts5
Pemasangan & Import
npm install echarts --save
Buat echarts.ts baharu di bawah src/utils/ untuk kegunaan Memperkenalkan komponen yang perlu kita gunakan
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
boleh digunakan dalam halaman:
<script setup> import { onMounted } from 'vue' import { $echarts, ECOption } from '@/utils/echarts' onMounted(() => { // 测试echarts的引入 const ele = document.getElementById('echarts') as HTMLCanvasElement const myChart = $echarts.init(ele) const option: ECOption = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] } </script>
Konfigurasikan pemprosesan aksios bersatu
Pemasangan & Pengenalan
npm install axios --save
Petikan skrin:
(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!