详解vite+ts快速搭建vue3项目以及介绍相关特性

2023-07-05 04:10:04 76

vite

尤大在Vue3.0beta直播中推荐了vite的工具，强调：针对Vue单页面组件的无打包开发服务器，可以直接在浏览器运行请求的vue文件

很新颖，这篇博客用它来搭建一个vue3的项目试试

Vite是面向现代浏览器，基于原生模块系统ESModule实现了按需编译的Web开发构建工具。在生产环境下基于Rollup打包

快速冷启动服务器
即时热模块更换（HMR）
真正的按需编译

node>=10.16.0

搭建

使用vite搭建项目

npminitvite-app

安装typescript、vue-router@next、axios、eslint-plugin-vue、sass等相关插件

配置

vite.config.ts

vite.config.ts相当于@vue-cli项目中的vue.config.js

我这简单配置一下：

importpathfrom'path'

module.exports={
alias:{
'/@/':path.resolve(__dirname,'./src')
},
optimizeDeps:{
include:['lodash']
},
proxy:{}
}

Router

在src下新建router文件夹，并在文件夹内创建index.ts

import{createRouter,createWebHistory}from'vue-router'

constroutes=[
{
path:'/',
name:'Home',
component:()=>import('/@/views/Home.vue')
},
{
path:'/lifeCycle',
name:'lifeCycle',
component:()=>import('/@/views/LifeCycle.vue')
}
]

exportdefaultcreateRouter({
history:createWebHistory('/krry/'),
routes
})

tstypes

项目根目录下新建tsconfig.json写入相关配置

{
"compilerOptions":{
...//其他配置
"paths":{
"/@/*":[
"src/*"
]
},
"lib":[
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include":[
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/types/images.d.ts",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude":[
"node_modules"
]
}

src目录下新建types文件夹，里面需要配置ts的类型

shims-vue.d.ts

declaremodule'*.vue'{}

images.d.ts

declaremodule'*.svg'
declaremodule'*.png'
declaremodule'*.jpg'
declaremodule'*.jpeg'
declaremodule'*.gif'
declaremodule'*.bmp'
declaremodule'*.tiff'

main.ts

import{createApp}from'vue'
importrouterfrom'/@/router'

importAppfrom'/@/App.vue'

constapp=createApp(App)
app.use(router)
app.mount('#app')

然后就可以快乐地写代码了

vue3知识

setup

vue3中用setup函数整合了所有的api；只执行一次，在生命周期函数前执行，所以在setup函数中拿不到当前实例this，不能用this来调用vue2写法中定义的方法

它将接受两个参数：props、context

//props-组件接受到的属性context-上下文
setup(props,context){
return{
//要绑定的数据和方法
}
}

props

setup函数中的props是响应式的，当传入新的prop时，它将被更新
但是，因为props是响应式的，不能使用ES6解构，因为它会消除prop的响应性

如果需要解构prop，可以通过使用setup函数中的toRefs来安全地完成此操作

import{toRefs}from'vue'

setup(props){
const{title}=toRefs(props)
console.log(title.value)
}

context

context暴露三个组件的property：{attrs,slots,emit}
它是一个普通的JavaScript对象，不是响应式的，这意味着你可以安全地对context使用ES6解构

生命周期

通过在生命周期钩子前面加上“on”来访问组件的生命周期钩子

因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地定义它们
换句话说，在这两个钩子中编写的任何代码都应该直接在setup函数中编写

setup(){
onMounted(()=>{
console.log('组件挂载')
})

onUnmounted(()=>{
console.log('组件卸载')
})

onUpdated(()=>{
console.log('组件更新')
})

onBeforeUpdate(()=>{
console.log('组件将要更新')
})

onActivated(()=>{
console.log('keepAlive组件激活')
})

onDeactivated(()=>{
console.log('keepAlive组件非激活')
})

return{}
}

ref、reactive

ref可以将某个普通值包装成响应式数据，仅限于简单值，内部是将值包装成对象，再通过defineProperty来处理的
通过ref包装的值，取值和设置值的时候，需用通过.value来进行设置
可以用ref来获取组件的引用，替代this.$refs的写法

reactive对复杂数据进行响应式处理，它的返回值是一个proxy对象，在setup函数中返回时，可以用toRefs对proxy对象进行结构，方便在template中使用

使用如下：

computed、watch

//computed
letsum=computed(()=>dataObj.todoList.length+eleList.value.length)
console.log('setup引用computed要.value：'+sum.value)

//watch
watch(
eleList,
(curVal,oldVal)=>{
console.log('监听器：',curVal,oldVal)
},
{
deep:true
}
)

watchEffect

响应式地跟踪函数中引用的响应式数据，当响应式数据改变时，会重新执行函数

constcount=ref(0)
//当count的值被修改时，会执行回调
conststop=watchEffect(()=>console.log(count.value))

//停止监听
stop()

还可以停止监听，watchEffect返回一个函数，执行后可以停止监听

与vue2一样：

constunwatch=this.$watch('say',curVal=>{})

//停止监听
unwatch()

useRoute、useRouter

import{useRoute,useRouter}from'vue-router'

constroute=useRoute()//相当于vue2中的this.$route
constrouter=useRouter()//相当于vue2中的this.$router

route 用于获取当前路由数据
router 用于路由跳转

vuex

使用useStore来获取store对象从vuex中取值时，要注意必须使用computed进行包装，这样vuex中状态修改后才能在页面中响应

import{useStore}from'vuex'

setup(){
conststore=useStore()//相当于vue2中的this.$store
store.dispatch()//通过store对象来dispatch派发异步任务
store.commit()//commit修改store数据

letcategory=computed(()=>store.state.home.currentCagegory
return{category}
}

到此这篇关于vite+ts快速搭建vue3项目以及介绍相关特性的文章就介绍到这了,更多相关vite+ts搭建vue3内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。