文章目录
一、安装 Vue CLI二、构建前端项目2.1.创建一个基于 webpack 模板的项目2.2. 安装图解2.3. 项目结构总览2.4. 运行项目2.5. 浏览器验证项目GitHub 地址：/Antabot/White-Jotter
在动手操作之前，我希望大家已经清楚什么是 “前后端分离” ，什么是 “单页面应用” 。
简单地说：
前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
附上 Vue 的官方教程：
/v2/guide/
一、安装 Vue CLI
因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，node.js官网：/en/download/，首页即可下载。
下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入node -v，检查是否安装成功。
如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入npm -v查看版本号
输入npm -g install npm，将 npm 更新至最新版本。
之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。
安装 cnpm 的命令为 ：
npm install -g cnpm --registry=https://registry.
完成后就可以使用 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. 安装图解
项目初始化完成！！！
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，大工告成！
