这篇文章主要讲解了“vue3+vite2+ts4搭建项目环境规范的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3+vite2+ts4搭建项目环境规范的方法”吧!
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 页面视图
指定解析路径使用的 path module需要先安装@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 Linter 工具,能够将 JS 代码解析成 AST 抽象语法树,然后检测 AST 是否符合既定的规则。
yarn add eslint @typescript-eslint/parser @typescript/eslint-plugin eslint-plugin-vue
TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具,并创建了一个新项目 typescript-eslint,提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等
使用 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: '/', 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)
接入状态管理工具 pinia
pinia 是一个轻量级的状态管理库
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)
接入图表库 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 '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
截图:
感谢各位的阅读,以上就是“vue3+vite2+ts4搭建项目环境规范的方法”的内容了,经过本文的学习后,相信大家对vue3+vite2+ts4搭建项目环境规范的方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。