详解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 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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发送短信验证码完成注册功能
2015/11/24 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
让您的菜单不离网站
2006/10/03 Javascript
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue实现移动端input上传视频、音频
2020/08/18 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
python处理二进制数据的方法
2015/06/03 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
什么是抽象
2015/12/13 面试题
年度考核自我鉴定
2014/02/02 职场文书
小学课外阅读总结
2014/07/09 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
信仰纪录片观后感
2015/06/08 职场文书
工作证明格式范文
2015/06/15 职场文书
出生证明范本
2015/06/15 职场文书