废话不多说，直入正题！

本文内容：

1. 系统环境
2. node.js环境 / npm管理工具
3. Vue环境
4. Vue CLI：Vue自己的脚手架工具，说白了就是它自己的管理工具，简单、实用、方便、必备！
5. 创建Vue项目

（一）系统环境

作者使用Macbook进行开发，当然Windows也一样，Vue对各种操作系统的兼容性都很好。

（二）安装node.js环境 / npm管理工具

Vue使用npm包管理工具,安装node.js环境就可以自动拥有npm工具了

直接百度node.js，找到官网下载最新的安装包，直接无脑安装即可。
安装完成后查看版本：

$ node -v
v11.10.1

node.js安装完成后，你的系统就可以使用npm包管理工具了，查看npm版本

$ npm -v
6.8.0

（三）安装Vue环境

有了node.js后即可以方便的使用npm安装Vue了
Vue的官网有详细的安装步骤，简单方便
Vue官方安装教程

$ npm install vue

（四）安装Vue CLI

Vue官网也有详细的安装步骤

Vue CLI官方安装教程

$ npm install -g @vue/cli

（五）创建Vue项目

使用Vue CLI可以很方便的创建Vue项目

1. 输入命令

$ vue create vuedemo

2. 回车后出现菜单，第一个选项是使用默认设置，第二个是手动配置，我选择“手动配置”

   
   选择配置方式

3. 回车后进入下一步，选择需要安装的组件。

   
   组件选择

• Babel：javascript转译器，将各种高级js转换成浏览器能理解的代码。
• TypeScript： JavaScript 的一个超集，扩展了 JavaScript 的语法。
• Progressive Web App (PWA) Support：好像是增强App体验的工具，没用过，不多解释。
• Router：Vue自己的页面路由器。
• Vuex：Vue自己的状态管理工具，可以记缓存。
• CSS Pre-processors：CSS预处理工具，如Sass Less。
• Linter / Formatter：代码检测工具，可以自动检查代码错误。
• Unit Testing：单元测试工具。
• E2E Testing：端到端测试，没用过，不多解释。
  我的选择如上图所示。
  3.回车后进入router配置
  选择是否使用路由的history模式，这个模式可以去掉路由地址中的‘#’，默认选择就可以了。
  Vue Router配置
  4.回车后进入lint配置
  默认选择第一项
  Lint配置
  5.回车后继续lint配置
  Lint配置
  6.选择配置文件格式
  我选择使用package.json
  配置文件选择
  7.回车后进行最后确认
  最后确认
  8.回车后开始安装，Vue CLI会自动下载安装需要的组件
  安装成功
  9.启动项目

$ cd vuedemo/
$ npm run serve

项目启动成功后如图所示：

项目启动成功
10.项目页面预览
Vue项目创建后会自动生成Demo页面
示例页面

11.查看项目结构

项目文件结构

至此，Vue的环境已经搭建成功！