vue3+Typescript学习笔记
⼀、Vue3的⼀些新特性
1. ⾸先是向下兼容，Vue3 ⽀持⼤多数 Vue2 的特性。我们同事甚⾄开玩笑说，我就拿 Vue2 的语法开发 Vue3，也是没有任何问题bling
镇江培训网
的。
2. 性能的提升，每个⼈都希望使⽤的框架更快，更轻。Vue3 做到了，给开发者⼀个极致的体验。官⽅⽹站给出的数据是：打包⼤⼩减
少 41%，初次渲染快 55%，更新快 133%，内存使⽤减少 54%。
3. 新推出的Composition API ，在 Vue2 中遇到的问题就是复杂组件的代码变的⾮常⿇烦，甚⾄不可维护。说⽩了就是封装不好，重
⽤不畅。这个Composition API⼀推出，⽴马解决了这个问题，本套课程中也会重点介绍这部分内容。它是⼀系列 API 的合集。
4. 其他新特性：Teleport(瞬移组件)、Suspen(解决异步加载组件问题)和全局 API 的修改和优化。
5. 更好TypeScript⽀持，我以前在开发 Vue2 的时候，是不适⽤TypeScript的，因为集成时很困难，疼点太多。但 Vue3 解决了这个
问题，Vue3 的源代码就是使⽤TypeScript进⾏开发的。所以在新的版本上使⽤TS也更加顺畅⽆阻。
B 站 Vue3 发布会视频：
⼆、vue-cli 搭建 Vue3 开发环境
1. 安装 Vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2. 如果你以前安装过，需要检查⼀下版本，升级到最新版本，因为只有最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项。
检查版本命令为：
vue --version
三、使⽤ vue-cli 命令⾏创建项⽬
小学三年级英语上册教案
1. 这⾥我先⽤命令⾏的⽅式创建⼀个Vue3项⽬，直接在命令⾏中输⼊vue create vue3-1，输⼊完成后，他会有这样⼀句询问。
Your connection to the default yarn registry ems to be slow.
U registry.npm.taobao for faster installation?(Y/n)
意思是你不能科学上⽹，建议你使⽤淘宝源，这时候你需要选择Y，也就是使⽤淘宝源进⾏创建。如果你已经配置淘宝源不会显⽰这个选项。
2. 当你选择Y之后，就会跳出三个菜单让你选择。
Plea pick a pret:(U arrow keys)//请选择预选项
> Default ([Vue 2] babel, eslint)//使⽤Vue2默认模板进⾏创建
Default (Vue 3 Preview)([Vue 3] babel, eslint)//使⽤Vue3默认模板进⾏创建
Manually lect features
这⾥我们需要再多选⼀个TypeScript的选项，然后再按回车进⼊下⼀层选择。
Choo a version of Vue.js that you want to start the project with (U arrow keys)
>2.x
3.x (Preview)
这⾥要选择 3.x 的版本，点击回车，然后会提⽰你是否需要使⽤class-style，教学中旧不使⽤这个类样式语法了，所以我们选择n。
U class-style component syntax?
然后会出现下⾯的选项 ，意思是否使⽤TypeScript和Babel的形式编译 JSX.这⾥我们也选择n
U Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
U Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
然后会出现ESLint的⼀些配置，这⾥我们选择第⼀项，默认就好，因为下⾯这些规则并不是这个课程的重点。
Pick a linter / formatter config:(U arrow keys)
prence是什么意思
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
回车后会让你选择增加lint的特性功能。
Pick additional lint features:(Press <space> to lect,<a> to toggle all,<i> to invert lection)
>(*) Lint on save //保存的时候进⾏Lint
() Lint and fix on commit //需要帮你进⾏fix（修理），这项我们不进⾏选择
回车后让你选择这些配置⽂件时单独存放，还是直接存放在package.json⽂件⾥。这⾥选择放在单独的⽂件⾥。
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
最后⼀个问题，是问你需不需要把这些配置保存下来，下次好直接进⾏使⽤。我这⾥选择不⽤(n)。淡然你可以⾃⾏选择
Save this as a pret for future projects?(y/N)
如果你同时安装了npm和yarn来个包管理软件，它还会作最后⼀次询问，让你选择使⽤什么进⾏下载。
Pick the package manager to u when installing dependencies:
> U Yarn
U NPM
3. 根据提⽰在命令⾏输⼊cd vue3-1进⼊项⽬，然后再输⼊ yarn/npm rve开启项⽬预览。这时候就会给出两个地址，都可以访问到
现在的项⽬.
App running at:
- Local: localhost:8080/
- Network: 192.168.0.118:8080/
Note that the development build is not optimized.
abc英语To create a production build, run yarn build.
hongbao把地址放到浏览器的地址栏，如果看到下⾯的页⾯，说明安装正常了
四、⽤ vue-cli 图形界⾯搭建 Vue3 环境
1. 启动 Vue-cli 中的图形界⾯
2. 当你安装了最新版的Vue-cli就可以使⽤ vue ui这个命令，开启⼀个 UI 界⾯，然后会出现下⾯的提⽰。
Starting GUI.
Ready on localhost:80
3.
五、项⽬初始结构和重要⽂件讲解
1. 以⼀个⽬录树状结构进⾏展⽰。后边的作⽤我也写到了下⾯
|-node_modules --所有的项⽬依赖包都放在这个⽬录下
|-public--公共⽂件夹
---|favicon.ico --⽹站的显⽰图标
---|index.html --⼊⼝的html⽂件
|-src --源⽂件⽬录，编写的代码基本都在这个⽬录下
---|asts --放置静态⽂件的⽬录，⽐如logo.pn就放在这⾥
---|components -- Vue的组件⽂件，⾃定义的组件都会放到这
---|App.vue --根组件，这个在Vue2中也有
---|main.ts --⼊⼝⽂件，因为采⽤了TypeScript所以是ts结尾
---|shims-vue.d.ts --类⽂件(也叫定义⽂件)，因为.vue结尾的⽂件在ts中不认可，所以要有定义⽂件
|-.browrslistrc --在不同前端⼯具之间公⽤⽬标浏览器和node版本的配置⽂件，作⽤是设置兼容性
|-.eslintrc.js -- Eslint的配置⽂件，不⽤作过多介绍
|-.gitignore --⽤来配置那些⽂件不归git管理
|-package.json --命令配置和包管理⽂件
begood
|-README.md --项⽬的说明⽂件，使⽤markdown语法进⾏编写
|-tsconfig.json --关于TypoScript的配置⽂件
|-yarn.lock--使⽤yarn后⾃动⽣成的⽂件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock⽂件中
这就是基本⽬录结构和⽤处了，你可以在表中⾃查。
2. package.json 中的三条命令
weila你可以使⽤npm run rve或yarn rve查看项⽬效果，就是因为有package.json中的scripts起到了作⽤。先来看⼀下这三条命令。
{
//----
"scripts":{
"rve":"vue-cli-rvice rve",
"build":"vue-cli-rvice build",
"lint":"vue-cli-rvice lint"
},
//----
}
3. 能使⽤vue-cli-rvice是因为vue-cli⾃动安装了cli-rvice这个⼯具，此处可以在devDependencies中看出哦。
这三个命令的意思是：
rve : 在开发时⽤于查看效果的命令，视频中演⽰看⼀下效果
build : 打包打码，⼀般⽤于⽣产环境中使⽤
lint : 检查代码中的编写规范
题目类型
我们顺便讲⼀下package.json中另外两个⽐较重要的配置项dependencies和devDependencies。这两个都是⽤来记录安装包信息的，但如果要想完全搞清楚他们的区别，你先要弄清楚什么是开发环境和⽣产环境。
开发环境： 作为⼀个程序员，每天作的事情都是在开发环境中，编写代码、测试代码、修改 Bug。也就说这些代码没有上线。
⽣产环境：就是代码已经上线，放到了正式的服务器上，公司开始运营去赚钱的代码。荷兰语翻译
明⽩了这两个概念后，dependencies下的包是⽣产环境中必须⽤到的，当然开发环境也需要。devDependencies是只有开发环境中使⽤的，上线后这些包就没⽤了，打包后也不会打包进去的代码。
六、tup()和 ref()函数
1. 代码如下：
<template>
<div>
<img alt="Vue logo" src="./asts/logo.png"/>
<div>
<h2>欢迎光临红浪漫洗浴中⼼</h2>
<div>请选择⼀位美⼥为你服务</div>
<div>请选择⼀位美⼥为你服务</div>
</div>
<div>
<button
@click="lectGirlFun(index)"
v-for="(item, index) in girls"
v-bind:key="index"
>{{ index }}:{{ item }}</button>
</div>
<div>你选择了【{{ lectGirl }}】为你服务</div>
</div>
</template>
<script lang="ts">
import { reactive, toRefs }from"vue";
interface DataProps {
girls:string[];
lectGirl:string;
lectGirlFun:(index: number)=>void;
}
export default{
name:"App",
tup(){
const data: DataProps =reactive({
girls:["⼤脚","刘英","晓红"],
lectGirl:"",
lectGirlFun:(index: number)=>{
data.lectGirl = data.girls[index];
}
});
const refData =toRefs(data);
return{
...refData
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-rif;
-webkit-font-smoothing: antialiad;
-
moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top:60px;
}
</style>
我们通过⼀个简单的⼤宝剑点餐需求，讲解了⼀些 Vue3 的新知识点，现在来总结⼀下：
tup 函数的⽤法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑卸载 tup ⾥就可以
ref 函数的使⽤，它是⼀个神奇的函数，我们这节只是初次相遇，要在template中使⽤的变量，必须⽤ref包装⼀下。
return出去的数据和⽅法，在模板中才可以使⽤，这样可以精准的控制暴漏的变量和⽅法。
2. ⽤ reactive()函数优化程序
