vue3+ts写法,vue3中使用ts
这篇文章主要介绍了Vue3项目中引用分时（同分时)语法的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
基础语法vue-routervuex # # # # # elementPlusaxiossetup脚本
基础语法
定义data
//脚本标签上**lang=ts**
脚本语言
从“vue”导入{ defineComponent，reactive，ref，tore fs }。
//定义一个类型类型或者接口连接来约束数据
类型Todo={
id:数字，
名称：字符串，
已完成：布尔型
}
导出默认定义组件({
//使用反应的时，可以用托雷夫斯解构导出，在模板就可以直接使用了
常数数据=反应({
todoList: []作为待办事项[]
})
//可以使用裁判员或者托雷夫斯来定义响应式数据
const count=ref(0)；
//使用裁判员在设置读取的时候需要获取xxx.value，但在模板中不需要
console.log(计数。值)
返回{
.参考（数据)
}
})
/脚本
定义props
从“vue”导入{ defineComponent，prop type }；
界面UserInfo={
id:数字，
名称：字符串，
年龄：数量
}
导出默认定义组件({
//道具需要使用属性类型泛型来约束。
道具：{
用户信息：{
类型：PropTypeUserInfo形式的对象，//泛型类型
必填：真
}
},
})
定义methods
从“vue”导入{ defineComponent，reactive，ref，tore fs }。
类型Todo={
id:数字，
名称：字符串，
已完成：布尔型
}
导出默认定义组件({
常数数据=反应({
todoList: []作为待办事项[]
})
//约束输入和输出类型
const newTodo=(name:string):Todo={
返回{
id: this.items.length 1
姓名，
已完成：假
};
}
const add Todo=(Todo:Todo):void={
data.todoList.push(todo)
}
返回{
.toRefs(数据),
纽多，
addTodo
}
})
vue-router
从" vue路由器"导入{ createRouter，createWebHistory，RouteRecordRaw }。
从以下位置导入主页./views/home。vue ；
//路线的约束类型是RouteRecordRaw
const routes:Array RouteRecordRaw=[
{
路径："/",
姓名：家，
成分：家，
},
{
路径："/关于"，
名称："关于",
component:()=import(/* webpackChunkName: about */./观点/关于。vue’)
}
];
//创建路由器创建路由器实例
const router=createRouter({
//路由器的模式分为
//createWebHistory - history模式
//createWebHashHistory - hash模式
history:createWebHistory(进程。环境。base _ URL)，
路线
});
导出默认路由器；
扩展路由额外属性
//联合类型
//在实际项目开发中，常常会遇到这么一个场景
//某一个路由是不需要渲染到侧边栏导航上的
//此时我们可以给该路由添加一个隐藏的属性来实现。
//在分时（同分时)的强类型约束下，添加额外属性就会报错，那么我们就需要扩展RouteRecordRaw类型。
键入route config=RouteRecordRaw { hidden？布尔};//隐藏是可选属性
常量路由：ArrayRouteConfig=[
{
路径："/",
姓名：家，
成分：家，
隐藏：真实，
元：{
许可：真的，
图标：""
}
}
];
在setup中使用
//需要导入用户外部创建一个路由器实例。
从" vue路由器"导入{用户外部}；
从“vue”导入{定义组件}；
导出默认定义组件({
setup () {
const router=user outer()；
戈罗特(路径){
router.push({path})
}
}
})
vuex#####
使用this.$store
从" vuex "导入{ createStore }；
导出类型状态={
计数：数量
}
导出默认的createStore({
状态：{
计数：0
}
});
需要创建一个声明文件vuex。d . t从“vue”导入{ ComponentCustomProperties }；
从" vuex "导入{ Store }；
从导入{州} ./商店
声明模块" @ vue/runtime-core"{
接口组件自定义属性{
$store: StoreState
}
}
在setup中使用
定义来自“vue”的injecktionkey导入{注入键}；
从" vuex "导入{ createStore，Store }。
导出类型状态={
计数：数量
}
//创建一个注入键
export const key:InjectionKeyStoreState=Symbol( key )；
在安装插件时传入key//main.ts
从导入存储区{ key } ./store ；
app.use(store，key)；
在使用使用商店时传入从" vuex "导入{使用商店}；
从" @/商店"导入{ key }；
导出默认定义组件({
setup () {
const store=use store(key)；
const count=computed(()=store。状态。计数)；
返回{
数数
}
}
})
模块
新增一个待办事项模块。导入的模块，需要是一个状态管理中的接口模件的对象，接收两个泛型约束第一个是该模块类型从" vuex "导入{模块}；
从导入{州}./index。ts’；
类型Todo={
id:数字，
名称：字符串，
已完成：布尔型
}
const initialState={
待办事项：[]作为待办事项[]
};
导出类型为dostate=初始状态的类型；
导出默认值{
命名空间：对，
状态：初始状态，
突变：{
addTodo (state，payload: Todo) {
state.todos.push(有效载荷);
}
}
} as ModuleTodoState，State//模块，R S该模块类型稀有根模块类型
第二个是根模块类型//index.ts
导出类型状态={
计数：数量，
托多？TodoState //这里必须是可选，不然状态会报错
}
导出默认的createStore({
状态：{
计数：0
}
模块：{
待办事项
}
});
使用：setup () {
console.log(store.state.todo？todos)；
}
elementPlus
纱线添加元素-还有
完整引入
从“vue”导入{ createApp }
从“元素加”导入ElementPlus导入“元素-加/库/主题-粉笔/索引。CSS”；从导入应用程序. 1/app。vue ；
导入 dayjs/locale/zh-cn
从" element-plus/lib/locale/lang/zh-cn "导入区域设置
const app=createApp(App)
app.use(ElementPlus，{ size: small ，zIndex: 3000，locale })
app。装载(应用数量)
按需加载
需要安装巴别塔插件组件插件：安装依赖包纱线添加巴别塔-插件-组件-D
加入配置//babel.config.js
插件：[
[
成分，
{
库名：元素加，
样式库名称："主题-粉笔"
}
]
]
创建元素组件文件导入“元素-加/库/主题-粉笔/索引。CSS”；
导入”日js/locale/zh-cn”；
从" element-plus/lib/locale "导入区域设置；
从" element-plus/lib/locale/lang/zh-cn "导入郎；
导入{
埃拉赛德，
按钮，
ElButtonGroup，
}来自元素加；
常量组件：any[]=[
埃拉赛德，
按钮，
ElButtonGroup，
];
常量插件：any[]=[
加载中，
电子邮件，
ElMessageBox，
高架铁道通知
];
const element=(app: any):any={
//国际化
区域设置。用(郎)；
//全局配置
app。配置。全局属性。$ ELEMENT={ size: small }；
components.forEach(component={
app.component(组件名，组件);
});
plugins.forEach(plugin={
app.use(插件);
});
};
导出默认元素；
引用于项目//main.ts
从导入元素 0 . 0/插件/元素
const App=create App(应用程序)；
元素(app)；
axios
爱可信的安装使用和vue2上没有什么大的区别，如果需要做一些扩展属性，还是需要声明一个新的类型type Config=AxiosRequestConfig {成功通知？boolean，errorNotice？布尔}
从" axios "导入axios，{ AxiosResponse，AxiosRequestConfig }。
从“元素加”导入{ El消息}；
const instance=axios.create({
基本URL:进程。环境。vue _ APP _ API _ BASE _ URL ，
超时：120 * 1000,
withCredentials: true
});
//错误处理
常量错误=(错误)={
如果(错误。消息。包括(超时){
电子邮件({
消息： 请求超时，请刷新网页重试，
类型："错误"
});
}
if (error.response) {
常量数据=错误。回应。数据；
如果(错误。回应。状态===403){
电子邮件({
消息："禁止",
类型："错误"
});
}
如果(错误。回应。状态===401){
电子邮件({
消息："未授权",
类型："错误"
});
}
}
返回承诺。拒绝(错误);
};
type Config=AxiosRequestConfig {成功通知？boolean，errorNotice？布尔}
//请求拦截
实例。截击机。请求。使用((Config:Config)={
配置。headers[ Access-Token ]=本地存储。getitem( Token ) ；
返回配置；
}，err)；
//响应拦截
实例。截击机。回应。使用((response:axios response)={
const配置：Config=response。配置；
常量代码=数字(回应。数据。状态)；
如果（代码===200) {
如果(配置配置。成功通知){
电子邮件({
消息：response.data.msg，
类型："成功"
});
}
返回响应.数据
}否则{
let errCode=[402，403]；
if(errcode。包括(响应。数据。代码)){
电子邮件({
消息：response.data.msg，
类型："警告"
});
}
}
}，err)；
导出默认实例；
setup script
官方提供了一个实验性的写法，直接在脚本里面写设置的内容，即：安装脚本。之前我们写组件是这样的：模板
差异
{{count}}
ImgReview/ImgReview
/div
/模板
脚本语言
从“vue”导入{ ref，定义组件}；
从导入ImgReview ./组件/img审查。vue ；
导出默认定义组件({
组件：{
ImgReview，
},
setup() {
const count=ref(0)；
返回{ count }；
}
});
/脚本
启用安装脚本后：在脚本上加上设置模板
差异
{{count}}
ImgReview/ImgReview
/div
/模板
脚本语言设置
从“vue”导入{ ref }；
从导入ImgReview ./组件/img审查。vue ；
const count=ref(0)；
/脚本
是不是看起来简洁了很多，组件直接导入就行了，不用注册组件，数据定义了就可以用。其实我们可以简单的理解为脚本包括的内容就是设置中的，并做了返回.导出方法
常量句柄click=(type:string)={
console.log(类型);
}
定义props
使用小道具需要用到定义方案来定义，具体用法跟之前的小道具写法类似：基础用法从“vue”导入{定义道具}；
const props=define props([ userInfo ， gameId ])；
构造函数进行检查给小道具定义类型：const props=defineProps({
gameId:数字，
用户信息：{
类型：对象，
必填：真
}
});
使用类型注解进行检查定义方案{
名称：字符串
电话号码：号码
用户信息：对象
标签:字符串[]
}()
可以先定义好类型：界面用户信息{
id:数字，
名称：字符串，
年龄：数量
}
定义方案{
名称：字符串
用户信息：用户信息
}()
defineEmit
从“vue”导入{定义发出}；
//期望发出选项
const emit=defineEmit([kk ， up ])；
const handleClick=()={
发出(‘kk’，’点了我);
};
Comp @kk=handleClick/
脚本语言设置
const handleClick=(data)={
console.log(数据)
}
/脚本
获取上下文
在标准组件写法里，设置函数默认支持两个入参：
在安装脚本中使用使用上下文获取上下文：从“vue”导入{ useContext }
const { slots，attrs }=use context()；
获取到的插槽，属性跟设置里面的是一样的。以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。