Vue CLI 学习：从零开始搭建你的第一个Vue项目

通过这篇教程，您将从零开始学习使用Vue CLI搭建Vue.js项目，掌握从安装基础工具到创建第一个Vue项目，解析项目结构，理解配置文件，构建基本Vue组件，探索实用功能如路由、表单处理与状态管理，并优化部署流程。此外，您还将实践构建一个简易待办事项应用，将理论知识应用于实际项目中，从而全面掌握Vue.js开发技能。

Vue CLI 是 Vue.js 的官方脚手架工具，用于快速搭建 Vue.js 项目并提供一系列实用的功能。在开始之前，请确保你的电脑上已经安装了 Node.js。

安装 Vue CLI

npm install -g @vue/cli

验证安装

vue --version

通过以上命令，你可以检查 Vue CLI 是否已成功安装在你的系统上。

接下来，我们将使用 Vue CLI 创建一个名为 my-vue-app 的新项目。

vue create my-vue-app

在创建项目时，你将被引导通过一系列选项，包括框架、样式配置等。对于大多数情况，选择默认选项即可：

Template: Default
Style: CSS

这将创建一个基本的 Vue.js 项目，并为你提供一个结构良好的项目文件夹。

一个典型的 Vue CLI 项目结构通常包括以下几个部分：

src/ 文件夹

• components/: 存放项目组件文件。
• main.js: 项目入口文件，初始化 Vue 应用。
• App.vue: 应用的根组件。
• assets/: 存放静态资源。
• router/: Vue Router 文件夹，用于管理应用程序的路由。
• store/: Vuex 文件夹，用于状态管理。

vue.config.js 配置文件：

module.exports = {
  outputDir: 'dist',
  publicPath: './'
};

该文件允许你在项目中自定义构建行为，例如配置输出目录、构建模式等。

在 src/components/ 目录下，创建一个新的组件：

touch src/components/HelloWorld.vue

编辑 HelloWorld.vue 文件：

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

在 App.vue 中使用新创建的组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld';

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

路由

Vue CLI 项目中默认已集成 Vue Router。为了更好地理解如何配置和使用路由，首先安装 Vue Router：

npm install vue-router

然后，在 src/router/ 目录下，创建 index.js 文件，配置路由：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  //... 其他路由配置
];

const router = new VueRouter({
  routes
});

export default router;

表单处理

Vue 通过 data 选项和指令（如 v-model）提供简单直观的方式来处理表单数据。

在 App.vue 中，创建一个简单的表单输入框：

<template>
  <div>
    <input v-model="message" placeholder="Type something...">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

状态管理

实战演练：构建一个简易待办事项应用

项目需求：

• 创建一个应用，允许用户添加、删除、编辑待办事项。
• 使用 Vue Router 进行路由管理。
• 使用 Vuex 管理应用状态。

步骤 1：设计界面与组件

• 待办事项列表：显示所有待办事项。
• 添加待办事项：输入框和提交按钮。
• 编辑待办事项：单击列表项时显示编辑模式。
• 删除待办事项：列表项右侧的删除按钮。

步骤 2：实现功能

在 src/components/ 下创建以下组件：

• TodoList.vue: 显示待办事项列表。
• TodoForm.vue: 添加、编辑待办事项的表单。
• TodoItem.vue: 显示单个待办事项。

步骤 3：路由配置与状态管理

在 src/router/ 目录下修改 index.js 文件，添加新的路由：

// src/router/index.js
const routes = [
  { path: '/', component: Home },
  //... 其他路由配置
  { path: '/todos', component: TodoList },
];

在 src/store/ 目录下创建 index.js 文件，定义状态和mutations：

// src/store/index.js
const state = {
  todos: []
};

const mutations = {
  addTodo(state, todo) {
    state.todos.push(todo);
  },
  removeTodo(state, index) {
    state.todos.splice(index, 1);
  },
  editTodo(state, { index, value }) {
    state.todos[index] = value;
  }
};

export default new Vuex.Store({
  state,
  mutations
});

步骤 4：实现数据交互

在 App.vue 中引入并使用这些组件，实现界面与功能的集成。

结论

通过本指南的学习，你不仅掌握了 Vue CLI 的基本使用方法，还深入了解了如何构建一个具有基本功能的 Vue.js 应用。这不仅适用于个人学习，也是入门 Web 开发领域的有力工具。随着实践经验的积累，你可以进一步探索 Vue CLI 的高级特性，如更复杂的路由管理、组件复用策略等，以适应更复杂的应用场景。