Vue3 项目搭建

安装全局 @vue/cli

Vue3 与 Vue2 的脚手架安装方式稍有不同,Vue2 安装的是 vue-cli,Vue3 安装的是 @vue/cli。如果之前已经安装过 Vue2 的 vue-cli,那么要先将其卸载,再安装 Vue3 的 @vue/cli。而且 @vue/cli 仍可以创建 Vue2 项目,所以可放心卸载。

安装 @vue/cli 的命令如下:

1
npm install @vue/cli -g

创建 Vue 项目

创建项目的方式也与 Vue2 不同,执行如命令:

1
vue create projectname

回车之后会出现三个选项,分别表示:

  • 创建默认的 Vue2 项目
  • 创建默认的 Vue3 项目
  • 自定义创建项目

我们一般选择第三项,确认之后又出现一串选项,并提示“按空格键选择,按 a 全选,按 i 反选”。

我们一般在原有基础上再选择:

  • Router
  • CSS Pre-processors
  • vuex

如果不想使用 ESLint,可以取消选项 “Linter / Formatter”。

然后按回车进行具体配置,步骤如下:

  1. 选择 Vue 的版本,根据自己需要选择,这里选择 “3.x”
  2. 是否使用历史模板,选择 “n”
  3. CSS 预处理器,根据需要选择,这里选择 “Less”
  4. 选择一个 linter / formatter 的配置,选择第一个
  5. 选择另一个 lint 的特点,我们选择第一个
  6. Babel,ESLint 的配置项存放地址,选择 “In package.json”
  7. 是否将此项目的配置用于之后的项目,选择 “N”

回车之后项目就开始创建了,到此,Vue3 项目创建完成。


ref 与 reactive 区别

ref 与 reactive 都是用来定义响应式变量的,区别是:

  1. ref 用来定义基本的数据类型(string,number,boolean,null,undefined,symbol),reactive 用来定义复杂的数据类型(对象)
  2. 访问 ref 对象中的值需要用 .valueunref(),而 reactive 中的值可以直接访问
  3. 本身具有响应性的对象(props,reactive 对象)不能直接用 es6 解构,否则会失去响应性,要先用 toRef() 将其转换为 ref 对象再解构。

ref 引用模板或子组件

在 setup 方法中,没有 $refs 这个属性,我们可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<templat>
<div>
<input ref='input'/>
</div>
</template>

<script>
import {ref, onMounted} from "vue";
export default {
setup() {
// 此变量值须与模板中 ref 值一样
const input = ref();
// 只有在 mounted 中 ref 才能被访问
onMounted(() => {
input.value.focus();
});

return {
// 必须将其暴露给模板
input
}
}
</script>

引用子组件中的变量或方法同上。


vue3 路由跳转

由于没有了 $router、$route, 实现路由跳转的方式也发生了变化:

1
2
3
4
5
6
7
8
9
10
11
12
<script>
import {useRouter, useRoute} from 'vue-router';

export default {
setup() {
const router = useRouter();
function click() {
router.push('/');
}
}
}
</script>

注意:useRouter 和 useRoute 只能用于 setup 方法中,其作用相当于 this.$routerthis.$route


Vue3 使用 element-ui

Vue3 不能安装 ‘element-ui’,而是应该安装 ‘element-plus’,全局引入方式如下:

1
2
3
4
import Element from 'element-plus'
import 'element-plus/theme-chalk/index.css'

app.use(Element)

关于更多 element-plus 的用法参考 https://element-plus.gitee.io/zh-CN/


Vue3 deep 穿透

1
::v-deep .head {...}

Vue3 使用 emit

父组件:

1
2
3
4
5
6
7
8
9
<children @change-title="changeTitle"/>

<script>
setup() {
function changeTitle(val) {
console.log(val);
}
}
</script>

子组件:

1
2
3
4
emits: ["changeTitle"],
setup(props, {emit}) {
emit("changeTitle", "hello world");
}