构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置 webpack 配置文件的基本内容，大大降低了初学者构建项目的难度。这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析。
一、环境搭建
node 和 npm 是必不可少的，这里不再介绍。
1、安装 vue-cli
$ npm install -g vue-cli
检查是否安装成功：
$ vue --version 3.3.0
<!-- more -->
2、构建项目
$ vue init webpack hello-vue
初始化的过程中，会有一个交互式的选项让你选择项目的一些配置，根据项目需求选择即可。为了方便后面几篇教程的演示，可以统一选择以下选项：
? Project name hello-vue # 项目名称 ? Project description A Vue.js project # 项目描述 ? Author Deepspace <cxin1427@gmail.com> # 作者 ? Vue build standalone # 运行+编译时 ? Install vue-router? Yes # 安装 vue-router ? Use ESLint to lint your code? Yes # 使用 ESLint 作为代码规范 ? Pick an ESLint preset Airbnb # 选择 Airbnb 的代码规范 ? Set up unit tests Yes # 安装单元测试 ? Pick a test runner karma # 测试模块 ? Setup e2e tests with Nightwatch? Yes # 安装 e2e 测试 ? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，npm
构建完成之后，会提示构建成功信息：
# Project initialization finished! # ======================== To get started: cd hello-vue npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
3、启动项目
$ cd hello-vue $ npm run dev
项目默认会在 8080 端口启动，如果端口有占用，会自动调整端口。打开浏览器输入：:8080，会看到构建的项目的主页：
4、目录结构
使用编辑器打开(推荐使用 VSCode)，下面具体看看目录结构：
package.json :
{ "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" } }
在 package.json 中，根据我们在构建项目的时候的选项，有以下几个命令。
npm run dev ：项目开发阶段，项目启动的命令；
npm run lint ：使用 eslint 检查代码格式；
npm run test：单元测试和 e2e 测试；
npm run e2e : e2e 测试；
npm run build：开发完成后执行，会把我们的源代码编译成最终的发布代码，生成在项目根目录中的 dist 文件夹下（初始化项目时不会生成）。
config： 保存一些项目初始化配置。
build ：里面保存一些 webpack 的初始化配置。
index.html : 是我们的首页。index 很多时候都被预设为首页，像 index.htm，index.php 等。
src : 保存项目源代码的地方，我们下面会详细分析该文件夹里的文件。
二、代码分析
Vue 的核心架构分为两个部分：路由和组件，其实 React 也是一样的。我们在切入一个项目的时候，都是从这两个点出发。下面我们具体看看 src 文件夹。
1、入口文件
如果我们打开项目根目录下 build 目录中的 webpack.base.conf.js，会看到这样的代码(第22行)：
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, // ... }
说明我们的入口文件就是 src 目录下的 main.js 文件。看看代码：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'; import App from './App'; import router from './router'; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>', });
看看这里面做了什么事情：
引入 vue 并起名叫作 Vue
引入根目录下的 App.vue 文件(后缀名可不要)
引入 router 文件下的 index.js 文件(文件夹后没有具体的文件，默认引入的就是 index.js 文件)
通过 new 实例化 Vue 实例 ，实例化的时候声明了几个属性：
el：'#app'：意思是将所有视图放在 id 值为 app 这个 dom 元素中，也就是项目根目录下的 index.html 中的那个 div : <div></div>；
components: { App }：意思是将上面引入的 App.vue 文件的内容将以 <App/> 这样的标签写进 <div></div> 中；