vue-cli 两种创建项目的方法

0. 依赖安装 （全局）

根据vue官方文档说明，首先得安装node.js,因为vue依赖于node的npm的管理工具来实现

0.1 第一步，先安装node.js：下载好node.js后点击安装，一路下一步就行，如果中途出现错误信息2503或2502的一般情况下（我遇到的情况）是因为权限不足，需要以管理员的身份打开CMD

输入 node -v 出现版本号，说明安装完成。

node -v 

0.2 第二步： 安装npm

vue是依赖npm工具来管理，虽然node自带npm，但是不是最新版本，可以输入 npm -v，看一下，
所以接下来我们来安装npm，输入命令:

npm install - g npm

或者使用淘宝cnpm镜像

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

安装成功后输入：npm -v
如果看到版本号，说明安装成功

0.3 vue-cli 脚手架 安装

cnpm install vue-cli -g      //全局安装 vue-cli

查看vue-cli是否成功：

1.初始化项目的方法

1.1 手动创建项目：

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

vue init webpack my-project-name

• 第二步：
  确认创建项目后，后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等

• 第三步：
  生成目录如下：
  

• 第四步：安装cpnm依赖
  进入到项目中，一定要进入刚刚新创建的项目里，输入命令

cnpm install 

• 第五步：启动项目

 cnpm run dev

http://localhost:8080/，打开浏览器，输入访问地址，看到页面

利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构，如下：
目录结构:

1.2图形化创建项目：

第一步：创建文件夹，启动ui界面
输入命令：

mkdir vue-ui
cd vue-ui
vue ui

注意：cmd无法识别vue ui命令

vue -h(这是查看vue说明的在项目看有没有ui这个命令)

如果你那里面没有这个ui 的话，是你的cil版本低建议升级下版本
点下面的Node.js

之后输入：

cnpm i -g @vue/cli

完成后用 vue -V ，查看版本

如果成功识别 vue ui，请忽略上面步奏
成功界面如下：

第二步：开始创建项目
在浏览器里打开：http://localhost:8000

第三步：


第四步：填写项目名

第五步：选择一个预设 ；点击创建项目

第六步：添加插件

第七步：项目依赖管理

第八步：项目配置管理

第九步：项目任务管理