小白如何用vue脚手架搭建vue项目-详细步骤解读

突然热血来潮，实操了一把vue脚手架搭建全新vue项目，现将详细步骤贴出（审核不通过也是醉了），富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善

一.node环境安装。
用vue-cli构建的项目是以node.js为基础的，可以理解为node.js是vue项目再构建时需要用到的环境。无论是本地serve还是打包编译都与其有密切关系，总体说node.js为前端工程化提供了必要条件。之前看到过vue.js、webpack实现、node.js三者的关系：vue.js工程化=>webpack实现=>node.js(webpack基础)

1.下载地址：https://nodejs.org/en/
2.检查node环境安装是否成功：npm包管理器是集成在node中的，所以直接输入npm -v 就能查看到版本信息，node同样如此

温馨提示：node的版本尽量高点，个人建议v8.9或者v10.0.0版本亲测好用，否则会出现不兼容情况很麻烦滴···
3.使用node安装依赖时访问的是~~~（发布不出去，哭唧唧：富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善），或者由于网速原因导致下载失败，小编使用的是dl（富强 民主 文明 和谐 自由 平等 公正 法制 爱国 敬业 诚信 友善）访问下载，当然也可以使用淘宝镜像代理：http://npm.taobao.org/，输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

···接下来就是重头戏了···

二.搭建vue项目环境

1.全局安装vue-cli （输入：npm install --global vue-cli）

2.接下来就是进入你的项目目录中，创建一个基于webpack模板的新项目：vue init webpack+项目名

.我的项目放在了E盘下的Demo文件夹中，进入步骤都会8，我也贴出来：dir可以看到你该盘下的所有文件

ok,进入到项目目录中后，执行vue init webpack+项目名命令：

解释说明：
Vue build： 打包方式，回车即可；

Project name：项目名称；

Project description：项目描述；

Author：作者；

Install vue-router ： 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ： 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ： 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ： 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
　　　　
3.根据提示操作即可：进入项目–cd vue-demo，启动项目–npm run dev

4.我们的目录文件，至此就创建成功

5.启动成功效果图

三.vue项目目录讲解
我们的vue项目文件目录如上图所示，对主要部分解释说明。

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── build.js                # 生产环境构建脚本
|   └── check-versions.js  		# 检查npm、node.js
|   └── utils.js 				# 构建相关工具方法
|	└── vue-loader.conf.js		# 配置了css加载器以及编译css之后自动添加前缀
|   └── webpack.base.conf.js	# webpack的基本配置
|	└── webpack.dev.conf.js		# webpack开发环境配置
| 	└── webpack.prod.conf.js 	# webpack生产环境配置
├── config/                     
│   ├── index.js                # 项目核心配置（项目配置文件）
│   └── dev.env.js				# 开发环境变量
| 	└── prod.env.js				# 生产环境变量
├ ── node_module/               #项目中安装的依赖模块（加载的项目依赖模块）
   ── src/						# 这里是我们的主要开发目录，基本上要做的事情都在这个模块里边，主要包含了目录文件
│   ├── main.js                 # 程序入口文件（入口js文件）
│   ├── App.vue                 # 程序入口vue组件，是根组件
│   ├── router					# 前端路由，我们需要配置的路由路径写在index.js文件里
│   ├── components/             # 组件目录，我们写的组件就放在这个目录里（可封装我们的公共组件）
│   │   └── ...
│   └── assets/                 # 资源文件夹，放置一些图片或者公共js、公共css。这里的资源会被webpack构建
│       └── ...
├── static/                     # 纯静态资源 ，如图片、字体等(直接拷贝到dist/static/里面)。不会被webpack构建
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # 入口模板文件（首页入口文件，可以添加一些meta信息等）
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息（npm包配置文件，定义一些项目npm脚本、依赖包等信息） 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。

可以开始我们的vue项目啦—自由发挥，小编的vue项目将会在后面贴出来···，可以稍稍关注哦！