由于笔者使用的是Mac，因此就Mac系统的vue环境进行配置，使用的编辑器是vs code，由于前端需求，就自己配置过程，写下此配置手册，以及在创建时遇到的问题，以及插件推荐。
准备工作
1.安装vs code
vs code仅为一个轻量级的编辑器，可以安装相应插件，提高代码编写效率，后文有推荐，安装其他编辑器也可以，可以点击vs code选择相应的PC平台安装，笔者为Mac端版本，具体下载速度受网络影响。
2.安装Homebrew
Homebrew是Mac上的包管理工具，功能强大具体以后专门写篇博客讲解。
如果你没有安装Homebrew，可以复制以下代码，在终端中执行安装。
1 | /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" |
安装完成后输入brew -v,如果出现版本信息即为安装成功。
3.安装node.js
完成了Homebrew的安装，只需要通过brew命令即可安装node.js输入以下命令。或者选择去nodejs官网下载安装最新LTS版本，按步骤安装即可。
1 | brew install nodejs |
安装完成后输入node -v,如果出现版本信息即为安装成功。同时相应的也会安装npm,Node.js自带了软件包管理工具npm，可以使用npm安装各种插件，输入npm -v出现相应的版本信息即为安装完成。
4.安装cnpm（淘宝镜像）
由于npm服务器在国外，下载速度较慢，为了得到更好的体验，我们选择国内镜像源，在终端输入以下代码,
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
安装完成后输入cnpm -v,如果出现版本信息即为安装成功。
5.安装webpack
webpack是当前前端最热门的前端资源模块化管理和打包工具，输入以下命令安装：
1 | cnpm install webpack -g |
安装完成后输入webpack -v,如果出现版本信息即为安装成功。
6.安装vue脚手架（自动搭建vue项目框架的工具）
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦,输入以下命令安装：
1 | sudo cnpm install -g vue-cli |
安装完成后输入vue -V(为大写的V),如果出现版本信息即为安装成功。
7.创建vue项目
为了方便起见我在桌面建立了一个test文件夹mkdir test,然后cd test,输入以下命令创建项目（此处若出现问题，请参考后文解决措施）：
1 | vue init webpack-simple myProject |
然后按步骤输入项目信息，注意Project name不支持大写字母为项目名，项目创建好后，它也给出了提示信息，继续操作即可。
8.安装组件
每一个项目都有一个package.json文件，里面有很多组件信息，使用npm install将按照package.json安装所需要的组件放在生成的node_modules文件夹中，项目下的每一个文件中都可以通过import引入node_modules的组件来加以使用,首先输入cd myProject进行项目目录中，然后输入以下命令:
1 | npm install |
9.启动项目
完成以上步骤后,输入以下命令启动项目：
1 | npm run dev |
若在网站上出现以下内容，即为安装成功
若运行过程出现问题请检查上述步骤是否正确，后文中给出了部分问题的解决方案，可能对您有帮助。
vs code插件推荐
1.Vetur —— 语法高亮、智能感知、Emmet等包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
2.EsLint —— 语法纠错
3.Auto Close Tag —— 自动闭合HTML/XML标签
4.Bracket Pair Colorizer —— 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
可能出现的错误：
vue init项目构建时，一直处于 “downloading template” 状态下。
发现是在下载模版时无法连接到github的问题，属于网络问题，解决方案有以下两种：
1. 修改github的host
1. 在终端输入以下命令：
1 | sudo vi /etc/hosts |
2. 查找github IP地址
在ip地址查询网站,搜索github.com,查询相应ip地址，此时笔者的ip显示为：
1 | IP Address:140.82.114.3 |
注意：ip地址会随着时间更换，建议每次都查询一遍
3. 通过vi编辑器，添加以下内容：
1 | # Github |
完成后保存文件，vi的使用可参考vi教程,然后重新进行vue init尝试。
2. 手动下载webpack-simple
如果方法一未能解决问题，可以使用方法二，具体步骤如下：
1. 手动下载模版
需要手动下载webpack-simple模板 ，进入到github项目地址（可能因为网络原因无法访问，请多次尝试），选择webpack-simple下载到本地。
2. 查找相应路径
将下载下来的 webpack-simple 解压，放到 /Users/apple/.vue-templates/webpack-simple目录中，如果不确定自己电脑中具体需要将解压的文件放置在什么位置，可以先运行vue init webpack-simple projectName --offline命令，会提示如下错误 vue-cli · Local template "/Users/apple/.vue-templates/webpack-simple" not found.错误信息中的 /Users/apple/.vue-templates/webpack-simple 便是需要存放webpack-simple的位置。
3. 创建相应文件夹
一般情况下，进入第2步中的时候，会发现 /Users/apple/.vue-templates/webpack-simple该目录找不到，而且通过鼠标创建 .vue-templates文件夹是不成功的，这个时候需要通过命令mkdir .vue-templates指令来创建。
4. 放入文件夹
将 webpack-simple 文件夹顺利放到 /Users/apple/.vue-templates/webpack-simple 之后，在命令行执行vue init webpack-simple projectName --offline命令就可以创建 vue 项目了。
