小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

13.Vue.js前端框架：单页Web应用_vue适合用来做前端展示的网页么

作者：小蓝xlanll | 2024-05-18 19:48:53

踩

vue适合用来做前端展示的网页么

1、单页Web应用简介

将多个组件写在同一个文件的方式适用于一些中小规模的项目。但是如果在更复杂的项目中，这种方式就会出现很多弊端。对此，Vue.js 提供了文件扩展名为 .vue 的单文件组件。单文件组件是 Vue.js 自定义的一种文件格式，一个 .vue 文件就是一个单独的组件，多个组件组合在一起就可以实现单页 Web应用。

2、webpack 简介

webpack 是一个前端资源加载和打包工具。可以将各种资源（如，JS、CSS 样式、图片等）作为模板块来使用，然后将这些模块按照一定规则进行打包处理，从而生成对应的静态资源。

webpack官方网址：https://www.webpackjs.com/concepts/

webpack 可以将多个模块转换成静态资源，减少了页面的请求。将模块进行打包处理的示意图如下图所示：
在这里插入图片描述

2.1 webpack 的安装

在安装 webpack 之前，首先需要在计算机中安装 node.js 的最新版本。node.js 可以在官网上下载。关于 node.js 的下载与安装可以参考网上教程。安装好 node.js 之后，开始实现 webpack 的安装。安装步骤如下所示：
（1）打开命令行提示窗口（建议以管理员的方法打开），对 webpack 和 webpack-cli 进行全局安装。输入如下命令：

     npm install webpack webpack-cli -g
1

注意：webpack-cli 工具用于在命令行中运行 webpack

（2）在指定路径（如 “D:\Java EE”）下创建项目文件夹 app，然后在命令提示符窗口将当前路径切换到 “D:\Java EE\app”，接下来使用 npm 命令初始化项目，输入命令如下：

     npm init
1

（3）对 webpack 进行本地安装，输入命令如下：

     npm install webpack --save-dev
1

2.2 webpack 的基本使用

1、通过一个简单的应用了解通过 webpack 命令实现打包的过程。在 app 文件夹下创建 entry.js 文件和 index.html 文件。entry.js 文件为项目的入口文件，代码如下：

document.write("Hello webpack");
1

index.html 文件的代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<script type="text/javascript" src="bundle.js"></script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10

接下来使用 webpack 命令进行打包处理，在命令提示符窗口中输入如下命令：

webpack entry.js -o bundle.js --mode=development
1

输入命令后，单击 < enter > 键，这时会编译 entry.js 文件并生成 bundle.js 文件。在浏览器中打开 index.html 文件，显示的结果如下图所示：
在这里插入图片描述
2、在 app 文件夹下创建一个 JavaScript 文件 module.js，
代码如下：

module.exports = "Hello webpack";//指定对外接口
1

对 entry.js 文件进行修改，基于 CommonJS 规范引用 module.js 文件，代码如下：

var str = require("./module.js");//应用 module.js 文件
document.write(str);
1
2

再次使用 webpack 命令进行打包处理，在浏览器中重新访问 index.html 文件，输出结果如下所示：
在这里插入图片描述

通过上述应用可以看出， webpack 从入口文件开始对依赖文件（通过 import 或 require 引入的其他文件）进行打包， webpack 会解析依赖的文件，然后将内容输出到 bundle.js 文件中。

3、loader 简介

loader 是基于 webpack 的加载器。webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的模块（文件），就需要使用 loader（加载器）进行转换。简要介绍利用 loader 如何引入 CSS 文件和图片文件。

3.1 加载 CSS 文件

如果想要在应用中添加 CSS 文件（模块），就需要使用 css-loader 和 style-loader 加载器。css-loader 加载器用于加载 CSS 文件，style-loader 加载器会将原来的 CSS 代码插入页面中的一个 < style >标签中。

在命令提示符窗口中对 css-loader 和 style-loader 进行安装，输入命令如下：

npm install css-loader style-loader --save-dev
1

安装成功后继续之前的应用。在 app 文件夹下创建一个 CSS 文件 style.css，在文件中编写 CSS 代码，为文字的大小和颜色进行设置，代码如下：

body{
	font-size: 36px;/* 设置文字大小*/
	color: red;
}
1
2
3
4

对 entry.js 文件进行修改，修改后代码如下：

require("!style-loader!css-loader!./style.css");//引用style.css文件
var str = require("./module.js");//引入module.js
document.write(str);
1
2
3

再次使用 webpack 命令进行打包处理，在浏览器中重新访问 index.html 文件，可以看到红色和放大的文本。

3.2 webpack 配置文件

在应用 webpack 进行打包操作时，除了在命令行传入参数之外，还可以通过指定的配置文件来执行。将一些编译选项放在一个配置文件中，以便于集中管理。在项目根目录下不传入参数，直接调用 webpack 命令，webpack 会默认调用项目根目录下的配置文件 webpack.config.js，该文件中的配置选项需要通过 module.exports 导出，格式如下：

 module.js.exports ={
    //配置选项
 }
1
2
3

下面介绍几个常用配置选项的含义及其使用方法。

1. mode

webpack 4 以上版本提供了 mode 配置选项，该选项用于配置开发项目使用的模式，根据指定的模式选择使用相应的内置优化。可能的值有 production（默认）、development 和 none。

production：生产模式，使用该模式打包时，webpack 会自动启用 JS Tree Sharking 和文件压缩。
development：开发模式，使用该模式打包时，webpack 会启用 NamedChunksPlugin 和 NamedModulesPlugin 插件。
none：使用该模式打包时，webpack 不会使用任何内置优化。

示例代码如下：

mode : 'development',//指定开发模式
1

2. entry

该选项用于配置要打包的入口文件。该选项指定的路径为相对于配置文件所在文件夹的路径。示例代码如下：

entry : './entry.js'
1

3. output

该选项用于配置输出信息。通过 output.path 指定打包后的文件路径，通过 output.filename 指定打包后的文件名。示例代码如下：

output :{
    path : _dirname + '/dist',//_dirname用于获取当前文件的绝对路径
    filename : 'bundle.js'
 }
1
2
3
4

4. module

该选项用于对加载的模块进行配置。通过 module.rules 指定规则数组。这些规则可以对模块应用加载器。规则是一个对象，该对象有以下几个常用属性。

test：该属性是一个正则表达式。webpack 通过它去匹配相应的文件，通常用来匹配文件的后缀。
exclude：该属性用于指定不被加载器处理的文件。
include：该属性值通常是一个路径数组，这些路径会被加载器处理。
loader：该属性用于指定应用 test 属性匹配到的文件对应的加载器，多个加载器之间使用 “!” 分隔。

示例代码如下：

modules:{
	rules:[
		test: /\.css$/, //匹配CSS文件
		loader: 'style-loader!css-loader'
	]
}
1
2
3
4
5
6

5. plugins

该选项用于配置使用的插件。使用插件可以实现一些 loader 不能完成的任务。webpack 自带了一些内置插件。要使用某个插件，需要通过 npm 对其进行安装，然后在 webpack.config.js 的plugins 选项中添加该插件的一个实例。

3.3 加载图片文件

在应用中加载图片文件需要使用 file-loader 加载器。在命令提示符窗口对 file-loader 进行安装，输入如下命令：

npm install file-loader --save-dev
1

安装完成后继续之前的应用。在项目根目录中新建 images 文件夹，并存入一张图片 b.jpg。然后对 style.css 文件进行修改，修改后的代码如下所示：

body {
	background:url(images/b.jpg) no-repeat;
}
1
2
3

修改配置文件 webpack.config.js，修改后代码如下所示：

var HtmlWebpackPlugin =require('html-webpack-plugin');//引入插件
module.exports={
	mode :'development',//指定开发模式
	//入口文件配置
	entry :'./entry.js',
	//输出配置
	output :{
		path:_dirname+'/dist',//_dirname用于获取当前文件的绝对路径
		filename:'bundle.js'//设置输出文件名
	},
	//加载器配置
	module :{ 
		rules:[
			{
				test: /\.css$/, //匹配CSS文件
				loader: 'style-loader!css-loader'
			},
			{
				test :/\.(jpg|png|gif)$/,//匹配指定格式的图片文件
				loader: 'file-loader',
				option:{
					name : '[path][name].[ext]'//生成的路径和文件名
				}
			}
		]
	},
	//插件配置
	plugins :[
		new HtmlWebpackPlugin()//使用插件
	]	
};
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
30
31

上述应用中，webpack 会首先处理入口文件 entry.js，将其所包含的依赖文件进行编译，再合并成一个 JavaScript 文件输出到 output 选项设置的路径中，然后应用 HtmlWebpackPlugin 插件将该文件通过 < script > 标签插入到 HTML 文件中，最终生成静态文件 index.html 和 bundles.js 文件。

4、单文件组件

利用 webpack 和 loader，可以将一个组件的 HTML、JavaScript 和 CSS 应用各自的标签写在一个文件中，文件的扩展名为 .vue。这样的文件即为单文件组件。webpack 和 loader 会将单文件组件中的三部分代码分别编译成可执行的代码。

注意：在应用中处理 .vue 文件需要使用 vue-loader 加载器和 vue-template-compiler 工具

通过一个简单示例来说明如何在应用中使用单文件组件。具体实现步骤如下：
（1）创建项目文件夹 myapp，在命令提示符窗口中将当前路径切换到该文件夹所在的路径，使用 npm 命令初始化项目，命令如下：

     npm init
1

（2）安装 Vue.js，命令如下：

     npm install Vue
1

（3）对 webpack 进行本地安装，命令如下：

     npm install webpack --save-dev
1

（4）安装所需的加载器和工具，命令如下：

npm install vue-loader vue-template-compiler css-loader style-loader html-webpack-plugin --save-dev
1

（5）在项目根目录下创建一个 src 文件夹，在 src 文件夹中创建 Demo.vue 文件，代码如下：

<template>
	<p>{{msg}}</p>
</template>

<script>
	export default{
		data:function(){
			return {
				msg:'你好，晓茗'
			}
		}
	}
</script>

<style scoped>
	p{
		font-size: 36px;
		text-align: center;
		color: #0000FF;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意：在默认情况下，单文件组件中的 CSS 样式是全局样式。如果需要是 CSS 样式仅仅在当前组件中生效，需要设置 < style > 标签的 scope 属性。

（6）在 src 文件夹中创建 main.js 文件，该文件作为入口文件。代码如下所示：

import Vue from 'vue' //引入 Vue.js
import Demo from './Demo.vue' //引入 Demo.vue 文件
new Vue({
	el:'app',
	render : h=>h(Demo) //渲染视图
})
1
2
3
4
5
6

（7）在项目根目录下创建配置文件 webpack.config.js，代码如下所示：

var HtmlWebpackPlugin =require('html-webpack-plugin');//引入插件
var VueLoaderPlugin =require('vue-loader/lib/plugin');
module.exports={
	mode :'development',//指定开发模式
	//入口文件配置
	entry :'./src/main.js',
	//输出配置
	output :{
		path:_dirname+'/dist',//_dirname用于获取当前文件的绝对路径
		filename:'bundle.js'//设置输出文件名
	},
	//加载器配置
	module :{ 
		rules:[
			{
				test: /\.css$/, //匹配CSS文件
				loader: 'style-loader!css-loader'
			},
			{
				test :/\.vue$/,//匹配 .vue 文件
				loader: 'file-loader',
			}
		]
	},
	//插件配置
	plugins :[
		new HtmlWebpackPlugin()//使用插件
		new VueLoaderPlugin()
	]	
};
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
30

（8）在项目根目录下创建 index.html 文件，代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript" src="dist/bundle.js"></script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10

（9）使用 webpack 命令进行打包处理。在浏览器中便可访问根目录下的 index.html 文件。

备注：后期会继续跟进 Vue.js前端框架：状态管理，希望大家的多多支持和关注。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/589608