Vue实战之Vue CLI 脚手架

---

Vue 实战

十三、Vue CLI 脚手架

1、什么是CLI

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

2、什么是 Vue CLI <====>(maven 项目构建工具)

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

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

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

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

3、Vue CLI 优势

• 通过 vue-cli 搭建交互式的项目脚手架
• 通过 @vue/cli + @vue/cli-service-global快速开始零配置原型开发（因为已经自带了vue的环境以及vuerouter的环境）
• 一个运行时依赖(@vue/cli-service），该依赖：
  • 基于 vue cli 开发的系统 项目中的依赖可以随时进行升级 只需一条命令联网帮我们更新升级
  • 基于 webpack 构建，并带有合理的默认配置；webpack 前端打包工具 index.html vue组件 用户组件 学生组件 … 路由 dist目录
  • 可以通过项目内的配置文件进行配置：cli 项目配置文件 添加
  • 可以通过插件进行扩展：cli项目里
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。webpack 前端打包工具 index.html 组件 聚合 将es6语法自动转为es5语法 node.js js服务器 支持热部署
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面（Vue cli 3.x vue cli 2.x(本次使用)）

4、Vue CLI安装

使用 Vue cli 脚手架前提：基于node.js环境，所以要安装node.js环境

（1）环境准备

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

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

# 3.验证nodejs环境是否成功
	node -v 

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

# 5.配置淘宝镜像
	  npm config set registry https://registry.npm.taobao.org
	  npm config get registry

# 6.配置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"

# 7.验证nodejs环境配置
	C:\Users\Administrator>npm config ls
	; cli configs
	metrics-registry = "https://registry.npmmirror.com/"
	scope = ""
	user-agent = "npm/6.14.8 node/v14.15.1 win32 x64"
	
	; userconfig C:\Users\Administrator\.npmrc
	cache = "D:\\nodereps\\npm-cache"
	home = "https://npm.taobao.org"
	prefix = "D:\\nodereps\\npm_global"
	registry = "https://registry.npmmirror.com/"
	
	; builtin config undefined
	
	; node bin location = C:\Program Files\nodejs\node.exe
	; cwd = C:\Users\Administrator
	; HOME = C:\Users\Administrator
	; "npm config ls -l" to show all defaults.

• 如下图所示：

（2）安装脚手架

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

# 1.Vue Cli官方网站
	https://cli.vuejs.org/zh/guide/

# 2.安装vue Cli
	npm install -g vue-cli

5、通过vue cli脚手架创建第一个项目

• 配置 nodejs 本地仓库环境变量
  • 配置 nodejs 本地仓库环境变量：C:\myDocument\nodejs\node_global
  • 测试命令能否执行：vue init

• 选择一个项目目录：vue init webpack 项目名

• 如何运行在项目的根目录中执行
  • cd hello
  • npm run dev

• 如何访问项目 ：http://localhost:8080

• 如下图所示

（1）vue cli 创建的项目目录结构说明

• build------------->用来使用webpack打包使用build依赖 构建一些依赖文件

• config------------->用来做整个项目配置目录 主要用来对开发、测试环境进行配置

• node_modules------------->用来管理项目中使用的依赖

• src------------->用来书写vue源代码【重点】

  • assets------>用来存放静态资源【重点】
  • components------>用来书写Vue组件【重点】
  • router------>用来配置项目中路由【重点】
  • App.vue------>项目中根组件【重点】相当于<div id="app">部分 有三部分组成：<template>、<script>、<style>
  • main.js------>项目中主入口【重点】相当于new Vue({})实例部分

• static------------->其它静态

• .babelrc------------->将es6语法转为es5运行

• .editorconfig------------->项目编辑配置

• .gitignore------------->git版本控制忽略文件

• .postcssrc.js------------->源码相关js

• index.html------------->项目主页

• package.json------------->类似于pom.xml 依赖管理 jQuery 不建议手动修改

• package-lock.json------------->对package.json加锁

• README.md------------->项目说明文件

• 如下图所示

（2）如何开发Vue脚手架

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

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

6、在脚手架中使用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)=>{})

7、Vue Cli脚手架项目部署

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

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

• 如下图所示

（1）第一种方式

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

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

（2）第二种方式

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

代码仓库