vue-cli工具

查看node版本：

node -v

查看npm版本：

npm -v

快速创建工程的两种方法

安装vue cli工具

npm install -g @vue/cli

查看vue cli的版本

vue --version

第一种 创建方式 vue create

首先，进入要创建工程的所在目录

cd /thinker/vue

使用vue create 项目名称创建项目

vue create hello-thinker

回车后，会出现cli工具的一些选项

如果使用default选项，则会创建默认选项的工程，而我们选择Manually select features（手动选项）；

选择后会出现许多如下选项：

首先会安装一些配套的开发组件，如Router（路由组件）、Vuex（状态控制的vuex的组件）、CSS（css的预编译组件）等等、而我们选择最常用的几个；

回车后显示，是否要使用历史；选择y；

选第一个即可

平时写代码时，有一些规则让我们的代码写的更优美

Lint on save 在保存的时候对代码进行检查
Lint and fix on commit 在提交一个更新的时候去做检查

选择默认的配置

是否将其保存为将来项目的预置
建议选择n

按照刚才的选项安装一些插件依赖，形成我们所需要的项目，就在刚才新建的那个目录下面

这种情况下，就说明项目已经创建成功

cd hello-thinker

进入到项目目录中

npm run serve

运行此项目

项目运行后，提示项目已经运行到localhsot:8080这个端口

打开localhost:8080见上图 就可以得到一个vue的项目了

第二种 创建方式 vue ui

vue ui

运行 vue ui命令后，出现上图所示域名链接，打开后即可看到下图所示页面

点击创建→在此创建新项目

依次填写所需信息




刚才的配置会保存成一个预设的名字，后面创建项目的时候可使用这个预设快速的构建工程化项目

保存预设并创建项目这个过程得到是项目文件目录和文件名
创建成功后显示如下页面：

可点击左侧“任务”→“serve”→“运行”

运行成功后，点击“输出”；如下图所示：

按照所示链接打开后，见如下图所示页面：

工程化项目的目录

打开刚使用命令行和ui工具形成的工程目录有如下所示文件：