Vue项目快速上手 - 路遥

本文主要是以Vue3和elementUI举例，描述创建一个demo项目的过程，帮助初学者快速上手Vue项目的开发。不涉及vite构建、组合式api以及Typescript的介绍。

一、创建Vue项目

安装Vue脚手架可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

正常创建一个新的Vue 3项目：

vue create chrome-extension-demo

按照提示选择Vue 3的预设配置。如果您想要自定义配置，可以选择手动选择特性。

安装Element UI

进入项目目录：

cd chrome-extension-demo

安装Element UI：

npm install element-plus --save
# OR 
yarn add element-plus

配置Element UI

在src/main.js中，导入并使用Element UI。Vue的项目中在引入某个插件后都需要在主入口文件去做导入并挂载之后，项目中才可以使用的：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus) //挂载elementUI插件

app.mount('#app')

项目创建好后如下图：

二、项目目录介绍

在Vue项目中，目录结构通常遵循一定的约定，以下是带有注释的Vue项目目录结构示意图：

my-vue-project/
├── node_modules/          # 包含项目的所有依赖项
├── public/                # 包含Vue项目的公共资源
│   ├── index.html         # 项目入口 HTML 文件
│   └── favicon.ico        # 网站的图标
├── src/
│   ├── api/               # 抽取出API请求进行封装
│   ├── assets/            # 存放项目中用到的资源文件，如图片等
│   ├── components/        # 存放Vue组件
│   ├── views/             # 存放视图组件，即页面级组件
│   ├── styles/            # 存放样式文件
│   ├── utils/             # 存放工具函数
│   ├── App.vue            # 应用的根组件
│   ├── main.js            # 项目的入口文件，用于引入Vue框架和根实例
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── store/             # Vuex状态管理配置
│   │   └── index.js
├── babel.config.js        # Babel配置文件，用于将ES6代码转换为ES5
├── vue.config.js          # Vue项目的配置文件，可以配置webpack等
├── package.json           # 项目的依赖配置和工具配置，如scripts
├── package-lock.json      # 锁定依赖版本，确保团队开发一致性
└── README.md              # 项目的说明文档

一般的，我们会在views目录下创建页面组件，在components目录下创建页面组件对应的小组件，创建完成之后，在页面组件中导入即可。页面组件需要展示，必须在根组件中导入并使用。

三、路由导航

通常的情况下，我们希望所有的页面组件在引入根组件中后，根据用户请求的链接URL去展示对应的页面，这个时候就需要用到路由router。

首先确保已经安装了Vue Router。如果尚未安装，可以通过以下命令进行安装：

npm install vue-router@4

以下是配置Vue Router 4.x 版本的步骤：

创建路由实例：在src/router目录下创建一个index.js文件，并在该文件中编写路由配置。

// src/router/index.js

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

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

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

export default router;

在主入口文件中挂载路由：在src/main.js中导入路由实例，并将其挂载到Vue应用中。与上文配置elementUI处一样。

// src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; //导入router插件

const app = createApp(App);
app.use(router); //挂载router插件
app.mount('#app');

路由视图：在需要展示路由组件的地方使用<router-view>。

<!-- src/views/Home.vue 或其他页面组件中 -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

导航链接：使用<router-link>标签来创建导航链接，此处以根组件说明，那么此时当用户请求/时那就展示内容Home，用户请求/about时会展示内容About。

<!-- 在页面中使用 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

进一步扩展和配置路由，如路由守卫、动态路由等，深入学习请移步官网。

Vue Router 官网

四、状态管理

在开发大一点的Vue项目时，通常会遇到以下情况：

共享状态：多个组件需要共享同一份数据时，使用状态管理可以避免 props 层层传递的情况，提高代码的可维护性和可读性。
组件通信：当组件之间需要进行通信或共享数据时，使用状态管理工具可以方便地进行状态的管理和更新。
异步操作：处理异步逻辑时，状态管理工具可以更好地管理异步数据的状态，比如加载状态、错误状态等。
全局状态：某些数据需要在整个应用中保持同步，比如用户登录状态、主题设置等，使用状态管理可以方便地管理这些全局状态。

此时使用状态管理工具是很有必要的。在Vue 3项目中，您可以选择使用Vuex或Pinia作为状态管理工具。以下是分别使用Vuex和Pinia的配置过程和示例：

1. Vuex

Vuex 是 Vue 官方推荐的状态管理库，它基于 Flux 架构，包含了状态（state）、突变（mutations）、动作（actions）和 getters（类似于计算属性）等核心概念。Vuex 的核心思想是通过单一状态树来管理应用的所有组件的状态，并提供了一套规范的方式来进行状态的修改和管理。Vuex 使用基于事件的机制来实现状态的变更，组件通过提交 mutation 来修改状态，或者通过分发 action 来进行异步操作。Vuex 还提供了一些辅助函数，如 mapState、mapMutations、mapActions 等，可以简化组件中对状态的访问和操作。

Vuex官网

安装Vuex：确保已经安装Vuex。

npm install vuex@4

创建Vuex Store：在src/store目录下创建一个index.js文件，并编写Vuex Store。

// src/store/index.js

import { createStore } from 'vuex';

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

在主入口文件中挂载Vuex Store：在 src/main.js 中导入Vuex Store 并将其挂载到应用中。

// src/main.js

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

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Vuex：在需要使用状态管理的组件中引入vuex并使用store。

<!-- 在组件中使用 -->
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>

2. Pinia

Pinia 是一个简单、轻量级的状态管理库，它是专为 Vue 3 开发的状态管理库。与 Vuex 不同，Pinia 使用了 Vue 3 的 Composition API 来实现状态的管理。Pinia 的核心概念是 store，每个 store 包含了状态、动作和 getter，并且每个 store 都是独立的、可组合的。Pinia 提供了一种更加直观、灵活的方式来定义和管理状态，同时支持异步操作，并且可以与 Vue 3 的 Composition API 很好地结合使用。Pinia 还提供了一些钩子函数，如 useStore 和 useStoreMap 等，可以方便地在组件中使用 store。

Pinia官网

安装Pinia：确保已经安装Pinia。

npm install pinia

创建Pinia Store：在 src/store 目录下创建一个 index.js 文件，并编写 Pinia Store。

// src/store/index.js

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

在主入口文件中挂载 Pinia：在 src/main.js 中导入 Pinia 并将其挂载到应用中。

// src/main.js

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

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

在组件中使用 Pinia：在需要使用状态管理的组件中使用 useStore 函数获取 store 并操作状态。

<!-- 在组件中使用 -->
<template>
  <div>
    <p>Count: {{ $store.count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  setup() {
    const store = useStore();

    const increment = () => {
      store.count++;
    };

    const incrementAsync = () => {
      setTimeout(() => {
        store.count++;
      }, 1000);
    };

    return {
      increment,
      incrementAsync,
    };
  }
});
</script>

可根据项目需求和个人偏好，选择使用Vuex和Pinia其中之一。