构建一个
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 端口启动，如果端口有占用，会自动调整端口。打开浏览器输入：
http://localhost:8080，会看到构建的项目的主页：
4、目录结构
使用编辑器打开(推荐使用
VSCode
