vue3搭建

一、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')
    }
  }
})