3.Vue(组件+路由+跨域请求)

Arran阿蓝

于 2024-08-10 17:16:47 发布

阅读量796

点赞数 7

分类专栏： Vue框架文章标签： vue.js vue elementui

本文链接：https://blog.csdn.net/m0_61086522/article/details/141093445

版权

Vue框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue

一.组件component

1.概念

web开发中, 页面会划分成多个板块,把不同板块拆分成独立组件, 需要相同的板块直接调用其组件使用,避免代码重复开发。

以组件的形式划分不同的功能模块,根据需要复用组件

2.组件使用

1)适用步骤

模板内容,定义到标签中

<template>
   <div>
  	模板内容
   </div>
</template>
<style scoped>
img {
    width: 100%;
}
</style>

<script>标签中中定义变量, 绑定组件模板

局部组件: 只能在一个 Vue 管理的元素中使用，其他Vue 管理元素要使用的话只能在写一遍

<script>
 //2.导入组件
import firstMilky from './FirstMilky.vue';
export default {
   data(){
     return{
       变量
     }
   },
   methods:{
     
   },
  //3.注册组件: 局部组件和全局组件
    component:{
      //局部组件
      firstMilky
    }
}
</script>

全局组件: 全局组件可以在任何挂载点中调用

类似我们在main.js文件中导入的ElementUI全局组件

// 引入ElementUI,并全局配置

import ElementUI from ‘element-ui’;

Vue.use(ElementUI);

<script>
 //2.导入组件
  // 导入路由的两种方式
import MyRouter from '@/components/MyRouter.vue'
//  2.懒加载方式: 页面不复杂时使用,导入时不加载|不加载到vue内容,使用才加载,优缺点: 节约内存,使用时需要时间去加载 
const about = () => import('../views/AboutView.vue')
import firstMilky from './FirstMilky.vue';
export default {
   data(){
     return{
       变量
     }
   },
   methods:{
     
   },
  //3.注册组件: 局部组件和全局组件
  //全局组件
   Vue.component(firstMilky)
}
</script>

css标签中修改组件样式
```
<style scoped>

</style>
```

注册完组件,可以使用组件名当标签使用

//如果不是注册的全局组件,而是局部组件,哪里import导入哪里使用 
<firstMilky></firstMilky>

//注意: 按(>+enter快捷生成模板内容)
<template>
    <div>
      //定义组件内容,必须被一个父级标签包容
      //举例: 单独一个h3标签是不行的
        <h3>第一杯奶茶</h3>
    </div>
</template>

<script>
export default {
  //**data** 必须是一个函数，不再是一个对象
		data(){
      return{
        变量
      }
    },
  methods:{
    事件>>发送请求
  },
  created(){
    页面加载执行的指令
 },
  component:{
    注册的组件
  },
  
}
</script>

<style scoped>
  组件样式修改
</style>

1)使用注意点:

组件的命名使用『全小写』。如果涉及多个单词，可使用『串行命名法』：xxx-yyy-zzz

二.路由router

1.页面切换的方式

多页面应有：(multil page application)

多个页面的跳转,html的地址发生改变(地址栏发生改变)

每个公共资源（js,css）每次都要重新加载, 适用开发难度低的
单页面应用(singe page application)：

只有一个web页面的应用，仅靠局部刷新加载不同的界面; html架构是由多个组件组成, 界面更换就是组件的来回替换
- 特点是公共资源只会加载一次，也是web网站主流的模式
- 界面是通过url来定位的，单页面中从头到尾html的地址是不变化的
- 开发难度较大，通常需要专门的框架来实现（vue）

2.路由定义

路由其实就是根据不同请求的路径来确定显示不同内容的行为

1)vue-router 适用步骤

引入相关的库文件

添加路由链接

<div id="app">
  <!--to指向路由的定义的path路径-->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <hr/>
    <!-- VueRouter 描点, 注册的组件显示的位置 -->
    <router-view></router-view>  
 </div>

跳转路由的两种方式:

  // 跳转路由的两种方式:
        //  1.router-link
        //  2.this.$router.push(
        //    { path: '/goodsList' }
        // )

其中设置默认路由的方式

// 1.设置默认路由: 设置 / 加载根路径时加载路由出口
  // {path: '/',
  // name: 'home',
  // component: HomeView}
  // 2.设置默认路由: 路由重定向,  redirect指向路由出口,/MyRouter出口定义为/
  // {
  //   path: '/',
  //   redirect: '/MyRouter'
  // },
  // {
  //   // 设置默认路由,路径根路径
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },

添加路由填充位

元素就是负责在页面上标注出一个公共区域，大家轮流使用这个位置，展示各自的内容。

定义路由组件

//根据地址栏不同路径,跳转不同组件
const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: StoreIndex,
    //子路由
    children: [
      {
        path: '/bookListt',
        component: BookList
      },
      {
        path: '/',
        redirect: '/bookListt'
      },
      {
        path: '/bookDetail',
        component: BookDetail
      }
    ],
  },
]

配置路由规则并创建路由实例
把路由挂载到 Vue 根实例中

三.脚手架简介

是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程

1.安装相关包

安装vue-cli4

//卸载
npm uninstall -g @vue/cli
//安装
npm install -g @vue/cli

安装淘宝镜

npm config set registry https://registry.npmmirror.com

2.创建vue-cli4项目

打开自己使用的vue项目包进入cmd创建项目

创建vue项目
```
vue create 项目名
```
- 第一项和第二项（ default ...）表示的是使用默认配置创建 vue 项目。
- 第三项（ Manually ...）表示手动对 vue 项目的各方面进行设置(手动配置项目)

手动配置项目

Babel：支持使用 babel 做转义。
TypeScript：支持使用 TypeScript 书写源码。
Progressive Web App (PWA) Support PWA：支持。
Router：支持 vue-router。
Vuex：支持 vuex。
CSS Pre-processors：支持 CSS 预处理器。
Linter / Formatter：支持代码风格检查和格式化。
Unit Testing：支持单元测试。
E2E Testing： 支持 E2E 测试。

选择版本

选择vue版本为2，不要选3，不要选3

选择界面

如果在功能选择界面中选中了 Router，那么我们接下来会看到如下界面（如果功能界面没有选择 Router，就会跳过这个界面）：

在这里插入图片描述

在这个界面中，vue-cli 在询问你，对于 Router 你是否以它的 history 模式使用它？默认值是 Yes 。

如果不使用 Router 的 history 模式，那自然就是 hash 模式。这里我们输入 n，表示使用 Router 的 hash 模式。

功能配置是否分开存放独立文件

在设置完你所要使用的各个功能的设置之后（例如，上面的 Router 的 history / hash 模式的设置），我们会看到下面界面：

在这个界面中，vue-cli 是在询问你：是将所有的配置都放在 pacakge.json 一个文件中，还是将各个功能的配置分开存放在独立的文件中？

选择第一项：分开存放。
保留创建的模板,保留则设置名

这是 vue-cli 创建 vue 项目的最后一个界面：

在这里，vue-cli 是在询问你：是否将你的这些设置保留下来作为默认的项目设置的模板。默认值是 N 。

我们输入 N ，或者直接按回车确认进入安装界面：
打开项目启动项目
```
npm run serve  
```

四.打开的创建的项目(解析项目文件结构)

在这里插入图片描述

#	说明
node_modules 目录	项目所依赖的包的存放目录（封装webpack 依赖包）
public 目录	存放项目所需的静态资源文件目录
src 目录	存放项目的源码文件的目录
babel.config.js 文件	babel 配置文件
package.json 文件	整个项目的配置文件
src/main.js 文件	整个项目的入口文件，并且在这里引入全局使用的 .vue、.css 文件

1.项目文件说明

assets 静态资源 (css、 js 、 image 、字体图标)
views 放置组件页面
components 放置组件页面中嵌套的组件
App.vue 根组件 => 指定路由出口
- 脚手架之后,所有的组件都将渲染到 app.vue 中
app 中的 #app 还是 index.html 中的 #app, app.vue 中的会覆盖前者，可以通过分别添加 title 属性验证一下
路由出口要写在 app.vue 组件模板中

main.js

入口 js 文件
作用 : 创建 vue 实例,导入其他组件并挂在到 vue 实例上
Vue.config.productionTip = false 不要打印提示

检测 no new : 见后面的检测警告

new Vue({
  el: '#app', // 目标显示
  router,   // 挂载路由
  components: { App }, // 注册组件 App
  template: '<App/>' // 模板显示组件 app
})

vue.config.js 文件

以下配置是针对跨域问题配置的

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8081,// 前端端口号,默认8080,如果被占用会默认生成别的端口号
    proxy: {
      "/api": {  //1：api开头的请求都要求代理服务器进行转发, 给我们axiso本来发送定位请求的路径名加个前缀api/user/login
        target: 'http://127.0.0.1:8080',   // 2：要求代理服务器,发送的请求地址改为后端服务器地址
        changeOrigin: true, // 3：是否是跨域请求
        pathRewrite: {
          '^/api': '/' // 4：代理服务器转发时url修改的规则,把前缀/api改成/,就能请求后端接口了
        }
      }
    }
  }
})

2.VUE-CLI解决跨域问题

创建项目的根目录vue.config.js中配置👆

前端发送请求发给代理服务器,代理服务器转发给后台服务器;后台反响数据经由代理服务器转发给前端

解释说明跨域问题:

前端以客户端端口号发送路径请求后端服务器
后端对应接口去接受请求,
前端端口号与后端端口号不一致,则后端服务器不能接受请求
如果port一致,则报错: 端口号已被占用

五.总结

1.使用命令汇总

#0.安装vue/cli
npm install -g @vue/cli
#0.1安装淘宝镜
npm config set registry https://registry.npmmirror.com
#查看安装包是否安装成功
vue -V或--version
npm -V
#//1.打开自己的vue-cli4项目包创建项目
create vue 项目名称
#//1.启动项目
npm run serve
#//2.安装elementUI, 默认全局注册
npm i element-ui -S
#//2.1在main.js文件中引入element
import ElementUI from 'element-ui';
Vue.use(ElementUI);
#//3.安装axios包,发送axios请求
npm install axios
#//3.1在main.js文件中引入axios,并全局注册
import axios from 'axios'
Vue.prototype.$axios = axios

2.组件使用步骤

前提在main.js文件中引入项目需要相关依赖: 例如(elementUI,axios依赖)

定义组件

<template>
	<div>
    	组件内容
  </div>
</template>
<script>
export default{
  components:{
    引入的子组件名
  }
}
</script>
//scoped限制作用域
<style scoped>
  本组件的样式
</style>

导入组件

import 组件名 from './BookDetail.vue';

注册组件

局部注册

<script>
 export default {
	 components: {
        组件名
    }
} 
 </script>

全局注册

import 组件名 from './BookDetail.vue';
Vue.use(组件名)

使用组件,当标签使用可以是单标签|双标签
```
<组件名></组件名>
```

3.路由使用

创建项目时,如果手动配置项目模板注意选择router

前提在main.js文件中引入项目需要相关依赖

在项目结构文件index.js中配置(!!!注意: 嵌套的子路由使用)

//1. 导入登录login组件
import Login from '@/components/Login.vue'
//2.定义路由出口
const routes = [
//路由出口重定向
  {
    path: '/',
    redirect: '/login'
  },
    // 定义login路由出口/login
  {
    path: '/login',
    component: Login
  },
   {
    path: '/',
    component: StoreIndex,
     //StoreIndex的子路由
    children: [
      {
        path: '/bookListt',
        component: BookList
      },
      {
        path: '/',
        redirect: '/bookListt'
      },
      {
        path: '/bookDetail',
        component: BookDetail
      }
    ],
  },
  ]

路由跳转

#方式1
<router-link to="/路由出口"></router-link>
#方式2
 this.$router.push({ path: '路由出口' })

抛出锚点

 #跳转的路由,对应组件的显示区域
 <router-view />

注意:

注册组件时: components ,一个{ }可包含多个组件名
定义路由出口时: component,一个{ }只包含一个组件名,对应一个path;定义多个路由只能再起{ }

,
component: BookList
},
{
path: ‘/’,
redirect: ‘/bookListt’
},
{
path: ‘/bookDetail’,
component: BookDetail
}
],
},
]


2. 路由跳转

~~~ini
#方式1
<router-link to="/路由出口"></router-link>
#方式2
 this.$router.push({ path: '路由出口' })

抛出锚点

 #跳转的路由,对应组件的显示区域
 <router-view />

注意:

注册组件时: components ,一个{ }可包含多个组件名
定义路由出口时: component,一个{ }只包含一个组件名,对应一个path;定义多个路由只能再起{ }

Arran阿蓝

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
3.Vue(组件+路由+跨域请求)

路由其实就是根据不同请求的路径来确定显示不同内容的行为是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程#0.安装vue/cli#0.1安装淘宝镜#查看安装包是否安装成功vue -V或--versionnpm -V#//1.打开自己的vue-cli4项目包创建项目create vue 项目名称#//1.启动项目#//2.安装elementUI, 默认全局注册#//2.1在main.js文件中引入element。
复制链接

扫一扫