ホームページ > 記事 > ウェブフロントエンド > vue3+vite2+ts4 ビルドプロジェクト環境仕様
この記事では、標準化された vue3 vite2 ts4 フロントエンド エンジニアリング プロジェクト環境のセットを紹介します。皆様のお役に立てれば幸いです。
標準化された vue3 vite2 ts4 フロントエンド エンジニアリング プロジェクト環境のセット https://webvueblog.github.io/vue3-vite2-ts4/
( 学習ビデオ共有: vuejs チュートリアル )
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 抽象構文ツリーに解析し、AST が確立されたルールに準拠しているかどうかを検出できる次世代の JS リンター ツール。
yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
TypeScirpt は、ESLint をコード検査ツールとして完全に採用することを正式に決定し、新しいプロジェクト typescript-eslint を作成しました。このプロジェクトは、TypeScript ファイル パーサー @typescript-eslint/parser と関連する構成オプション @typescript-eslint/eslint を提供します。 -プラグインなど
#scss を使用して css の文法機能を強化します
yarn add sass yarn add stylelint yarn add stylelint-scss
単純な UI に接続しますライブラリ
Naive UI は、Youda が推奨する 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: '/', 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)
アクセス状況管理ツール piniapinia は軽量レベルです状態管理ライブラリ
npm install pinia --save
はじめに
main.tsに導入
import { createPinia } from 'pinia' app.use(createPinia())
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 '@/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は思慮深く提供しています分解の楽しさを楽しむことができるように、storeToRefs メソッドを使用します。
const { count } = storeToRefs(counter)
チャート ライブラリ echarts に接続します5インストールと紹介
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 '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>
統合 Axios 処理の構成インストールと導入
npm install axios --save
スクリーンショット:
(学習ビデオ共有:
Web フロントエンド開発以上がvue3+vite2+ts4 ビルドプロジェクト環境仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。