vue3从入门到放弃-helloword篇
自从vue3 rc就一直想尝鲜， 但是最后还是因为种种原因（懒）没有去做， 今天开始填坑，这篇先来个helloword给大家看看
安装
安装，这里只介绍我们工程上最常用， 相信也是最多人用的一种方式， 使用官方脚手架vue-cli安装.
ps: vite由于其特性，个人觉得其暂时不推荐在生产环境使用，我们本着面向实际工程的原则，这里不做推荐，喜欢尝鲜的小伙伴，可是试试
1.安装vue-cli
1
2
3
| yarn global add @vue/cli
# OR
npm install -g @vue/cli
|
2.如果已经安装vue-cli, 但是版本低于v4.5, 更新vue-cli
3.创建项目
还是熟悉的配方， 还是熟悉的味道。这里因为我要使用ts， 所以选择最后一项
这里使用空格选择， vue-cli所有选项可以使用上下方向键， 或者使用vim的上下移动键j,k移动， 空格键选择/取消选择
这里我们选择vue3
剩下的按照自己喜好选择eslint规则等, 运行项目等， 这里就不再介绍了。下面开始正文，vue3的介绍
从最简单的计数器开始，看看vue3的composition api和我们之前使用的对象语法有什么差别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <template>
<div class="hello">
<button @click="reduceCount">-</button>
<p>{{ count }}</p>
<button @click="addCount">+</button>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
setup(props) {
console.log(props.msg)
const count = ref(0)
watchEffect(() => {
console.log('count change', count.value)
})
function addCount() {
count.value++
}
function reduceCount() {
if (count.value > 0) count.value--
}
return {
count,
addCount,
reduceCount,
}
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
|
从这里看到，composition api和我们的原先vue2的Optional api的差异还是非常大的。篇幅有限， 这里我先带大家看看vue3的样子。下一篇开始为大家介绍一下vue2与vue3的差别。
