Vue 项目搭建

安装 Node.js

安装：

推荐阅读：Windows安装 Node.js

检测：

打开目标文件夹（本文示例：C:\Users\xxx\Desktop\vue_project\xxxx>）在终端中依次运行 node -v 和 npm -v，其中，npm 在安装 node 时会自动安装。若两者均可查看到版本，说明安装成功，如下图所示：

若安装失败：请使用 npm cache clean 清理缓存后重新安装。

---

以下所有内容，均可在 VS Code 中操作，原因是其自带终端，可以直接使用 Windows 命令行相关指令；本文相关操作均使用 VS Code 在项目所在文件夹中操作。

安装 VUE-CLI¹

1. 全局安装 vue-cli：npm install --global vue-cli；
2. 使用 vue -V 查看安装是否成功（V 为大写）。
   

---

项目生成

1. 创建一个基于 webpack² 模板的项目：vue init webpack project_name（project_name 为自己项目名称）

2. 其余项目都可自己选择弄，本人配置如下图所示：
   

3. 在项目所在文件夹中启动项目：npm run dev
   

4. 启动：在浏览器地址中输入 running here 后的地址，则会出现下图，证明启动成功。
   

---

写在最后

本文中使用的 CLI 版本较老，新版推荐阅读：介绍 | Vue CLI 。

---

1. CLI 是 Vue 官方提供的命令行工具，可用于快速搭建大型单页应用； ↩︎

2. project_name 为自己项目的名字，Webpack 是一个开源的前端打包工具，推荐阅读：webpack 中文文档 ↩︎