vue3+vite2+ts4搭建项目环境规范
时间:2022-04-27 [网络编程]作者:fabuyuan 浏览:6 次
一套规范的vue3+vite2+ts4前端工程化项目环境 https://webvueblog.github.io/vue3-vite2-ts4/
(学习视频分享:vuejs教程)
Vue 3 + Typescript + Vite
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
截图:
(学习视频分享:web前端开发、编程入门)
以上就是vue3+vite2+ts4搭建项目环境规范的详细内容,更多请关注站长家园其它相关文章!
本文标签: Vue
转载请注明来源:vue3+vite2+ts4搭建项目环境规范
本文永久链接地址:https://www.adminjie.com/post/11711.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- 电脑显示信号线无连接是什么意思
- html5中onclick是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- app是什么应用程序的简称
- angular与bootstrap的区别是什么
- 一个邮箱可以有几个微信小程序

- 最新文章
-
-
jquery对象访问的方法有哪些
jquery对象访问的方法有:1、each(),可以遍历指定的jquery对象,语法“$.each(对象,回调函数)”;2、size(),可统计jquery对象...
-
jquery怎么根据id判断元素是否存在
判断方法:1、通过id属性值获取指定元素,语法“$("#id值")”,会返回一个包含指定元素的jQuery对象;2、使用“元素对象.length>0”语句...
-
jquery怎么删除所有li元素
删除方法:1、利用find()选取文档的所有li元素,语法“$("body").find("li")”,返回一个包含所有li元素的jQuery对象;2、利用re...
-
oracle怎么查询表的同义词
在oracle中,可以利用select语句配合“dba_synonyms”查询表的所有同义词,语法为“select*fromdba_synonyms”;同...
-
jquery如何改变img的属性值
两种改变方法:1、用attr()修改属性值,语法“$("img").attr({属性1:"值",属性2:"值"...});”。2、用prop()修改属性值,语法...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-