文章目录
- 一、安装 Vue CLI
- 二、构建前端项目
- 2.1.创建一个基于 webpack 模板的项目
- 2.2. 安装图解
- 2.3. 项目结构总览
- 2.4. 运行项目
- 2.5. 浏览器验证
项目GitHub 地址： https://github.com/Antabot/White-Jotter
在动手操作之前，我希望大家已经清楚什么是 “前后端分离” ，什么是 “单页面应用” 。
简单地说：
前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/
一、安装 Vue CLI
因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，node.js官网：https://nodejs.org/en/download/，首页即可下载。
下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。
如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号
输入 npm -g install npm ，将 npm 更新至最新版本。
之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。
安装 cnpm 的命令为 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm 替代 npm 了，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。
之后，使用 npm install -g vue-cli 安装脚手架。
接下来，就可以搭建我们的前端项目了。
二、构建前端项目
2.1.创建一个基于 webpack 模板的项目
直接使用命令行vue init webpack wj-vue构建项目。
首先，进入到我们的工作文件夹中(我的工作空间 D:\Workspaces)，我在 D 盘新建了一个叫 Workspaces的文件夹，大家可以自行选择位置。
这里 webpack 是以 webpack 为模板指生成项目， wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。
2.2. 安装图解
| 序号 | 图解 说明 | 选择 |
|---|---|---|
| ① | 项目名叫什么(要和你的项目名保持一致)，不能大写 | 默认即可 |
| ② | 添加项目描述 | vue2.5 去哪儿app |
| ③ | 添加作者 | gb-heima <754263923@qq.com> |
| ④ | 选择编译形式 | standalone |
| ⑤ | 是否安装 vue-router工具，路由工具 | y |
| ⑥ | 是否使用ESLint对你的代码规范进行检查 | y |
| ⑦ | 选择代码检测的规范 | Standard |
| ⑧ | 是否进行单元测试 | y |
| ⑨ | test runner 测试 | y |
| ⑩ | 是否进行e2e测试 | y |
| ⑪ | 包管理使用npm还是用yarn | 默认npm即可 |
项目初始化完成！！！
2.3. 项目结构总览
可以看到 Workspace 目录下生成了项目文件夹 wj-vue，里面的结构如图
2.4. 运行项目
接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev
注：项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm install ，再执行 npm run dev
2.5. 浏览器验证
访问 http://localhost:8080，查看网页 demo，大工告成！
