《Vite+Vue3+TypeScript基础知识案例.docx》由会员分享，可在线阅读，更多相关《Vite+Vue3+TypeScript基础知识案例.docx（51页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Vite+Vue3+TypeScript2021年最新最完整Vite+Vue3+TypeScript基础知识案例1、学习背景随着前端web应的需求不断发展和变化，vue态圈也紧跟开发者步伐，不断演化。尽管vue2.0已经很完善了，很多掌握的vue2.0， 感觉实在学不动了，意料之外的是尤先继续更新vue到3.0版本，以补充vue2.0的不之处。随着vue3.0问世，vite2.5.1也油然，vue始终没有放弃对项响应速度和编译速度的追求，vite的到来，对于前端开发者，简直不要太幸福了。vue3.0不仅全持TypeScript语法，还对命周期钩进了优化和剔除，加上具setup的语法糖，vue单
2、页多个根元素的扩展，代码精简不说，还很有条理，vue3.0的出现再次提升了开发者的编码体验和幸福感。另外vue3整合typescript语是前端未来发展的必然趋势，为vue家族的新成员vite也是前端技术爱好者的学习标，赢在起点，从学习新技术开始。活到，学到，是个合格前端开发者的毕信仰。2、vite简介vite诞是为了提升web项运性能，以更快的速度将应页展给户。Vite 以 式提供源码。这实际上是让浏览器接管了打包程序的部分作：Vite 只需要在浏览器请求源码时进转换并按需提供源码。根据情景动态导代码，即只在当前屏幕上实际使时才会被处理。提供的驱动：2.1 、优化缓慢的服务器启动（冷启动开发
3、服务器和正式环境响应速度）；2.2 、优化缓慢的项更新（vite服务器）；外链图转存失败,源站可能有防盗链机制,建议将图保存下来直接上传(img-znQlBkN0-1642383363135) (E:vue_projectjavascript-demo前端知识点vite+vue3最新技术栈vue3.1.png)外链图转存失败,源站可能有防盗链机制,建议将图保存下来直接上传(img-Nro6Ko6e-1642383363136) (E:vue_projectjavascript-demo前端知识点vite+vue3最新技术栈vue3.2.png)3、vite创建项兼容性注意:Vite 需要 版本
4、 = 12.0.0。必须安装Volar插件，vscode编辑器/ 安装vite1、npm init vitelatest/ 安装vite同时创建vite项2、npm init vitelatest my-vue-app -template vuescripts: dev: vite, / 启动开发服务器build: vite build, / 为产环境构建产物serve: vite preview / 本地预览产构建产物4、版本依赖兼容和项录介绍package.json版本依赖说明, 这是整个项依赖版本配置，相关安装指令后视频中会逐个教家如何安装。注意：vuex和router都是4.0及以上版
5、本的，否则vue3时，找不到暴露的apiname: vite-ts-vue3-plus-demo,version: 0.0.0, scripts: dev: vite,build: vue-tsc -noEmit & vite build, serve: vite preview,dependencies: element-plus/icons: 0.0.11, dotenv: 10.0.0,element-plus: 1.1.0-beta.7,vue: 3.0.5,vue-router: 4.0.11,vuex: 4.0.2,devDependencies: types/node: 16.7
6、.1, vitejs/plugin-vue: 1.3.0, vue/compiler-sfc: 3.0.5,node-sass: 6.0.1,sass: 1.38.1,sass-loader: 12.1.0,typescript: 4.3.2,vite: 2.4.4,vue-tsc: 0.2.25、setup语法糖使5.1 setup前组合式API（基础法） 注意：在setup()中不能this在 setup 中你应该避免使 this，因为它不会找到组件实例。setup 的调发在 data property、computed property 或 methods 被解析之前，所以它们法在 se
7、tup 中被获取，这也是为了避免setup()和其他选项式API混淆。/* 参数说明* props 是响应式的，当传新的 prop 时，它将被更新* context 是个普通的上下JavaScript对象，它暴露组件的三个 property（包括属性，插槽，法）,* 如下例1所*/ 例1export default setup(props, context) / Attribute (响应式对象)console.log(context.attrs)/ 插槽 (响应式对象) console.log(context.slots)/ 触发事件 (法) console.log(context.emit
8、)5.2 setup后世（级法），推荐法注意：defineProps不需要引，vue单件内部动暴露的API是在单件组件（SFC）中使组合式API的编译时的语法糖。相普通的语法，它具有更多优势：- 更少的样板内容，更简洁的代码，如：省略了组件的注册声明，对象暴露return，methods,。- 能够使纯 Typescript 声明 props 和发出事件。- 更好的运时性能 (其模板会被编译成与其同作域的渲染函数，没有任何的中间代理)。- 更好的 IDE 类型推断性能 (减少语服务器从代码中抽离类型的作)。注意点：1、在setup语法糖中导组件不需要注册声明，直接在视图中使即可；2、vue件结
9、构发改变，js默认放到页顶部，视图template放到js下，style放到页底部； 3、导vue件必须写上件后缀名.vue, 否则ts法识别vue件。例对：/ 基础法 export default props: title: type: String, default:()=return 测试信息,setup(props:any) console.log(props.title)/ 级法const props = defineProps( title: type: String, default:()=return 测试信息)console.log(props.title);6、define
10、Props 和 defineEmits注意：definePropsdefineEmits和都是只在中才能使的编译器宏为了声明 props 和 emits 选项且具备完整的类型推断，可以使 defineProps 和 defineEmits API，它们在 中都是动可的：- *defineProps 和 defineEmits 都是只在 中才能使的*编译器宏*。他们不需要导，且会在处理 的时候被编译处理掉。- defineProps 接收与 props 选项相同的值，defineEmits 也接收 emits 选项相同的值。- defineProps 和 defineEmits 在选项传后，会提
11、供恰当的类型推断。- 传到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此，传的选项不能引在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它*可以*引导的绑定，因为它们也在模块范围内。6.1 、组件vueprops.msg点击我调组件法const props = defineProps( msg:type: String,default: () = 默认值)const emit = defineEmits(on-change, update) const handleClick = () =emit(on-change,
12、组件法被调了)6.2 、组件vueimport TestPropsPmit from ./components/test-props-emit/index.vue; import ref from vue;/ 定义字符串变量const msg = ref(欢迎使vite！)/ 调事件const handleChange = (params:string) = console.log(params);温馨提：这介绍哈volar插件图标在vue件的作： 点击这个三形图标，会将件归类显，便编写代码；外链图转存失败,源站可能有防盗链机制,建议将图保存下来直接上传(img-EbrgSaUR-164238
13、3363137) (E:vue_projectdemosvite-vue3-ts-volarvite+vue3最新技术栈档volar.png)7、正确使defineExpose使声明的绑定。为了在的组件是默认关闭的，也即通过模板 ref 或者defineExpose组件中明确要暴露出去的属性，使链获取到的组件的公开实例，不会暴露任何在中$parent编译器宏：7.1 、组件暴露属性和法，给组件引 function testChild():voidconsole.log(组件法testChild被调了);const b = ref(2)/ 统暴露属性defineExpose(obj:name:
14、张三, age: 2300, b,testChild)7.2 、组件调组件法和属性import TestPropsEmit from ./components/test-props-emit/index.vue; import ref, onMounted from vue;const msg = ref(欢迎学习vite)const handleChange = (params:string)= console.log(params);const propsEmitRef = ref() onMounted()=console.log(propsEmitRef.value.child);)7
15、.3 在setup如何定义变量(字符串,对象,数组)count user.nameitem点击我增加import ref, reactive from vue;/ 字符串变量const count = ref(0)/ 对象let user = reactive( name: 张三)/ 数组let arr = reactive(1, 2, 3)/ 综合定义案const originData = reactive( count: 0,user:name: 张三,arr: 1, 2, 3)/ 法const setName = ()= count.value+user.name = 李四8、Watch
16、和WatchEffect1、基本使法：originData.count originData.user.nameitem点击我count增加import ref, reactive, watchEffect, watch from vue;const count = ref(0)const user = reactive(name: 张三) const arr = reactive(1,2,3,4)/ 综合定义案const originData = reactive( count: 0,user:name: 张三, arr:1,2,3,4)const incriment = ()= origi
17、nData.count+ count.value+ originData.user.name = 李四/ 默认页更新之前即执监听，懒执开始watchEffect() = console.log(count.value)/ 默认监听数据变化后的值，页更新后不会即执watch(count, (n, o) = console.log(watch, n, o);)/ 监听多个值watch(count, originData.user, (newValues, prevValues) = console.log(newValues0, newValues1.name)/ 即监听watch(count,
18、originData.user, (newValues, prevValues) = console.log(newValues0, newValues1.name), deep: true, immediate: true)2、watch与 watchEffect 较，推荐watch监听watch: 页更新后不会即执，watchEffect 它会执；如果要实现：watch在页更新之后就执，需要增加即执的属性；watch(count,originData.user, (n, o)= console.log(n0,n1.name), deep: true, immediate: true)1、w
19、atch和watchEffect都懒执副作，不过watchEffect较频繁，在vue组件更新之前执； 2、watch更具体地说明什么状态应该触发侦听器重新运，watchEffect就没有这么友好；3、watch访问侦听状态变化前后的值。9、在setup中的命周期钩setupcreated因为是围绕 beforeCreate 和命周期钩运的，所以不需要显式地定义它们。换句话说，在这些钩中编写的任何代码都应该直接在 setup 函数中编写。下表包含如何在 内部调命周期钩：选项式 APIHook inside setupbeforeCreateNot needed* 不需要createdNot n
20、eeded* 不需要beforeMountonBeforeMount 挂载之前mountedonMounted 页加载完成时执beforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted 页销毁时执errorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggeredactivatedonActivateddeactivatedonDeactivatedimport on
21、Mounted, onActivated, onUnmounted, onUpdated, onDeactivated from vue;/ 读取环境变量const mode = import.meta.env;/ import HeadMenu from /components/head-menu/index.vue;onMounted() = console.log(组件挂载)onUnmounted() = console.log(组件卸载)onUpdated() = console.log(组件更新)onActivated() = console.log(keepAlive 组件 激活)
22、onDeactivated() = console.log(keepAlive 组件 激活)10、Ts限制define(Emits|Props)参数类型注意：1、在setup语法糖中引组件不需要注册声明就可以直接了2、ts 限制组件传参类型，默认是必须传值的，否则控制台出现警告， 引组件的地会出现红提醒，不想必传在绑定参数后加?即可3、ts传参持多种类型校验，个参数可以传字符串，数组，Boolean等4、ts式限制defineEmits和defineProps参数类型1、组件msgtitle import ref from vue; defineProps()/ 提供默认值式 1 interf
23、ace Propsmsg?: (string | number | boolean), title?: stringwithDefaults(defineProps(), msg: hello,title: () = one, two)/ 提供默认式 2 withDefaults(defineProps(), msg: 3,title: 默认标题)/ const emit = defineEmits(updateValue) const emit = defineEmits()const inputValue = ref()const handleUpdate = (event: any) =
24、 const target = event/ console.log(target.value, 1111); emit(update, event.target.value)2、组件import CellSample from ./components/cell-samples/index.vue;const update = (data: any) = console.log(data);11、递归组件个单件组件可以通过它的件名被其所引。例如：名为的组件可以在其模板中引它。FooBar.vue请注意这种式相于 import 导的组件优先级更低。如果有命名的 import 导和组件的推断名冲
25、突了，可以使 import 别名导：import FooBar as FooBarChild from ./components注意：这有问题，当单件引单件时会出现内存溢出现象:is12、component动态组件由于组件被引为变量不是作为字符串键来注册的，在中要使动态组件的时候，就应该使动态的来绑定： import Foo from ./Foo.vue import Bar from ./Bar.vue13、ts限制普通函数/箭头函数参数类型13.1 普通函数function test(params:(string|boolean):void console.log(params);test
26、(5555)13.2 箭头函数，推荐法const test = (params:(string|boolean)= console.log(params)test(5555)14、引vuex配置和使14.1 创建项时我们已经引了vuex4.0版本，接下来我们就开始配置vuex4.0并测试。/ 注意必须安装vuex4.0版本及以上npm install vuexnext -save #oryarn add vuexnext -save14.2 在src录下创建store件夹，新建件index.ts, index.ts内容如下所：import InjectionKey from vue/* 引 I
27、njectionKey 并将其传 useStore 使过的任何地，* 很快就会成为项重复性的作。为了简化问题，可以定义* 的组合式函数来检索类型化的 store*/ 未简化useStore版/ import createStore, Store from vuex/ 简化useStore版import useStore as baseUseStore, createStore, Store from vuex/ 为 store state 声明类型export interface State username: string, count: number/ 定义 injection keyex
28、port const key: InjectionKeyStore = Symbol()/ 导出store模块export const store = createStore( state: username: 测试store,count: 0,getters:getName: state = return state.username,mutations: / 重置名称SET_NAME(state, params:string) state.username = params,actions:)/ 定义的 useStore 组合式函数export function useStore () r
29、eturn baseUseStore(key)14.3 在根录下新建vuex-d.ts件，内容如下所：/ 个声明件来声明 Vue 的定义类型 ComponentCustomPropertiesimport ComponentCustomProperties from vue; import Store from vuex;declare module vue/runtime-core / 声明的 store stateinterface State count: number, username: string/ 为 this.$store 提供类型声明interface ComponentC
30、ustomProperties $store: Store14.4 在main.ts中注store模块import createApp from vue; import App from ./App.vue;/ 导store模块, 传 injection keyimport store, key from /store; const app = createApp(App) app.use(store, key)app.mount(#app)14.5 引测试vuex配置是否正确点击修改名称/ vue 组件import useStore from /store; const store = us
31、eStore()/ 测试store重置名称/ mit(increment, 10) function changeName():voidmit(SET_NAME, 10)console.log(修改后的名称：+store.getters.getName);console.log(store.state.count,store.getters.getName)15、router配置以及使详解15.1 安装创建项时我们已经引了router4.0版本，接下来我们就开始配置router4.0并测试。/ 注意：安装router必须是4.0及以上npm install vue-router415.2 页准
32、备录结构外链图转存失败,源站可能有防盗链机制,建议将图保存下来直接上传(img-O1byer9d-1642383363137) (E:vue_projectdemosvite-vue3-ts-volarvite+vue3最新技术栈档page.png)页具体内容：1、layout/index.vueimport Header from ./header/index.vue;2、layout/header/index.vue页关于import useRouter from vue-router; const router = useRouter()const handleClick = (num:
33、 number)= if (num) router.push(name: home)else router.push(name: about).actiondisplay: flex;h2padding: 0px 10px; cursor: pointer;h2:hover color: red;3、pages/home/index.vuehome4、pages/about/index.vueabout15.3 在src录下创建router件夹，然后创建index.ts件，内容如下所：import createRouter, createWebHashHistory from vue-rout
34、er; import LayOut from ./components/layout/index.vue;const routes = path: /,component: LayOut, redirect: /home, children:path: /home,name: home,component: ()= import(./pages/home/index.vue), meta:title: 页,icon: ,path: /about, name: about,component: ()= import(./pages/about/index.vue), meta:title: 关于
35、,icon: const router = createRouter( history: createWebHashHistory(), routes)export default router15.4 在main.ts中注router模块, 重新启动项，访问路由，看是否正确import createApp from vue import App from ./App.vue import store, key from ./store; import router from ./router;const app = createApp(App); app.use(store, key); app.use(router); app.mount(#app);15.5 使路由templat