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


Posted in Vue.js onFebruary 25, 2021

vite

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

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

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

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

node >= 10.16.0

搭建

使用 vite 搭建项目

npm init vite-app <project-name>

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

配置

vite.config.ts

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

我这简单配置一下:

import path from 'path'

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

Router

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

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

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

export default createRouter({
 history: createWebHistory('/krry/'),
 routes
})

ts types

项目根目录下新建 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

declare module '*.vue' {}

images.d.ts

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

main.ts

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

import App from '/@/App.vue'

const app = 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 中使用

使用如下:

<template>
 <div>
 <div>
  <ul v-for="ele in eleList" :key="ele.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addEle">添加</button>
 </div>
 <div>
  <ul v-for="ele in todoList" :key="ele.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addTodo">添加</button>
 </div>
 </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'

export default {
 setup() {
 // ref
 const eleList = ref([])
 function addEle() {
  let len = eleList.value.length
  eleList.value.push({
  id: len,
  name: 'ref 自增' + len
  })
 }

 // reactive
 const dataObj = reactive({
  todoList: []
 })
 function addTodo() {
  let len = dataObj.todoList.length
  dataObj.todoList.push({
  id: len,
  name: 'reactive 自增' + len
  })
 }

 return {
  eleList,
  addEle,
  addTodo,
  ...toRefs(dataObj)
 }
 }
}
</script>

computed、watch

// computed
let sum = 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

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

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

// 停止监听
stop()

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

与 vue2 一样:

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

// 停止监听
unwatch()

useRoute、useRouter

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

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

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

vuex

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

import {useStore} from 'vuex'

setup(){
 const store = useStore() // 相当于 vue2 中的 this.$store
 store.dispatch() // 通过 store 对象来 dispatch 派发异步任务
 store.commit() // commit 修改 store 数据
 
 let category = computed(() => store.state.home.currentCagegory
 return { category }
}

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

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
用vite搭建vue3应用的实现方法
Feb 22 #Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
You might like
用Socket发送电子邮件
2006/10/09 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
python发腾讯微博代码分享
2014/01/10 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
django url到views参数传递的实例
2019/07/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
上班离岗检讨书
2014/09/10 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年团支部工作总结
2015/04/03 职场文书
单位接收证明格式
2015/06/18 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL