Heim > Artikel > Web-Frontend > vue3+vite2+ts4 Build-Projektumgebungsspezifikationen
Dieser Artikel stellt Ihnen eine Reihe standardisierter vue3+vite2+ts4-Front-End-Engineering-Projektumgebungen vor. Ich hoffe, dass er für alle hilfreich sein wird!
Eine standardisierte vue3+vite2+ts4-Front-End-Engineering-Projektumgebung https://webvueblog.github.io/vue3-vite2-ts4/
(Lernvideo-Sharing: vuejs-Tutorial)
vue3-vite2-ts4
npm init @vitejs/app vue vue-ts npm install npm run dev
Die Verzeichnisstruktur ist wie folgt
├── 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配置
Die Rolle jedes Verzeichnisses wird später erwähnt
├── src │ ├── router 路由配置 │ ├── stores 状态管理 │ ├── typings ts公共类型 │ ├── utils 工具类函数封装 │ └── views 页面视图
Das Pfadmodul wird zur Angabe des Analysepfadbedarfs verwendet muss zuerst installiert werden@type/node
npm install @types/node --save-dev
Packaging-Funktion
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 为单位) }
Zugriff auf Codespezifikationen
ESlint wird als JS-Linter-Tool der nächsten Generation bezeichnet, das JS-Code in einen abstrakten AST-Syntaxbaum analysieren und dann erkennen kann, ob das AST hält sich an die festgelegten Regeln.
yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
TypeScirpt hat offiziell beschlossen, ESLint vollständig als Code-Inspektionstool zu übernehmen und ein neues Projekt typescript-eslint erstellt, das einen TypeScript-Dateiparser @typescript-eslint/parser und zugehörige Konfigurationsoptionen @typescript-eslint/eslint-plugin usw. bereitstellt .
Verwenden Sie scss, um die grammatikalischen Fähigkeiten von CSS zu verbessern.
yarn add sass yarn add stylelint yarn add stylelint-scss
Zugriff auf die Naive-UI-Bibliothek /zh-CN/os-theme)
Mit Vue-Router verbinden
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)
Mit dem Statusverwaltungstool pinia verbinden
pinia ist eine leichtgewichtige Statusverwaltungsbibliotheknpm install pinia --save
Einführung
Vorstellen
import { createPinia } from 'pinia' app.use(createPinia())in main.ts
Erstellen Sie eine neue counters.ts-Datei unter 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 '@/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 stellt die StoreToRefs-Methode sorgfältig zur Verfügung, damit wir den Spaß am Dekonstruieren genießen können:
const { count } = storeToRefs(counter)
Verbinden Sie sich mit der Diagrammbibliothek echarts5
Installation & Einführungnpm install echarts --save
Erstellen Sie eine neue echarts.ts unter src/utils/, um die Komponenten vorzustellen, die wir verwenden müssen
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
Dann können Sie sie auf der Seite verwenden:
<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>
Konfigurieren Sie die einheitliche Axios-Verarbeitung
Installation & Einführung von npm install axios --save
Screenshot:
Web-Frontend-Entwicklung,
Einführung in die ProgrammierungDas obige ist der detaillierte Inhalt vonvue3+vite2+ts4 Build-Projektumgebungsspezifikationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!