Vue 3.0 项目搭建和使用流程

Vue 3.0 是一款非常流行的前端框架，它在性能和便捷性方面都有很大的优势。本文将详细介绍 Vue 3.0 项目搭建和使用流程。

安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的脚手架工具，使用起来非常方便。可以通过以下命令全局安装 Vue CLI：

npm install -g @vue/cli

创建项目

在安装完 Vue CLI 后，可以使用 vue create 命令创建 Vue 3.0 项目，具体操作如下：

vue create my-project

其中，my-project 为项目名称，该命令会创建一个新的项目，并自动安装必要的依赖。创建完成后，可以进入项目目录并启动项目：

cd my-project
npm run serve

npm run serve 命令将启动本地开发服务器，并在浏览器中打开应用。

添加插件

接下来，可以通过 Vue CLI 添加一些常用的插件来简化开发过程，例如 Vuex 和 Vue Router。

安装 Vuex

Vuex 是一个专门为 Vue.js 设计的状态管理库。可以通过以下命令安装 Vuex：

npm install vuex

安装完成后，需要在创建的项目中导入并使用 Vuex，具体方法如下：

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

安装 Vue Router

Vue Router 是 Vue.js 官方路由管理库，可以帮助开发者实现单页应用。可以通过以下命令安装 Vue Router：

npm install vue-router

安装完成后，需要在创建的项目中导入并使用 Vue Router，具体方法如下：

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

示例说明

以下是两个示例，演示如何使用 Vue 3.0 搭建并开发一个简单的应用。

示例一：创建一个计数器

这是一个简单的计数器，通过点击按钮来实现计数。

首先，需要创建一个名为 Counter.vue 的组件，代码如下：

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  import { useStore } from 'vuex'
  export default {
    name: 'Counter',
    setup() {
      const store = useStore()

      const count = computed(() => store.state.count)

      const increment = () => {
        store.commit('increment')
      }

      return { count, increment }
    }
  }
</script>

然后，在 App.vue 文件中导入 Counter 组件，并在应用中使用该组件：

<template>
  <div>
    <h1>Counter</h1>
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

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

最后，在 main.js 文件中创建一个 Vuex store，并将该 store 注册到应用中：

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

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

现在，应用就可以在浏览器中运行，并实现计数器功能了。

示例二：创建一个路由应用

这是一个简单的路由应用，通过切换页面来实现不同的显示效果。

首先，在 src/views 目录下创建两个视图组件 Home.vue 和 About.vue，代码如下：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

然后，在 router/index.js 文件中导入这两个组件，并配置路由：

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

最后，在 main.js 文件中创建Vue 实例，并将 router 和 store 导入应用：

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

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

现在，应用就可以在浏览器中运行，并实现路由效果了。

这就是 Vue 3.0 项目搭建和使用流程的完整攻略，希望对大家有所帮助。