使用 vue-cli 3.0 快速创建项目 （两种方法：代码方式和图形化创建项目）

前言

• vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。
• 本快速创建项目方法都是基于 node.js 和 cnpm 的基础上进行的。

安装准备

1. node.js如何安装就不在这里详说了。如何全局化安装cnpm，这里简单提一下：

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

2. 全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli 
使用 vue -V 查看版本。

第一种方法：手动创建项目

1. 安装vue-cli成功后，通过cd命令进入你想放置项目的文件夹，在命令提示窗口执行创建vue-cli工程项目的命令：

vue init webpack my-project-name

2. 确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，详见上图。安装顺利执行后会，生成如下文件目录：
3.
4. 生成文件目录后，使用 cnpm 安装依赖：

cnpm install 

5. 最后需要执行命令： npm run dev 来启动项目，启动完成后会自动弹出默认网页：
   
6. 目录结构及其对应作用
   通过vue-cli搭建一个vue项目，会自动生成一系列文件，而这些文件具体是怎样的结构、文件对应起什么作用，可以看看下面的解释：
   

第二种方法 :图形化创建项目

1. 使用命令行方式:创建文件夹，并开启可视化界面工具。

mkdir vuex
cd vuex
vue ui

2. 创建项目


3. 选择一套预设，点击创建项目按钮

4. 等待安装

5. 安装完成后

6. 可以添加插件

7. 项目依赖管理

8. 项目配置管理

9. 项目任务管理

10. 图形化创建项目就到这里了，大家根据自身需求配置属于自己的项目吧