1.Vue CLI脚手架
1.1什么是CLI
命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面**（CUI）。
1.2什么是Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue脚手架之后开发之后的页面是一个完整的系统。
1.3VueCLI优势
通过
@vue/cli实现的交互式的项目脚手架。通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。vuejs vuerouter axios(一条命令)一个运行时依赖 (
@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
webpack项目打包的方式，编译好的项目源码，部署到服务器上直接使用。 - 可以通过项目内的配置文件进行配置； 修改配置文件，达到自己想要的环境。
- 可以通过插件进行扩展。 vue v-charts ……
一个丰富的官方插件集合，集成了前端生态中最好的工具。 Nodejs(tomcat) Vue VueRouter webpack yarn
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
1.4Vue CLI安装
1.环境准备
# 1.下载nodejs
http://nodejs.cn/download/
windows .msi(exe) .zip（压缩包）直接解压路径
mac .pkg(安装包)自动配置 .tar.gz（压缩包)
# 2.nodejs环境配置
windows系统：
1.计算机属性---》 高级属性 ----》 环境变量 添加如下配置：
NODE_HOME = nodejs安装目录
PATH = xxxx;%NODE_HOME%/bin
mac系统：
pkg 自动配置
# 3.检查安装
node -v
# 4.npm的介绍
node package mangager nodejs包的管理工具 前端主流技术都可以用npm 进行同意管理
maven 管理java后端依赖 远程仓库 阿里云镜像
npm 管理前端系统依赖 远程仓库(中心仓库，在国外) 淘宝镜像
# 5.配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 6配置后可通过下面方式来验证是否成功
npm config get registry
或 npm info express
# 7.配置npm下载依赖的位置 (不推荐配置 配置后mac输入vue会报错)
查看默认位置：npm config ls
npm config set cache /Users/sunyun/Documents/nodereps/...
npm config set prefix /Users/sunyun/Documents/nodereps/...
2.安装脚手架
# 0.删除旧的版本的脚手架
npm uninstall -g @vue/cli //3版本
num uninstall -g vue-cli //2版本
# 1.Vue CLI的安装
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--
# 2.安装Vue CLI
npm install -g vue-cli //2版本的脚手架
# 3. mac 提示Vue not found
exoprt PATH="$PATH:/Users/sunyun/Documents/nodereps/npm_global/bin/vue"
Last login: Tue Oct 27 13:15:56 on ttys000
sunyun@MacBook-Pro ~ % npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this
/Users/sunyun/Documents/nodereps/npm_global/bin/vue -> /Users/sunyun/Documents/nodereps/npm_global/lib/node_modules/vue-cli/bin/vue
/Users/sunyun/Documents/nodereps/npm_global/bin/vue-init -> /Users/sunyun/Documents/nodereps/npm_global/lib/node_modules/vue-cli/bin/vue-init
/Users/sunyun/Documents/nodereps/npm_global/bin/vue-list -> /Users/sunyun/Documents/nodereps/npm_global/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
updated 1 package in 6.825s
sunyun@MacBook-Pro ~ %
3.第一个Vue CLI脚手架项目
# 1.创建vue脚手架的第一个项目
vue init webpack hello(项目名)
# 2.创建第一个项目
sunyun@MacBook-Pro Vue_CLI % vue init webpack hello
? Project name hello
? Project description A Vue.js project
? Author 风儿继续吹 <1031364436@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "hello"
# Project initialization finished!
# ========================
To get started:
cd hello
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
sunyun@MacBook-Pro Vue_CLI %
# 3.如何运行
cd 到项目名 package.json 同级目录下 (根目录)
npm start
Your application is running here: http://localhost:8080
# 4.vue cli 中项目的开发方式
注意⚠️：一切皆组件，一个组件 js代码 html代码 css样式
1. VueCli开发方式是在项目中开发一个一个组件的对应一个业务功能模块，日后可以将多个组件组合一起形成一个前端系 统
2.日后在使用不饿cli开发时候，不再书写html，编写的是一个组件，日后打包成vue时，cli会将vue编译成运行的html
1.5vue CLI的第一个入门案例
2.在脚手架中安装axios
2.1安装axios
# 1.安装axios
npm install axios --save-dev
# 2.配置main.js中引入axios
import axios from 'axios'
Vue.prototype.$http=axios; //修改内部的$http为axios
注意：$http 是vue内部的异步，没有axios好
# 3.使用axios
在需要发异步请求的地方： this.$http.get("url").then((res))=>{})
this.$http.post("url").then((res))=>{})
3.Vue CLI脚手架项目的打包和部署
# 1.在项目的根目录，就是有package.json文件的同级目录，执行如下命令
npm run build
b
注意：vue cli 打包的项目必须在服务器上运行，不能直接双击运行
# 2.大包之后变化
在打包后，项目中出现dist目录，就是vue cli 的部署目录
