创建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中的状态和方法了。