創建Vue3項目

一、安裝Vue CLI

Vue CLI是Vue.js官方提供的基於Vue.js進行快速開發的標準工具。安裝Vue CLI前需要先安裝Node.js和npm。

$ npm install -g @vue/cli

安裝完成後，可以通過以下命令進行Vue CLI版本確認：

$ vue --version

如果能夠正常輸出版本號，則說明安裝成功。

二、創建項目

創建項目需要使用Vue CLI提供的命令行工具，首先需要進入想要創建項目的目錄，然後使用以下命令進行項目創建：

$ vue create my-project

其中，my-project為項目名稱，可以根據自己的需求進行修改。

接下來，Vue CLI會詢問你想要使用哪種配置（默認為手動），可以按照需求進行選擇。手動配置可以讓你針對項目進行更加細粒度的設置，比如選擇是否安裝Vuex、Router等常用插件。

等待項目創建完成後，在命令行中進入項目所在目錄，使用以下命令啟動項目：

$ cd my-project
$ npm run serve

在瀏覽器中輸入http://localhost:8080/即可訪問項目。

三、創建組件

在Vue中，組件是構成整個應用程序的基本單元。Vue CLI在創建項目時已經自動幫我們創建了一個App.vue組件，在此基礎上可以通過以下步驟創建自己的組件。

1、在src目錄下新建一個.vue文件，比如我們新建一個HelloWorld.vue。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to my Vue.js app!'
    }
  }
}
</script>

2、在其他組件中使用該組件。

<template>
  <div class="other-component">
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  }
}
</script>

在其他組件中引入HelloWorld組件，並將其註冊為本組件的子組件，即可在該組件中使用HelloWorld組件的功能。

四、使用Vue Router進行頁面路由

Vue Router是Vue.js官方提供的路由管理工具，可以用於實現SPA（Single Page Application）中的頁面路由功能。以下介紹如何使用Vue Router進行頁面路由。

1、安裝Vue Router

$ npm install vue-router

2、創建路由

在src目錄下新建一個router目錄，在該目錄下創建一個index.js文件，用於定義路由表的配置。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在routes中定義了兩個路由，一個是根路由’/’，一個是關於頁路由’/about’，並分別指向了兩個組件Home和About。

3、在App.vue中添加組件並使用路由

在App.vue中添加一個組件，用於顯示當前路由所對應的組件。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在src目錄下的main.js文件中使用Vue Router。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

使用Vue Router後，通過點擊兩個鏈接就可以跳轉到對應的組件了。

五、使用Vuex進行狀態管理

Vuex是Vue.js官方提供的狀態管理工具，可以用於管理全局狀態（如登錄狀態、購物車、主題等）。以下介紹如何使用Vuex進行狀態管理。

1、安裝Vuex

$ npm install vuex

2、創建store

在src目錄下新建一個store目錄，在該目錄下創建一個index.js文件，用於定義Vuex store配置。

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000);
    }
  }
})

在state中定義了一個count值，mutations中定義了對count值進行加1的increment方法，actions中定義了異步操作，在1秒之後調用increment方法。

3、在組件中使用Vuex

在組件中可以使用Vuex store中的狀態，通過$store.state.count來獲取count值，通過$store.commit(‘increment’)來調用increment方法。

同時，可以使用Vuex提供的computed屬性，將Vuex store中的狀態映射到組件的data中。

<template>
  <div class="vuex-component">
    <p>Count: {{ count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>

<script>
export default {
  name: 'VuexComponent',
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}
</script>

這樣，我們就可以在組件中使用Vuex store中的狀態和方法了。