Vue-cli_maven是类似于脚手架吗-CSDN博客

本文链接：https://blog.csdn.net/icu13996/article/details/113806311

Vue-Cli(脚手架)

vueCli官方网址

核心思想：一切皆组件

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的基本项目结构

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”)
1. 使用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脚手架的直接部署目录