Vue3工程化配置

创建项目

vue-cli

具体环境配置请点这里

记得新建配置时这里选vue3

vite(推荐)

注：Vite 需要 Node.js 版本 18+，20+

1.选定路径后再cmd输入创建指令

cnpm create vite@latest # 配置时再定义项目名
cnpm create vite@latest 项目名
cnpm create vite 项目名

2.项目创建完毕后用webstorm打开项目

3.安装依赖

npm install

4.启动项目

npm run dev

看到该页面即表示成功

5.配置快速启动

快速体验2和3的差别

vue3

<script>let app=Vue.createApp({setup() {let count=Vue.ref(0)let handleAdd=()=>{count.value++}return {count,handleAdd}},})app.mount("#app")
</script>

vue2

<script>export default {name:'HomeView',data(){return{count:0}},methods:{handleAdd(){this.count++}}
}
</script>

ref和reactive

<script>let app=Vue.createApp({setup() {let count=0let handleAdd=()=>{count.value++}return {count,handleAdd}},})app.mount("#app")
</script>

这种方式下的count仅是一个普通的number数据，想要将他转换为响应式对象需要用到ref和reactive

<template><div class="home"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="handleAdd">点击加年龄</button><button @click="changeName">点击改名</button></div>
</template><script>
import {ref} from 'vue'
export default {name: 'HomeView',setup() {// 插值语法let name = ref('张三')// let age=19 这种写法默认没有响应式let age = ref(19)// 点击年龄+1function handleAdd() {console.log(age) // age的类型不是数字了，而是RefImplage.value += 1 // 让数字加1 ，需要使用 对象.value}function changeName() {name.value = '李四'}// 必须return才能在template中使用return {name,age,handleAdd,changeName}}
}
</script>
.value = '李四'}// 必须return才能在template中使用return {name,age,handleAdd,changeName}}
}
</script>