Vue-Cli(脚手架)
核心思想:一切皆组件
1、 什么是CLI
- 命令行界面:command-line interface
1.1什么是Vue-CLI
- vue的命令行接口
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
使用Vue脚手架之后我们开发的页面将是一个完整的系统
1.2 Vue-CLI的优点
-
通过
@vue/cli
实现的交互式的项目脚手架(不用再去下载对应的js与css资源) -
只需要通过命令的方式下载相关的相关依赖(类似Maven管理依赖)
-
一个运行时依赖 (
@vue/cli-service
),该依赖:- 可升级;
- 基于 webpack 构建,并带有合理的默认配置(可修改默认的配置文件达到自己想要的项目环境)
- 可以通过项目内的配置文件进行配置
- 可以通过插件进行扩展(vue v-charts,elementui)
- 一个丰富的官方插件集合,集成了前端生态中最好的工具(服务器node js,vue+vueRouter前后端分离+webpackyarn)
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面
Vue-CLI类似于Maven!!!!!!
webpack前端的打包方式类似于后端的jar,war打包
编译好的项目源码,可直接部署到服务器上使用
1.3 前后端对比
-
node.js:用js写的前端服务器==>tomcat:用java写的后端服务器
-
VueCLI:前端脚手架==>Maven:类似与后端的快速构建工具
-
Npm:管理前端依赖==>Maven:管理后端依赖(都有中心仓库)
-
Npm与Maven都需要配置阿里的镜像
# 配置淘宝镜像 npm config set registry https://registry.npm.taobao.org # 检查当前镜像 npm config get registry
2.VueCLI安装
需要有nodejs环境
2.1 npm介绍
- npm(node package mangager)==>nodejs的包管理工具
- 前端主流技术依赖,都可以用npm进行管理,类似于Maven管理依赖
2.2 VueCLi脚手架使用
学习的是2版本的脚手架
2.2.1 安装Vue_CLI
npm install -g vue-cli
- 安装的脚手架在 :E:\Nodejs\node_modules\vue-cli(我自己的仓库)
2.3 第一个vue-CLi项目
vue init webpack 项目名
2.3.1 Vue_CLI的基本项目结构
2.3.2 Vue-CLI项目结构解析
3.Vue Cli中项目开发方式
一切皆组件 :一个组件中 js代码,html代码,css样式
- Vue—CLI开发方式是在项目中开发一个一个组件对应一个业务功能模块
- 最后将多个组件组合到一起形成一个前端系统
- 使用Vue-CLI进行开发时不再书写html,编写的是一个个组件
- 打包时Vue—CLI会将组件编译成运行的html文件
.java —— .class .vue ——.html
4. 如何使用Vue-CLI脚手架进行开发
- App.vue暴露组件,main.js引入App组件,index.html作为全局的入口
App.vue组件中只放入路由
5.Vue-Hello脚手架了解项目
6.Users Vue前后端分离项目
6.1 组件
- 有自己的数据 data
- 有自己的方法 methods
- 有生命周期 create
- 可以引用其它组件 component
6.2 使用anxios
- 安装anxios
npm install axios --save-dev
- 配置main.js中引入axios
import axios from 'axios'
Vue.prototype.$http = axios;
3. 修改内部的$http为axios
-
$http.get(“url”)/post(“url”)
- 使用axios
# 在需要发送异步请求的位置
this.$http.get("url").then((res)=>{})
this.$http.post("url").then((res)=>{})
7.springboot后端编写
在controller内解决跨域请求的注解
@CrossOrigin
8.打包部署
8.1 前后端分离项目部署:江南一点雨的视频
1.在项目下运行
npm run build
注:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
具有服务器功能:nodejs,nginx(直接将dist文件放在html文件下),tomcat(拷贝dist文件到resource/static下面)
2.打包完成后目录变化
在打包之后,项目中出现dist目录,也就是vue脚手架的直接部署目录
注意修改index.html里面的css与js路径,否则无法获取资源
8.2.前后端部署
8.2.1 前后端一起部署
- 前端打包成静态文件过后,拷贝到后端项目中,然后部署后端项目
- 拷贝前端打包过后的dist文件夹到后端的resource/static目录下面
- webstorm 的命令行里输入命令: npm run build 生成dist文件
- 将dist文件目录文件放在static下面,index.html放在templates下面,直接运行即可
8.2.2 前后端分离部署
- 前端nginx部署(直接在nginx进行端口转发即可)
- 后端直接运行jar包
也可也用docker一起来做
两种方案都不用考虑跨域问题,跨域只在本地测试时,在controller上进行配置
写的有点乱,估计只有自己看的明白,如果前后端都学了,这个应该能够看懂