当前位置: article > 正文

框架技术 ---- SPA和Vue的组件化开发_vue和spa

作者：凡人多烦事01 | 2024-02-08 10:23:01

踩

vue和spa

Vue框架

Vue3基础：组件化开发

前面简单介绍了vue的两个特性：数据驱动视图，双向数据绑定；分别就是使用插值表达式或者v-model来操作，并且分享了vue2的过滤器，在vue3中直接采用方法调用或者计算属性的方式来操作即可；还有各种事件修饰符，v-model修饰符和按键修饰符

而页面的一

单页面应用程序SPA

single page application 单页面应用程序SPA，指的是一个web网站只有唯一的一个HTML页面，所有的功能和交互都在这唯一的一个页面完成；单页面应用程序将所有的功能局限在一个web页面中，只是在该页面初始化的时候加载响应的资源(HTML，JavaScript和CSS)

一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或者跳转，而是利用JavaScript动态变换HTML的内容，实现页面与用户的交互【只有一个html网页】

良好的交互体验
- SPA的内容改变不需要重新加载整个页面（全局刷新）
- 获取的数据通过AJAX异步实现
- 没有页面之间的跳转，不会出现白屏
前后端分离
- 后端专注于API接口，更容易实现API接口的复用
- 前传专注于页面的渲染，有利于前端工程化
减轻服务器压力
- 服务器只提供数据，不负责页面的合成和逻辑的处理，吞吐能力提高

SPA缺点

首屏加载慢
- 路由懒加载，代码压缩，CDN加速，网络传输压缩
不利于SEO（搜索优化）Search Engine Optimization
- 可以使用SSR服务器端渲染

上面分析了这么多SPA项目的优缺点，那么如何创建一个SPA项目呢？这里提供两种方案

基于Vite创建SPA项目：只是支持Vue3.x，不是基于webpack，运行速度快，功能小而巧，不建议企业开发使用 -----> 会慢慢变强
基于vue-cli创建：都支持，基于webpack，运行速度较慢，功能大而全，建议企业开发的时候使用【高版本变为了@vue】

Vite基本使用

Vite仅支持vue3.x，想要使用vite来快速建立一个vue项目，可以运行如下命令

npm init vite-app XXX     //这里建议使用英文

cd  XXXX     //打开项目

npm  install  //下载相关的依赖包

npm run dev   //执行dev脚本，打包运行程序
1
2
3
4
5
6
7

创建项目之后装包，npm run dev就可以将项目给跑起来

PS D:\Vueprogramm> npm init vite-app vueTest
Need to install the following packages:
  create-vite-app
Ok to proceed? (y)
npm WARN deprecated create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app` instead.
Scaffolding project in D:\Vueprogramm\vueTest...

Done. Now run:

  cd vueTest
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

PS D:\Vueprogramm> cd vueTest
PS D:\Vueprogramm\vueTest> npm install

added 285 packages in 1m
PS D:\Vueprogramm\vueTest> npm run dev

> vueTest@0.0.0 dev
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Network:  http://192.*.56.1:3000/
  > Network:  http://10.*.206.29:3000/
  > Local:    http://localhost:3000/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里成功将项目在网页上运行，打开地址访问即可

请添加图片描述

项目目录结构

使用HBudilerX打开项目

node_modules ：第三方的依赖包
public ：公共的静态资源目录 ----- 页面导航上面的小图标就放在这里

<link rel="icon" href="/cfeng.ico" /> <!-- 使用link rel为图标icon，加上href就可以显示 -->
这里的ico的位置一定是在public下面，也就是是公共的资源； 所以普通的项目如果不处理是没有小图标的
1
2

src ：项目的源代码目录（开发者写的所有的代码都要放在这个目录下）
- assets ：存放项目的所有的静态资源文件（.css、.less）等
- components ：存放项目中所有的自定义组件
- App.vue ：项目的根组件
- index.css ：全局样式表文件
- main.js ：整个项目的打包文件的入口【之前的webpack类似的index.js】
.gitigonore ： Git的忽略文件
index.html ： SPA单页面应用程序的唯一的HTML页面
package.json 项目的包管理配置文件

vite项目的运行流程

在工程化的项目中，vue所发挥的功能很easy ：通过main.js将App.vue渲染到index.html的指定区域中

其中：

App.vue用来编写待渲染的模板结构

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

//所有的模板文件都要使用template标签来定义，模板文件中的内容就是之后会通过main.js将其放入到index.html的控制的el区域中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

index.html需要预留一个el区域【被vue对象控制】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/cfeng.ico" /> <!-- 使用link rel为图标icon，加上href就可以显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

<!-- 这里可以明显看到预留了一个被vue控制的div -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

main.js把App.vue渲染到index.html的el区域中

vue3.x的vue对象的创建和2.x不同，这点在之前已经分析过，

从vue中按需导入createApp函数【函数作用：创建vue的SPA实例】单页面应用程序
导入待渲染的App组件
调用那个createApp()函数，返回值为spa实例，【前面说的vue对象:happy:】，用常量spa_app接收，同时把App组件作为参数传递给create函数，表示将App渲染到el区域
调用spa_app实例的mout方法，指定vue实际控制的区域

//这里就是之前我们手动写的script脚本
//导入createApp函数，创建spa实例
import { createApp } from 'vue'
//导入待渲染的App组件
import App from './App.vue'
//导入样式表模块,这里应该使用的loader
import './index.css'

//创建实例并渲染APP到指定的el区域
createApp(App).mount('#app')

/*
 之前没有定义常量接收spa实例，直接Vue.createApp(),并且没有接收组件来渲染
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14

组件化开发思想

组件化开发：根据封装的思想，把页面上可以重用的部分封装为组件，从而方便项目的开发和维护【比如把轮播图封装为一个组件，需要用到时候就行】 — ES6模块化；比如http://www.ibootstrap.cn/展示的效果就是组件化的思想

组件化开发的好处：

提高了前端代码的复用性和灵活型
提升了代码的开发效率和后期的可维护性

Vue中的组件化开发
vue是一个支持组件化开发的框架，vue中组件的后缀名为.vue，App.vue就是一个根组件

vue组件构成

每一个.vue的组件都是3个部分构成，分别是：

template -> 组件的模板结构
script -> 组件的JavaScript行为
style -> 组件的样式

每一个组件必须含有template模板结构，但是script行为和style样式是可选的，如果不需要美化，就可以省略

template结点

vue规定：每个组件对应的模板结构，都需要定义到< template> 结点中

<template>
	<!-- 当前组件的DOM结构，需要定义到template标签的内容 -->
</template>
1
2
3

注意： template 是vue提供的容器标签，只是起到包裹性质的作用，不会被渲染成真正的DOM元素！！【template标签只是一个包裹作用，不是DOM的标签】也就是只要通过main.js渲染到el区域中才会生效

但是在template结点中，支持使用之前的vue指令，辅助渲染当前的DOM结构【因为本质上里面的DOM结点都会出现在el区域称为html页面的结点】

<template>
	<h1>这是一个APP的自定义组件</h1>
	<!-- 使用{{}}插值表达式 -->
	<p>生成一个随机数： {{(Math.random()*10).toFixed(3)}}</p>
	<!-- 使用v-bind属性绑定指令 -->
	<p :title="new Date().toLocaleDateString()">和Cfeng一起学习vue3</p>
	<!-- 使用v-on实现事件绑定 -->
	<button @click= "console.log('Hello')">事件绑定</button>
</template>
1
2
3
4
5
6
7
8
9

在vue2.x版本中，< template> 结点内的DOM结点只是支持单个根结点，也即是，template中最外层【最高层】只能由一个根节点，多个就会报错

<template>
	<div> <!-- 最外层的根节点，vue2中支持一个根节点 -->
        <h1>.......</h1>
        <h2> </h2>
    </div>
</template>
1
2
3
4
5
6

在vue3.x中，支持定义多个根结点

<template>
    <h1>.......</h1>
     <h2> </h2>
</template>
1
2
3
4

script结点

vue规定：组件内的script结点是可选的，可以在script结点中封装组件的JavaScript业务逻辑

<script>
	//组件相关的data数据，methods方法，都需要定义到export default所导出的对象中【默认导出】
    export default{}
</script>
1
2
3
4

script默认导出的对象，可以有如下的属性【结点】

name :可以通过name为当前组件自定义一个名称【首字母大写】，使用vue-tools调试的时候，可以清晰的看到是某一个组件【方便调试】
data ： vue组件渲染期间需要用到的数据，就定义到data中【vue的dom结点中可以通过vue指定使用data数据，和之前的是相同的】,和之前相同，还是闭包的形式【在组件中，不能直接指向数据，会报错，必须return一个对象】

data() {
    return {
      count: 0
    }
1
2
3
4

methods ：组件的事件处理函数，必须定义到methods结点

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
	  str: 'Cfeng, hello'
    }
  },
  methods:{
	  addNum(){
		  this.count ++;
	  }
  }
}

//行间进行事件绑定的时候，其中可以是methods中的方法的名称，还可以是一个JavaScript表达式，比如count++; flag = !flag；必须要这种对数值进行变化操作，但是console，alert等语句不行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

props：属性【类似于java的变量】，放置的变量，props接收的属性值不可以直接修改，要想修改就要通过data中定义变量接收props中的数据，然后修改，优先级props > data【下面声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】