一、 环境配置

1.安装Node.js 下载地址为: https://nodejs.org/en/

以下操作都在命令行窗口进行

2.提高效率和下载速度，下载淘宝镜像：http://npm.taobao.org/

npm install -g cnpm –registry=https://registry.npm.taobao.org

即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

3．使用npm安装vue的脚手架：npm install –g @vue/cli

二、 搭建项目

1.打开你要存放项目的文件夹，然后召唤命令行窗口，输入以下命令

Vue create project-name ， project-name处填写项目名称

2.接下来就是项目配置的一些选项

前两个default都是默认的配置，选第三个自己配置，不然缺斤少两的，还得重新安装一些需要的模块。

常规的项目这几个应该都能满足了，就选这几个好了。

接下来就是几个配置选择的问题

1. 用vue2.0还是3.0
2. 路由模式，history还是hash
3. CSS预编译框架的选择 Sass or Less
4. 这个是Eslint的不同模式的选择，我选标准的，当然这个东西一开始挺难受的，限制了扣代码的一些习惯和标准，项目创建成功可以去配置文件中关闭。
5. 接下去全选第一个就完事了，比如eslint什么时候提醒，还有babel这些配置要单独一个文件还是混到packag.json里面
6. 最后一个问题选N吧，以后创建项目是不是都按照这样的设置去走，像我这么三心二意的是不可能选Yes的。

三、 一个比较常规的Vue项目的一些介绍

1.项目目录（项目目录可以灵活配置，只要不杂乱无章，能方便维护开发就没啥大问题）

Dist：打包后的文件夹，正常如果不去配置文件改打包出来的文件都在这里
Node_modules：项目的一些模块和插件
Public：vue-cli4后的项目首页都放在这里了，不放在根目录
Src：绝大部分的开发都是在这个文件夹里面进行
Api：请求接口统一存放，然后按需导出
Assets：静态资源，图片字体音频等
Components：放组件的地方
Layout：页面排版的格式组件
Mixin：将一些常用的功能代码模块写成mixin，按需导入
Plugins：自定义插件
Router：vue-router，路由文件
Store： vuex的相关文件
Styles：通用样式
Utils：工具类js文件，比如request.js，封装请求模块
Views：页面组件，也是组件的一种，稍微做了个区分
App.vue：项目的vue根文件，切换页面其实就在这里反复横跳

2、经常要用到的配置文件：vue.config.js（这个新建项目是没有的，要自己创建，这个是cli版本升级后的一个比较明显的改变，等同于之前版本的webpack配置文件）正常情况下这个文件是必须的。至于还有其他一些参数可以去vue的官方文档查：https://cli.vuejs.org/zh/

3.简单介绍一个vue文件

4.常用的命令

在Vue的项目文件夹中打开命令窗口输入

在本地运行项目：npm run serve
打包项目：npm run build
下载插件：npm i XXX –s