Vue CLI学习：从入门到实践

概述

本文详细介绍了Vue CLI的学习过程，包括Vue CLI的基本概念、安装配置、项目结构以及常用命令等，帮助读者快速搭建和管理Vue.js项目。此外，文章还通过一个简单的待办事项应用实例，展示了如何在实际项目中应用Vue CLI。文中还提供了关于项目部署和常见错误的解决方案，确保读者能够顺利进行Vue CLI的开发工作。Vue CLI学习过程中涉及的技术点和实践步骤均在文中得到了详尽的阐述。

Vue CLI学习：从入门到实践 Vue CLI简介

Vue CLI是什么

Vue CLI（官方称为 vue-cli 3.x 及以上版本为 Vue CLI 4.x）是 Vue.js 官方提供的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。Vue CLI 提供了一系列的预设配置，使得开发者可以专注于编写业务逻辑，而不需要关心项目结构和配置细节。Vue CLI 还支持多种模板和插件，能够快速地生成符合最佳实践的项目结构。

Vue CLI的作用和优势

Vue CLI 的主要作用是加速 Vue.js 项目的开发流程，它提供了以下功能：

1. 快速搭建项目：通过简单的命令行操作，可以快速创建一个新的 Vue 项目，而不需要手动配置文件和目录。
2. 模板支持：提供了多种预设模板，能够满足不同场景的需求，例如包含 Vuex 管理状态、Vue Router 路由管理等。
3. 插件扩展：允许开发者安装各种插件，如 ESLint 代码检查工具、Babel 编译器、TypeScript 支持插件等，极大增强了项目的可维护性和开发效率。
4. 自动化构建：Vue CLI 提供了自动化构建功能，包括打包优化、代码分割、环境变量配置等，极大简化了构建过程。
5. 热重载功能：在开发过程中，当源代码发生变化时，Vue CLI 可以自动重新编译并刷新浏览器，极大地提高了开发效率。例如，将以下代码保存在组件中，当代码发生变化时，浏览器会自动刷新：

<template>
  <div>
    <h1>热重载示例</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '这是一段热重载示例文字'
    };
  }
}
</script>

安装和配置Vue CLI

安装Node.js和npm

要使用 Vue CLI，首先需要安装 Node.js 和 npm（Node Package Manager）。Node.js 是一个开源的 JavaScript 环境，可以在浏览器之外运行 JavaScript 代码。npm 是 Node.js 的包管理和分发工具。

安装 Node.js 和 npm 的步骤如下：

1. 访问 Node.js 官方网站（https://nodejs.org/），下载最新版本的 LTS 版本。
2. 安装下载的安装包，按照提示完成安装。
3. 安装完成后，打开命令行工具，输入 node -v 和 npm -v 来检查 Node.js 和 npm 是否安装成功。输出的版本号表示安装成功。

安装Vue CLI

安装 Vue CLI 的步骤如下：

1. 打开命令行工具。
2. 使用 npm 全局安装 Vue CLI：

npm install -g @vue/cli

1. 安装完成后，使用命令 vue --version 检查 Vue CLI 是否安装成功。

创建Vue项目

安装完成后，可以使用 Vue CLI 创建一个新项目。命令如下：

1. 使用 vue create 命令创建项目：

vue create my-vue-project

1. 在弹出的选项中，可以选择使用预设配置或手动配置项目。默认配置通常足以满足大多数项目的需求。

2. 进入项目目录：

cd my-vue-project

1. 启动开发服务器：

npm run serve

此时，浏览器会自动打开项目，并在浏览器中显示默认的 Vue 应用界面。

基本项目结构

项目目录介绍

进入项目的根目录，可以看到以下主要文件和目录：

• public/：存放静态资源文件，如 index.html。
• src/：存放源代码文件，包括组件、路由、状态管理等。
• src/assets/：存放静态资源文件，如图片、字体等。
• src/components/：存放 Vue 组件。
• src/views/：存放 Vue 视图组件。
• src/App.vue：根组件，定义整个应用的布局和路由。
• src/router/index.js：路由配置文件。
• src/main.js：应用入口文件，引入 Vue 实例并挂载到 DOM。
• package.json：项目配置文件，定义了项目依赖和脚本。

路由和组件

路由是 Vue 应用中常用的概念，它允许开发者根据 URL 的变化来切换视图。在 Vue CLI 生成的项目中，默认使用 Vue Router 提供的路由功能。

首先，打开 src/router/index.js 文件，可以找到路由配置的代码结构如下：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

这里定义了两个路由：/ 和 /about，分别对应 Home 和 About 两个组件。这些组件位于 src/views/ 目录下，文件结构如下所示：

// Home.vue
<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

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

// About.vue
<template>
  <div>
    <h1>About</h1>
    <p>Welcome to the About page!</p>
  </div>
</template>

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

每个组件文件都包含 <template>、<script> 和 <style> 三个部分。<template> 区域定义了组件的 HTML 结构，<script> 区域定义了组件的逻辑代码，<style> 区域定义了组件的样式。

在 src/App.vue 文件中，可以看到路由的定义和使用：

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

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-view> 是一个特殊组件，它会根据当前路由展示对应的子组件。当路由发生变化时，<router-view> 会自动替换为相应的组件。

使用Vue CLI常用命令

启动开发服务器

在开发过程中，可以使用 npm run serve 命令启动开发服务器。这会启动一个本地服务器，并在浏览器中打开应用。

npm run serve

开发服务器会实时监听文件变化，当文件发生变化时，会自动重新编译并刷新浏览器。

构建生产环境代码

在开发完成后，需要将项目构建为生产环境的代码，以便在生产环境中部署。使用 npm run build 命令可以将项目构建为生产环境的代码，并输出到 dist/ 目录中。

npm run build

构建完成后，可以在 dist/ 目录中找到生成的静态文件。这些文件可以直接部署到 Web 服务器上。

添加模板与插件

Vue CLI 提供了丰富的模板和插件，可以在创建项目时选择使用。例如，Vue CLI 提供了 vuex（状态管理库）模板和 vue-router（路由管理库）模板。

可以使用 vue ui 命令启动一个图形界面，通过图形界面可以更直观地管理和配置项目。例如，可以添加 Vue 插件、查看日志、启动开发服务器等。

也可以通过命令行直接安装插件，例如安装 vue-router 插件：

vue add router

安装完成后，会在 src/router 目录下生成路由配置文件，并修改 src/App.vue 以使用路由。例如，src/router/index.js 文件会生成如下内容：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

项目实战

创建一个简单的待办事项应用

接下来，我们将使用 Vue CLI 创建一个简单的待办事项应用，该应用可以添加、删除待办事项。

初始化项目

首先，使用 Vue CLI 创建一个新的 Vue 项目：

vue create todo-app
cd todo-app
npm run serve

创建待办事项组件

在 src/components 目录下创建一个新的组件文件 TodoItem.vue：

<template>
  <li>
    <input type="checkbox" v-model="checked" />
    <span>{{ text }}</span>
    <button @click="removeTodo">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    text: String,
    id: Number
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    removeTodo() {
      this.$emit('remove', this.id);
    }
  }
}
</script>

TodoItem.vue 组件中定义了一个待办事项的模板，包括一个复选框、待办事项文本和一个删除按钮。v-model 用于双向绑定复选框的状态，removeTodo 方法用于触发删除事件。

创建待办事项列表组件

在 src/components 目录下创建一个新的组件文件 TodoList.vue：

<template>
  <div>
    <h2>待办事项列表</h2>
    <input v-model="newTodo" placeholder="添加待办事项" @keyup.enter="addTodo" />
    <ul>
      <todo-item v-for="(todo, index) in todos" :key="index" :text="todo.text" :id="index" @remove="removeTodo"></todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: [
        { text: '学习 Vue CLI' },
        { text: '创建待办事项应用' }
      ]
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({ text: this.newTodo });
        this.newTodo = '';
      }
    },
    removeTodo(id) {
      this.todos.splice(id, 1);
    }
  }
}
</script>

TodoList.vue 组件中定义了一个待办事项列表，包括一个输入框和一个待办事项列表。v-for 指令用于遍历 todos 数组并渲染每个待办事项组件。addTodo 方法用于添加新的待办事项，removeTodo 方法用于删除待办事项。

使用待办事项列表组件

在 src/App.vue 文件中引入并使用 TodoList 组件：

<template>
  <div id="app">
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行应用

运行 npm run serve 命令启动开发服务器，浏览器会自动打开应用，并显示待办事项列表。可以在输入框中输入新的待办事项，并使用回车键添加。点击待办事项旁边的删除按钮可以删除待办事项。

使用Vue CLI的插件和模板

Vue CLI 提供了很多插件和模板，可以方便地扩展和增强项目功能。例如，可以使用 vue add vuex 命令将 Vuex 状态管理库添加到项目中。

1. 安装 Vuex 插件：

vue add vuex

1. 在 src/store/index.js 文件中，可以看到 Vuex 的基本配置：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: [
      { text: '学习 Vue CLI' },
      { text: '创建待办事项应用' }
    ]
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, id) {
      state.todos.splice(id, 1);
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    },
    removeTodo({ commit }, id) {
      commit('removeTodo', id);
    }
  },
  getters: {
    todos: state => state.todos
  }
});

1. 在 src/main.js 文件中，可以看到 Vuex 插件已经被引入和使用：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

1. 在组件中使用 Vuex：

<template>
  <div>
    <input v-model="newTodo" placeholder="添加待办事项" @keyup.enter="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.checked" />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      todos: state => state.todos
    })
  },
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    ...mapActions([
      'addTodo',
      'removeTodo'
    ])
  }
}
</script>

这样，就可以通过 Vuex 管理全局状态，实现状态的集中管理和异步操作。

常见问题解答

解决构建过程中的常见错误

在构建过程中，可能会遇到一些常见错误，例如缺少依赖、代码格式错误等。以下是一些常见的错误及其解决方案：

1. 错误：Module build failed: Error: ENOENT: no such file or directory

   此错误通常表示某个文件不存在。检查是否正确安装了所有依赖，并确保所有文件路径正确。

2. 错误：SyntaxError: Unexpected token

   此错误通常表示代码语法错误。检查代码中是否有语法错误，例如缺少分号、错误的括号等。

3. 错误：Module not found: Error: Can't resolve

   此错误表示依赖模块未找到。确保所有依赖按照要求安装，并检查 package.json 文件中的依赖配置。

4. 错误：TypeError: Cannot read property 'xxx' of undefined

   此错误表示在未定义的属性上访问属性。检查代码中是否有未定义的对象引用。

项目部署注意事项

在项目部署时，需要注意以下几点：

1. 确保所有依赖安装正确

   部署前需要确保所有依赖已经正确安装，并且版本号与开发环境一致。可以使用 npm install 命令重新安装依赖。

2. 清理构建产物

   部署前需要清理构建产物中的临时文件，例如 node_modules、.git 等。可以使用 .gitignore 文件来排除不需要上传的文件。

3. 使用生产环境配置

   部署前需要确保使用了生产环境配置，例如环境变量、路由配置等。可以使用环境变量来区分开发环境和生产环境。

4. 使用生产环境构建

   使用 npm run build 命令构建生产环境代码，并将生成的 dist/ 目录中的文件部署到服务器上。

5. 静态文件服务器配置

   部署静态文件时，需要确保服务器配置正确。例如，Apache 和 Nginx 都需要正确配置静态文件路径和缓存策略。