详解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 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 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
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python基于当前时间批量创建文件
2020/05/07 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
公司同意接收函
2014/01/13 职场文书
小学生操行评语
2014/04/22 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2016小学新学期寄语
2015/12/04 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android