vue cli的使用总结

什么是CLI

CLI（command-line interface，命令行界面）是指可在用户提示符下键入可执行指令的界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。

什么是Vue-cli?有什么优势?

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于webpack构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue cli安装

环境准备

nodejs安装

# 1 下载地址
	http://nodejs.cn/download/

# 2.配置nodejs环境变量
	下载.msi文件直接不用配置

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

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

# 5.验证
	npm config get registry
	如果出现了https://registry.npm.taobao.org/则代表配置成功

# 6.配置npm下载依赖位置
	在根目录下新建两个目录node_cache,node_global
	然后再通过
	 npm config set prefix "D:\node\node_global"
	 npm config set cache "D:\node\node_cache"
	两条命令配置依赖下载的位置

# 7.验证
	通过npm config ls命令来验证

# 8 注意
	新建的node_global要添加到环境变量path里!!!

安装脚手架

# 1 Vue cli官方网站

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

第一个vue脚手架项目

# 1 创建vue脚手架第一个项目
	vue init webpack 项目名

安装完会显示

vue cli的项目结构

# 2 运行vue cli
	npm start

结果

访问端口8080

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

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

如何开发vue脚手架

注意:在Vue cli中一切皆组件!

在脚手架中使用axios

安装axios

# 1 安装
	npm install axios --save-dev
# 2 配置
	在main.js中import axios from 'axios'
	并且添加Vue.prototype.$http=axios  //修改内部的$http为axios
# 3 使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{})	this.$http.post("url").then((res)=>{})

vue cli 脚手架项目的打包和部署

# 1 在项目的根目录中执行如下命令:
	vue run build
	注意:vue脚手架打包的项目必须在服务器上运行,不能双击运行
# 2 打包之后项目中的变化
	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录
# 3 将dist目录粘贴到springboot中的static目录下
# 4 修改index中的链接地址到本地目录下