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

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

vue cli ：vue 命令行接口 通过命令行方式输入命令方式使用 vue cli 仅仅提供了几个命令 让我们创建一个脚手架项目

vue cli ：vue脚手架 日后在开发过程中通过 vue cli 提供的命令创建一个vue项目，这个vue项目存在脚手架规范，基于这个规范去开发变得更加灵活

官方定义：vue.js 开发的标准工具

• 基于vue cli 开发的系统（项目） 称之为完整系统
• 基于 vue cli 开发的系统 创建完项目之后就可以直接进行vue的开发 （因为已经自带了vue的环境以及vuerouter的环境）
• 基于 vue cli 开发的系统 项目中的依赖可以随时进行升级 只需一条命令联网帮我们更新升级
• 基于 webpack 构建 并带有合理的默认配置 打包工具 webpack index.html 聚合单页面和各种开发组件
• 一个丰富的官方插件集合，集成了前端生态中最好的工具 webpack index.html 组件 聚合 将es6语法自动转为es5语法 node.js js服务器 支持热部署
• 一套完全图形化的创建和管理 vue.js 项目的用户界面（Vue cli 3.x vue cli 2.x(本次使用)）

• 通过 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 脚手架前提：基于node.js环境，所以要安装node.js环境

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

node -v

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

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

• windows:
  • npm config set cache "C:\myDocument\nodejs\node_cache"
  • npm config set prefix "C:\myDocument\nodejs\node_global"
• mac os:
  • npm config set cache "/Users/chenyannan/dev/nodereps"
  • npm config set prefix "/Users/chenyannan/dev/nodereps"

• npm config ls

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

• npm install -g @vue/cli 这个安装3.x
• npm install -g vue-cli 这个安装2.x

• build------------->用来使用webpack打包使用build依赖 构建一些依赖文件
• config------------->用来做整个项目配置目录 主要用来对开发、测试环境进行配置
• node_modules------------->用来管理项目中使用的依赖
• src------------->用来书写vue源代码【重点】
• static------------->其它静态
  • assets------>用来存放静态资源【重点】
  • components------>用来书写Vue组件【重点】
  • router------>用来配置项目中路由【重点】
  • App.vue------>项目中根组件【重点】相当于<div id="app">部分 有三部分组成：<template>、<script>、<style>
  • main.js------>项目中主入口【重点】相当于new Vue({})实例部分
• .babelrc------------->将es6语法转为es5运行
• .editorconfig------------->项目编辑配置
• .gitignore------------->git版本控制忽略文件
• .postcssrc.js------------->源码相关js
• index.html------------->项目主页
• package.json------------->类似与pom.xml 依赖管理 jQuery 不建议手动修改
• package-lock.json------------->对package.json加锁
• README.md------------->项目说明文件

在 vue cli 项目中，一切皆组件 一个组件中 js代码、html代码、css代码

1. vue cli 开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
2. 日后在使用 vue cli 进行开发时不再书写html，编写的是一个个组件（组件后缀 .vue 结尾的文件），日后在打包时 vue cli 会将组件进行编译成运行的html文件。

# 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)=>{})

# 1.在项目根目录中执行如下命令:
  npm run build
  注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化
  在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

AnyWhere 是一款随启随用的静态文件服务器，可以随时随地将你的当前目录变成一个静态文件服务器的根目录。

安装：
npm install anywhere -g

使用：

$ anywhere
// or with port
$ anywhere -p 8000
// or start it but silent(don't open browser)
$ anywhere -s
// or with hostname
$ anywhere -h localhost -p 8888
// or with folder
$ anywhere -d ~/git/anywhere
// or enable html5 history
$ anywhere -f /index.html

执行命令后，默认浏览器将为您自动打开主页。

在docker中启动nginx，将生成的dest文件夹部署到nginx中即可。