电脑： mac

需要的东西：
node.js 环境（npm 包管理器）
vue-cli 脚手架构建工具
cnpm npm 的淘宝镜像

1、安装 node.js
（1）从 node.js 网站（https://nodejs.org/zh-cn/pkg 安装包）下载最新版的
（2）点睛 pkg 包安装
（3）进入 console，输入 node -v，显示出版本号，即表示安装成功。
node -v
v12.16.1
（4）npm 包管理器，是集成在 node 中的，所以，直接输入 npm -v，会显示 npm 的版本号
npm -v
6.13.4

2、安装 cnpm
（1）在终端输入：sudo npm install -g cnpm --registry=http://registry.npm.taobao.orgroot 权限安装），等待安装完成（用

3、安装 vue-ci
（1）在终端输入：sudo cnpm install -g vue-cli ，等待安装完成

至此，完成 vue 基础环境安装，下面使用 vue-cli 构建 vue 项目

4、用 vue-cli 构建项目
（1）进入保存项目的目录：cd ～/Document/vue-projects
（2）运行命令：vue init webpack firstVue（其中 webpack 是构建工具，first_vue 是项目名称）
ps：运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
（3）安装完成后，生成默认的 vue 项目目录结构：
（4）我们主要在 src 目录中做修改。

这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装

安装项目依赖包
（1）进入 first_vue 的项目文件夹中，运行 sudo cnpm install 命令
cd ～/Document/vue-projects/firstVue
cnpm install
（2）安装完成之后，会在的项目目录 firstVue 文件夹中多出一个 node_modules 文件夹，这里边就是项目需要的依赖包资源

安装完之后就可以运行项目了

运行项目
（1）进入 firstVue 的项目文件夹中
（2）运行命令 npm run dev
其中的 “run” 对应的是 package.json 文件中，scripts 字段中的 dev，也就是 node build/webpack.dev.conf.js 命令的一个快捷方式。
运行成功后，会显示：Your application is running here: http://localhost:8080
(3) 在浏览器输入http://localhost:8080/#/，就打开网页了

vue 项目文件功能介绍
vue 项目建立完成后，会生成这些文件夹：
README.md 项目介绍

index.html 入口页面
build 构建脚本目录
　　build-server.js 运行本地构建服务器，可以访问构建后的页面
　　build.js 生产环境构建脚本
　　dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面
　　dev-server.js 运行本地开发服务器
　　utils.js 构建相关工具方法
　　webpack.base.conf.js webpack 基础配置
　　webpack.dev.conf.js webpack 开发环境配置
　　webpack.prod.conf.js webpack 生产环境配置
config 项目配置
　　dev.env.js 开发环境配置
　　index.js 项目配置文件
　　prod.env.js 生产环境变量
　　test.env.js 测试环境变量
src 源码目录
　　main.js 入口 js 文件
　　App.vue 根组件
　　components 公共组件目录
HelloWord.vue 和 Post.vue
asserts 资源目录，这里的资源会被 webpack 构建
　　routes 前端路由
index.js
　　static 纯静态资源，不会被 webpack 构建
package.json 版本库依赖、开发者信息等等

vue 项目部署
npm run dev 命令只用做本地调试，如果要其他用户使用，需要部署到具体的服务器上，步骤如下：
（1）执行命令 npm run build 生成 dist 文件夹，然后将该目录下的文件部署到服务器（服务器如 python，tomcat，nginx）。
（2）访问 http://YourIpAddress:8000/ 可以直接在其他终端打开对应的页面。

vue 获取服务端的数据
vue 使用 axios 库来实现和服务端的交互
（1）运行命令 sudo cnpm install axios 安装 axios 库

相关技术文档
Vue 官方文档：https://cn.vuejs.org/v2/guide/
vue 入门：http://vuejs-templates.github.io/webpack/
Vue 项目运行步骤：https://segmentfault.com/a/1190000009871504
axios 前端接口请求 Client：https://www.npmjs.com/package/axios

参考文章：
（1）https://segmentfault.com/a/1190000009871504
（2）https://www.jianshu.com/p/ead7317d01ec