vue3 ts开发,vite vue3插件配置

　　本文主要介绍了vite ts快速建设vue3项目及相关特点。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。让我们和边肖一起学习。

vite

　　尤其是在vue 3.0 beta的直播中，大推荐了vite的工具，强调vue单页组件的解包开发服务器可以直接在浏览器中运行请求的Vue文件。

　　很新颖。这个博客用它来构建一个vue3项目。

　　Vite是一款基于原生模块系统ESModule的现代面向浏览器、按需编译的Web开发和构建工具。生产环境中基于汇总的打包

　　快速冷启动服务器

　　即时热模块更换(HMR)

　　真正的按需编译

　　节点=10.16.0

搭建

　　用vite构建项目

　　npm init vite-app项目名称

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

配置

vite.config.ts

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

　　我将简单地对其进行配置：

　　从“路径”导入路径

　　模块.导出={

　　别名：{

　　/@/: path.resolve(__dirname，。/src’)

　　优化步骤：{

　　包括：[lodash]

　　代理服务器：{}

　　}

Router

　　在src下新建一个路由器文件夹，并在文件夹中创建index.ts。

　　从“vue-router”导入{ createRouter，createWebHistory }

　　常量路由=[

　　{

　　路径：“/”，

　　姓名：家，

　　component:()=import(/@/views/home . vue )

　　{

　　路径：“/lifeCycle”，

　　名称：“生命周期”，

　　component:()=import(/@/views/life cycle . vue )

　　}

　　]

　　导出默认创建路由器({

　　history:createWebHistory(/krry/)，

　　路线

　　})

ts types

　　在项目的根目录下创建一个新的tsconfig.json来编写相关的配置。

　　{

　　编译器选项:{

　　.//其他配置

　　路径:{

　　/@/*: [

　　src/*

　　]

　　lib: [

　　 esnext ，

　　多姆，

　　dom.iterable ，

　　 scripthost

　　]

　　包括:[

　　src/**/*。ts ，

　　src/**/*。tsx ，

　　src/**/*。vue ，

　　 src/types/images.d.ts ，

　　测试/**/*。ts ，

　　测试/**/*。tsx

　　排除:[

　　节点_模块

　　]

　　}

　　在src目录下创建一个新的types文件夹，您需要在其中配置ts的类型。

　　填隙片

　　声明模块“*”。vue {}

　　图片. d.ts

　　声明模块“*”。svg

　　声明模块“*”。巴布亚新几内亚

　　声明模块“*”。 jpg

　　声明模块“*”。 jpeg

　　声明模块“*”。 gif

　　声明模块“*”。骨形态发生蛋白

　　声明模块“*”。 tiff

　　主页面

　　从“vue”导入{ createApp }

　　从“/@/路由器”导入路由器

　　从“/@/App.vue”导入应用程序

　　const app=createApp(App)

　　app.use(路由器)

　　app . mount(# app)

　　然后你就可以愉快地写代码了。

vue3 知识

setup

　　Vue3集成了所有api带设置功能；只有一次，在生命周期函数之前，所以你不能在setup函数中得到当前实例this，也不能用this调用vue2中定义的方法。

　　它将接受两个参数：道具和上下文。

　　//props-组件上下文接受的属性上下文

　　设置(道具、上下文){

　　返回{

　　//要绑定的数据和方法

　　}

props

　　设置功能中的道具是有反应的，当新道具传入时会被更新。

　　但是因为道具是响应式的，所以ES6解构不能用，因为会消除道具的响应式。

　　如果你需要解构prop，你可以在设置函数中使用toRefs来安全地完成。

　　从“vue”导入{ toRefs }

　　设置(道具){

　　const { title }=toRefs(props)

　　console.log(标题.值)

　　}

context

　　公开上下文的三个组件的属性：{attrs，slots，emit}

　　它是一个普通的JavaScript对象，没有响应性，这意味着您可以使用ES6安全地解构上下文。

生命周期

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

　　因为安装程序围绕beforeCreate和created生命周期挂钩运行，所以不需要显式定义它们。

　　换句话说，任何用这两个钩子写的代码，都应该直接写在设置函数里。

　　setup() {

　　onMounted(()={

　　Console.log(组件安装)

　　})

　　未安装(()={

　　Console.log(“组件卸载”)

　　})

　　未更新(()={

　　Console.log(“组件更新”)

　　})

　　onBeforeUpdate(()={

　　Console.log(“将更新组件”)

　　})

　　onActivated(()={

　　Console.log(“保持活动组件激活”)

　　})

　　onDeactivated(()={

　　console . log(“keepAlive组件处于非活动状态”)

　　})

　　返回{}

　　}

ref、reactive

　　Ref可以将一个普通值打包成响应数据，只限于简单值。在内部，值被打包成一个对象，然后由defineProperty处理。

　　在获取和设置值时，由ref包装的值应由设置。价值。

　　可以用ref来获取组件的引用，而不是this。$参考文献。

　　Reactive以响应的方式处理复杂的数据，它的返回值是一个代理对象。当它在setup函数中返回时，您可以使用toRefs来构造代理对象，这便于在模板中使用。

　　按如下方式使用：

　　模板

　　差异

　　ul v-for= ele in eleList :key= ele . id

　　李{ { ele . name } }/李

　　/ul

　　按钮@click=addEle 添加/按钮

　　/div

　　差异

　　ul v-for= ele in todoList :key= ele . id

　　李{ { ele . name } }/李

　　/ul

　　Button @click=addTodo 添加/button

　　/div

　　/模板

　　脚本

　　从“vue”导入{ ref，reactive，toRefs }

　　导出默认值{

　　setup() {

　　//ref

　　const eleList=ref([])

　　函数地址(){

　　设len=eleList.value.length

　　eleList.value.push({

　　身份证：莱恩，

　　名称：“参考自增”贷款

　　})

　　}

　　//反应性

　　const dataObj=reactive({

　　todoList: []

　　})

　　函数addTodo() {

　　设len=dataObj.todoList.length

　　dataObj.todoList.push({

　　身份证：莱恩，

　　名称：“反应式自增”镜头

　　})

　　}

　　返回{

　　eleList，

　　阿德勒，

　　addTodo，

　　.toRefs(dataObj)

　　}

　　/脚本

computed、watch

　　//计算的

　　let sum=computed(()=data obj . todolist . length elelist . value . length)

　　Console.log(setup 指的是为计算的。值： sum.value)

　　//观察

　　手表(

　　eleList，

　　(curVal，oldVal)={

　　Console.log (listener:，curVal，oldVal)

　　{

　　深：真的

　　}

　　)

watchEffect

　　负责任地跟踪函数中引用的响应数据，当响应数据改变时，函数将被重新执行。

　　const count=ref(0)

　　//当count的值被修改时，将执行回调

　　const stop=watch effect(()=console . log(count . value))

　　//停止监听

　　停止()

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

　　与vue2相同：

　　const unwatch=this。$watch(say ，curVal={})

　　//停止监听

　　取消观看()

useRoute、useRouter

　　从“vue路由器”导入{useRoute，useRouter}

　　Const route=useRoute() //相当于这个。vue2中的$route

　　Const router=useRouter() //相当于这个。vue2中的路由器

　　Route用于获取当前的路线数据。

　　路由器用于路由跳跃。

vuex

　　当使用usestore从vuex获取store对象的值时，需要注意的是必须用computed进行包装，这样vuex中的状态才能在页面中响应之前进行修改。

　　从“vuex”导入{useStore}

　　setup(){

　　Const store=useStore() //相当于这个。vue2中的$store

　　Store.dispatch() //通过Store对象调度异步任务

　　Store.commit() //提交以修改存储数据

　　let category=computed(()=store . state . home . current cage gory

　　返回{类别}

　　}

　　关于vite ts快速构建vue3项目及相关特性的文章到此为止。更多关于vite ts构建vue3的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录