代码改变世界

初探 vite2 + vue3

2021-04-10 09:38  金色海洋(jyk)  阅读(374)  评论(0编辑  收藏  举报

vite2已经出来一段时间了,这几天没忍住尝试了一下,首先体验到的就是 —— 快,真的很快,再也不用痛苦的等待了。

然后就是踩坑,因为vite2还算是比较新,所以介绍文章不多,虽然已经出来官网文档了,但是现在的官网似乎侧重原理介绍,对于最初级的使用方式,似乎没有,或者是我还没有找到。

这里汇总一些基础用法。

创建项目

vite2 构建项目:

建议使用yarn,可以更快一些。

yarn create @vitejs/app

然后按照提示操作即可!

选择需要的模板:

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

速度会非常快,只是之后需要进入文件夹,执行npm install安装需要的包,然后是npm run dev启动项目。

然后可以看到一个默认的项目,提供一些最基本的功能。

安装第三方控件

路由、状态管理和UI库,基本没啥变化,还是以前的安装方式,也是在main.js里面注册。

新变化

script setup

直接开写代码就可以了,更简单。

  • props 属性
import { defineProps } from 'vue'
const props = defineProps({
  msg: String
})
console.log(props)

模板里面的使用方式不变,代码里面要这么写,定义调用一气呵成。

  • emit
import {  defineEmit } from 'vue'
const emit = defineEmit(['myclick'])
const toParent = ()=> {
  emit('myclick','hello parent')
}

这次emit也有了自己的方式,可以不用和上下文混在一起了。

  • 上下文
import { useContext } from 'vue'
const ctx = useContext()
console.log('home:', ctx)
//导出
ctx.expose({
  someMethod(){
    console.log("将方法导出外部,供外部使用")
  }
})
  • ctx
    上下文
    attrs、emit、slots还是在这里,用法应该没啥变化。

  • expose
    在子组件里面写一个方法,然后在父组件里面可以调用,这个算是弥补了一个不足吧,当然以前也是有这种方式的。

  • 导出的方法,父组件的调用方式

<HelloWorld ref="hw"/>

import { ref, onMounted } from 'vue'

const hw = ref(null)

onMounted(() => {
  hw.value.someMethod()
})

// 或者写在事件里面。

这个调用方式还是有点麻烦,找了半天。

便捷性

如果你觉得在 setup 里面return 对象很烦,那么恭喜你,现在不需要return了。

如果你觉得 引入一个组件之后,还需要在 components 中声明,那么恭喜你,现在也不需要了,import 引入进来之后,模板里面就可以用了。

vite.config.js 内基础配置

增加了一个配置文件,这里面可以进行各种配置,看着有点晕。

export default {
  alias: {
    "@": resolve("src"),
    "comps": resolve("src/components"),
    "apis": resolve("src/apis"),
    "views": resolve("src/views"),
    "utils": resolve("src/utils"),
    "routes": resolve("src/routes"),
    "styles": resolve("src/styles"),
  },
  plugins: [vue()]
}

plugins: [vue()] 这个是默认的,上面的别名可以自己设置,还可以有其他设置,总之很多的样子。

适应。。。

变化还是有点大,需要习惯一下,尤其是传说中的“心智问题”。如果说 vue3 的composition API 带来的心智难度是1 (约束性变小) 的话,那么这个vite2带来的难度大概是 2 (约束性几乎没了),想要驾驭好更难了一些。

vue3 还可以不太在意分出来js文件,但是现在是必须分出来单独的js文件了,否则那代码真的是不敢看。

正在尝试写个博客具体体验一下。

2