Vue CLI 搭建环境完整教程：从 Node.js 到项目启动

Vue CLI 概述与优势

前言：

Vue 是一套用于构建用户界面的渐进式框架。所谓“渐进式”，意指其核心库仅关注视图层，概念简单，具体理解需结合官方文档深入探索。Vue 官方文档提供了详尽的说明，建议读者自行查阅以获取全面认知。

借助 vue-cli 可以高效创建 Vue 项目。尽管该工具功能强大，但在初始环境配置及安装过程中，许多开发者常遇到诸多困难。本文旨在分享个人在搭建 vue-cli 项目环境时的踩坑经验，提供详尽的步骤解析，供有需求的读者参考。

Vue CLI 脚手架的核心优势：

• 提供成熟的 Vue 项目架构设计，支持快速初始化 Vue 项目。
• 作为官方支持的脚手架工具，它会随着 Vue 版本的迭代而持续更新。
• 内置本地 Node.js 测试服务器，通过 vue-cli 提供的命令即可轻松启动服务。
• 集成了打包上线的解决方案。

此外，它还具备模块化、代码转译、预处理、热加载、静态检测及自动化测试等特性，随着使用的深入，开发者将逐步体会到 vue-cli 的强大功能。

开发环境配置步骤

本教程的操作环境基于 Windows 系统。

接下来开始正式搭建 vue-cli 脚手架环境。

命令行工具准备：

命令行工具是操作 npm 的基础，必须预先安装。许多教程未明确说明此点，直接罗列命令导致初学者不知从何下手。

推荐使用 Git Bash 命令行工具：

在 Windows 环境下，建议使用 GitHub 桌面管理工具自带的 git bash 命令行工具，正常下载安装即可。

下载及安装完成后，git bash 的具体使用方法可参考相关图示。

注：虽然也可以使用系统自带的 cmd 终端，但 git bash 在功能和使用便捷性上更具优势。

安装 Node.js：

前往 Node.js 中文官网下载安装包，按照提示进行傻瓜式安装即可，无特殊注意事项。

Node.js 安装包已内置 npm（包管理工具），无需额外单独安装 npm。

注意：Node.js 版本需选择 4.0 以上版本，避免因版本过低导致兼容性问题。

打开命令行工具（任意文件夹路径），输入命令 node -v 和 npm -v，若显示相应版本号，则表明安装成功。

配置淘宝镜像：

关于 cnpm（淘宝镜像）的相关说明：

1. 这是一个完整的 npmjs.org 镜像，用于同步 npm 上的模块。
2. cnpm 的同步频率为 10 分钟（新发布的模块可能存在滞后性，同步需要时间，若急需可使用 npm）。
3. 安装 cnpm 的原因在于：npm 服务器位于国外，导致模块安装速度极慢。
4. cnpm 的作用是将 npm 上的模块同步至国内服务器，从而显著提高模块安装速度。
5. 安装淘宝镜像后，cnpm 和 npm 命令行均可正常使用，两者互不冲突。

安装方法：打开命令行工具，输入以下命令：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm 使用方法：

$ cnpm install [name]

在安装模块时，将 npm 替换为 cnpm 即可。国内许多开发者使用 cnpm，建议安装。附：淘宝镜像网址。

安装 Webpack：

安装方法：打开命令行工具，输入以下命令：

npm install webpack -g

安装成功后，输入 webpack -v，若显示相应版本号，则说明安装成功。

安装 Vue CLI 脚手架构建工具：

安装方法：进行全局安装，在任意文件夹路径下，输入以下命令：

npm install vue-cli -g

安装完成后，输入命令 vue -V 查看版本号，若显示相应版本号，即为安装成功：

注：此处 V 为大写。

Vue 项目初始化与运行

通过 Vue CLI 初始化 Vue 项目：

完成上述步骤后，脚手架所需的环境和工具均已就绪，接下来可使用 vue-cli 初始化项目。

1. 新建一个名为 vuetext（项目名）的文件夹用于存放项目。

在新建文件夹的上一级目录中右键打开命令行工具，输入以下命令：

vue init webpack vuetext1(项目名)

注：项目名不能包含大写字母，也不能使用中文。

命令解析：该命令用于初始化一个 Vue 项目，其中 webpack 为构建工具，表明项目基于 Webpack。vuetext1 为项目文件夹名称，该文件夹将自动生成在指定目录中。

2. 以下是脚手架的安装过程（安装步骤解析见下方图片）。

Vue CLI 初始化项目选项配置详细解析：

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
 Target directory exists. Continue? (Y/n) y--------------------找到了vuetext1这个目录是否要继续
Target directory exists. Continue? Yes
Project name (vuetext1)---------------------项目的名称（默认是文件夹的名称），ps：项目的名称不能有大写，不能有中文，否则会报错
 Project name vuetext1
Project description (A Vue.js project)---------------------项目描述，可以自己写
 Project description A Vue.js project
 Author (OBKoro1)---------------------项目创建者
 Author OBKoro1 
 Vue build (Use arrow keys)--------------------选择打包方式，有两种方式（runtime和standalone），使用默认即可
 Vue build standalone
 Install vue-router? (Y/n) y--------------------是否安装路由，一般都要安装
 Install vue-router? Yes
 Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好
 Use ESLint to lint your code? No
 Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
 Setup unit tests with Karma + Mocha? Yes
 Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
 Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd vuetext1)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目

文档地址：https://vuejs-templates.github.io/webpack，此为 Vue CLI 官方文档。

此时 vuetext1 项目已初步初始化完成，内部包含部分文件，但目前尚无法直接运行。

3. 如何运行项目：

1. 进入刚才创建的 vuetext1 项目文件夹，在该文件夹内右键运行 Git Bash 命令行工具。
2. 安装项目依赖。命令行：npm install。在项目初始化阶段已生成 package.json 文件，直接执行 npm install 安装所需依赖，否则项目无法正常运行。

创建完成的“vuetext1”目录结构如下：

项目创建完成后的目录结构展示。

至此，我们已成功使用 vue-cli 初始化了一个 Vue 项目。

启动项目：

在 vuetext1 目录下运行命令 npm run dev 以启动服务。服务启动成功后，浏览器将默认打开一个“欢迎页面”，如下图所示。

Vue CLI 项目成功启动界面。

注意：默认服务启动于本地 8080 端口，请确保该端口未被其他程序占用。当有其他 Vue 项目运行时，可使用 Ctrl+C 中断运行。