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 对象中的值需要用 .value 或 unref()，而 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.$router、this.$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");
}