vue

• vue是一个前端框架，是在前后端分离这样的业务场景诞生的。vue是基于node.js来运行的。vue有2.0、3.0版本。vue它的底层是html、css、js，它是一套构建用户界面的渐进式（javascript）框架。
• 渐进式：没有太多的限制的一个js框架。就是一开始使用这个框架，你不需要完全的掌握它的全部的功能或者特性。

安装node.js

下载 | Node.js 中文网 官⽹

1、双击安装包，⼀直点击下⼀步。

2、点击change按钮，更换到⾃⼰的指定安装位置，点击下⼀步（不修改默认位置也是可以的 ）。

3、⼀直点击下⼀步，最后安装成功即可。

安装完成后：控制台输入 node -v ---- 查看是否安裝成功

构建⼀个vue项⽬

控制台输⼊指令：

npm init vue@latest

这⼀指令将会安装并执⾏ create-vue，它是 Vue 官⽅的项⽬脚⼿架⼯具 如果不确定是否要开启某个功能，你可以直接按下回⻋键选择 No。在项⽬被创建后，通过以下步骤安装依赖并启动开发服务器：

cd

命令自动下载这些依赖。

npm install

运行vue项目

npm run dev

当你准备将应⽤发布到⽣产环境时，请运⾏：

npm run build

1、VUE工程结构

node_model：项目依赖文件夹，存放的是一些vue功能依赖的模块。

public：存放的是一些公共的静态资源文件。

*src：程序员自己存放的源代码（自己编写的代码）

assets：存放静态资源文件。js.css等

components：组件：存放的是一些公共的组件（非路由组件）

App.vue：vue的页面文件，默认vue项目启动后访问的页面。

*main.js：程序的入口文件。vue项目启动最先执行的文件。

package.json：包管理工具，记录项目引用的第三方资源库

package-lock.json：记录第三方资源库的来源。

2、vue页面组成

主要由三个部分组成

 ————编写逻辑代码、js代码

————编写页面代码。html代码

————编写样式代码，css代码块

3、VUE生命周期

指的是vue界面从创建到销毁的一个过程。（vue实例创建、初始化、运行、销毁）

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法（钩子函数）。

4、VUE基础语法

声明数据、声明函数（方法）

​


​

5、组件

• 组件其实就是一个vue页面，它与vue普通页面是完全相同的。

• 唯一区别：组件可以被多个地方进行调用。普通页面只能调用一次。

• 组件提高import进行导入。import时只需要指明组件的名称和路径即可。

• 为了区分组件和普通界面，在vue项目里组件一般放在components文件夹下。而普通页面一般放在view或者是pages文件夹下。

写一个组件vue界面

​

​

导入组件

​


​

6、路由

路由指的是在vue项目里具体呈现给用户的是哪一个页面，那么这个时候就是通过路由来进行控制的。注意：在vue项目里，很多时候路由都是嵌套在App.vue页面的，然后只需要更新app.vue里具体显示页面的部分即可。路由也是一种局部刷新，达到页面的跳转效果。

安装路由

命令：

cnpm install --save vue-router（所谓的渐进式）

save表示把路由的依赖添加到package.json里。

"dependencies": {"vue": "^3.2.45","vue-router": "^4.1.6"
},

7、npm和cnpm命令的区别和联系

两者都是用于node插件的，安装、卸载、以及依赖管理nmp这个命令安装插件时都是从国外的服务器进行下载的，经常受网络影响，可能会出现异常，所以很多时候我们也是用cnpm来进行下载。cnpm是由淘宝团队提供的镜像地址进行下载的。国内的淘宝镜像称为cnpm。两者语法类似。在国内使用cnpm下载效率高于npm。

8、路由的代码书写

在app.vue中通过显示路由内容。

简单来说就是通过url显示⻚⾯的功能。

1、新建pages包，在这个包里新建两个vue界面（Login.vue和Register.vue）路由传参

​

​


​

​

2、新建一个router路由目录（包），在这个目录下新建index.js和routes.js文件

配置index.js

//用来配置路由管理器
//导入路由管理器——路由里自带的
import{createRouter,createWebHistory} from "vue-router";
//导入自己写的路由
//import后跟的是文件中的元素，如果是vue页面，那么就是页面的别名
// from跟的是文件的路径
//调用时该文件里的元素需要导出export default '元素'
import routes from "./routes";
​
//配置路由管理器
const router = createRouter({//配置路由不需要带用#号history:createWebHistory(),routes
});
//导出后其它组件可以调用
export default router;
//用来配置路由信息的
const routes = [{//给当前路由起别名name: "Login",//配置访问路径path: "/login",//配置当前页面的具体路径component: () => import('../pages/Login.vue')},{//给当前路由起别名name: "Register",//配置访问路径path: "/register",//配置当前页面的具体路径component: () => import('../pages/Register.vue')}
]
// const text = [{
//     name:'xxx',age:10
// }]
​
//导出后其它组件可以调用
export default routes;
//如果需要多个导出，使用括号拼成数组格式
// export default {routes,text};

3、main.js 前端的配置文件。在main.js配置路由

import { createApp } from 'vue'
import App from './App.vue'
​
import './assets/main.css'
​
//启用路由
//导入路由管理器的配置
import router from "./router/index";
//导入axios
import axios from "axios";
​
//当前主页面里启动/使用路由配置：createApp(App).use(router)
//createApp
//create 表示创建一个实例
//App是application这个单词的缩写，表示应用这个实例
//mount('#app')：表示将一个id为app的节点挂载到vue上
createApp(App).use(router).use(axios).mount('#app')

4、接下来写主界面App.vue

​


​

9、在vue路由里$router和$route的区别

$router对象它是全局路由对象的实例。是router构造方法的实例。是它可以控制整个路由的页面跳转。

$route对象表示当前的路由对象信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。这个对象一般用来获取当前跳转路由的相关参数。

10、axios

Vue里，通常使用axios向服务器发出AJAX请求。

Axios，可以工作于浏览器里，也可以在node.js使用。

主要功能有：

1、发送ajax请求到服务器端，服务器端响应数据到浏览器端

2、自动转换JSON

在vue中使⽤axios

vue中使⽤axios需要安装：npm install axios

11、跨域问题

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域是指客户端浏览器发送http请求时，由于浏览器自身存在的安全机制（同源策略），浏览器会检查请求中的（协议，域名（ip），端口号）。判断当前请求的（协议，域名（ip），端口号）和当前页面的（协议，域名（ip），端口号）是否相同。如果不相同，浏览器会对当前的请求进行限制。这个限制叫做跨域。

• 只要协议、域名、端口里有一种不一样那么都会存在跨域。

• 一般跨域问题常出现在前后端分离的系统里。而且服务器之间不存在跨域问题。

axios解决跨域问题

1、使用配置代理的方式解决。

因为浏览器同源策略机制，前后端分离后客户端请求服务端的数据时，会存在跨域问题。而服务器和服务器之间是可以相互请求数据的，是没有跨域的概念的，也就是说我们可以配置一个代理的服务器，由这个代理服务器收到客户端请求，将请求转发给另一个服务器，然后把请求出来的数据返回到代理服务器里，再由代理服务器返回数据给我们的客户端。这样就实现了跨域访问数据。

Vue3.0解决⽅案：vite.config.js中进⾏配置一个代理服务器：

import { fileURLToPath, URL } from 'node:url'
​
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},//配置服务和代理server:{//配置本地端口port:8000,//配置代理信息proxy:{//配置请求映射路径：只要是以/api开头的请求都使用下面得配置信息'/api':{//配置目标服务器地址target:'http://localhost:8088',// 允许跨域changeOrigin: true,//url重写rewrite:(path)=>path.replace(/^\/api/,'')}}}
})
​
/*
rewrite 叫做请求url重写：配置代理之后客户端向服务器发送请求
（地址：目标服务器+映射地址）http:localhost:8088/api/user/login
代理服务器最终请求得地址为：http:localhost:8088/user/login*/

2、注解@CrossOrigin解决跨域问题

服务端通过在controller控制器的class类上配置注解@CrossOrigin来解决跨域问题。

组件和页面的区别：

1、组件其实就是一个vue的页面，它跟vue普通页面是完全相同的。

2、唯一区别是，组件可以被多个地方进行调用。而普通页面只能调用一次。

3、在vue项目里，组件一般放在components文件夹下。而普通页面一般放在pages文件夹下，或者view文件夹下。

4、页面是直接和URL对应，或者说是和“大”URL对应的，里面不做具体的功能，而是放各种组件，负责组件之间的关联关系。

5、组件负责实现具体的功能。页面包括组件。

12、VUE双向绑定

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

双向绑定是指当数据模型数据发生变化时，页面展示的数据会随之发生变化，而如果页面中的数据发生变化时，绑定的模型数据也随之发生变化。

Element-UI

Element-Ul是饿了么前端团队推出的⼀款基于Vue.js 的桌⾯端UI框架。⼿机端有对应框架是Mint UI Vue框架：它是对js的封装，Element-UI 它是基于Vue的框架，它封装了css样式，我们使⽤Vue需要样 式的时候就使⽤它。 丰富的组件，⾃定义主题，国际化。 提供友好的⽂档和 demo，维护成本⼩ ⽀持 npm ⽅式

安装使用

官⽹： 一个 Vue 3 UI 框架 | Element Plus

下载：

Vue使⽤element-ui 需要使⽤element-plus

npm install element-plus --save

cnpm install element-plus --save

配置： 在main.js里导入，并且use，挂载

//引入elementui-plus
import elementUI from 'element-plus'
//引入elementui-plus得样式
import 'element-plus/dist/index.css' // 样式依赖
//引入elementui-plus里的图标
import * as ElIcons from '@element-plus/icons-vue' // 引⼊图标
​
const app = createApp(NewApp);
​
// createApp(App).use(router).use(elementUI).mount('#app')
​
//遍历添加图标组件
for (const icon in ElIcons){app.component(icon,ElIcons[icon])
}
//挂载
app.use(router).use(elementUI).mount('#app')

elementUI的布局

这是布局得头部
导航栏
嵌套1
嵌套2

主要按钮成功按钮信息按钮警告按钮危险按钮

SearchUpload

男女

打篮球踢足球玩游戏敲代码增加按钮
删除按钮
查询按钮
修改按钮

复选框的动态产生

{{lesson.lessonName}}
​
studyArray: [],
lessonArray: [{id:1,lessonName:'JavaWeb'},{id:2,lessonName:'SpringBoot'},{id:3,lessonName:'Mybatis'}]