一、什么是CLI?

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。

二、 什么是Vue CLI ？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。

Vue CLI 2.X官方文档地址

三、 Vue CLI的优势

• 通过 vue-cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级;
  • 基于 webpack 构建，并带有合理的默认配置； webpack 前端打包工具 index.html vue组件 用户组件 学生组件 … 路由 dist目录
  • 可以通过项目内的配置文件进行配置； cli 项目配置文件 添加
  • 可以通过插件进行扩展。 cli 项目里
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。 webpack打包工具===>dist目录 nodejs 服务器(tomcat java) 热部署插件 npm包
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

四、 Vue CLI的安装

1、环境准备

• 下载nodejs nodejs下载地址

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录
mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

• 配置nodejs环境变量

1.windows系统:
      计算上右键属性——> 高级属性 ——>环境变量 添加如下配置:
      NODE_HOME= nodejs安装目录
      PATH = xxxx;%NODE_HOME%
2.macos 系统
      推荐使用.pkg安装直接配置node环境

• 验证nodejs环境是否成功node -v
  
• npm介绍

node package mangager    nodejs包管理工具    前端主流技术    npm 进行统一管理
maven    管理java后端依赖    远程仓库(中心仓库)    阿里云镜像
npm    管理前端系统依赖    远程仓库(中心仓库)    配置淘宝镜像

• 配置淘宝镜像(命令行中执行)

npm config set registry https://registry.npm.taobao.org
npm config get registry

• 配置npm下载依赖位置

windows:
		npm config set cache "D:\nodereps\npm-cache"
		npm config set prefix "D:\nodereps\npm_global"
mac os:
	 	npm config set cache "/Users/chenyannan/dev/nodereps"
		npm config set prefix "/Users/chenyannan/dev/nodereps"

• 验证nodejs环境配置npm config ls
  

2、安装脚手架

• 卸载脚手架

npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

• 安装vue Cli

npm install -g vue-cli

3、第一个vue脚手架项目

• 创建vue脚手架第一个项目

vue init webpack 项目名

• 创建第一个项目
  
• 如何运行在项目的根目录中执行

npm start  或者   npm run dev

• 如何访问项目

http://localhost:8081    

• Vue Cli中项目开发方式

注意: 一切皆组件 一个组件中 js代码 html代码 css样式
1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

五、 在脚手架中使用axios

1、安装axios

npm install axios --save

2、在main.js中引入axios

import axios from 'axios';
Vue.prototype.$http=axios;

3、使用axios

在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) 
					 this.$http.post("url").then((res)=>{})

六、 Vue Cli脚手架项目部署

1、在项目根目录中执行如下命令:

npm run build

注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行。

2、打包之后当前项目中变化

在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录。