一、Vue 3介绍：
// 创建一个 Vue 实例
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
})
app.mount('#app')二、安装Vue 3：
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
vue create my-project三、开始开发：
<template>
<div class="hello">
{{ msg }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>四、Composition API：
import { ref } from 'vue'
export default {
setup(props, context) {
const count = ref(0)
function increment () {
count.value++
}
return { count, increment }
}
}五、路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const routes = [
{ path: '/', component: Home },
// ...
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})六、状态管理：
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment ({ commit }) {
commit('increment')
}
}
})