13.Vue.js前端框架：单页Web应用

最新推荐文章于 2024-02-22 07:45:00 发布

小白_xm

最新推荐文章于 2024-02-22 07:45:00 发布

阅读量821

点赞数 2

分类专栏： Vue.js前端框架文章标签：单文件组件 vue.js javascript css js

本文链接：https://blog.csdn.net/qq_44725331/article/details/116289776

版权

Vue.js前端框架专栏收录该内容

14 篇文章 6 订阅

订阅专栏

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

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

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

     npm init

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

     npm install webpack --save-dev

2.2 webpack 的基本使用

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

document.write("Hello webpack");

index.html 文件的代码如下：

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

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

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

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

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

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

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

再次使用 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

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

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

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

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

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

3.2 webpack 配置文件

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

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

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

1. mode

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

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

示例代码如下：

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

2. entry

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

entry : './entry.js'

3. output

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

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

4. module

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

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

示例代码如下：

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

5. plugins

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

3.3 加载图片文件

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

npm install file-loader --save-dev

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

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

修改配置文件 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()//使用插件
	]	
};

上述应用中，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

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

     npm install Vue

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

     npm install webpack --save-dev

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

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

（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>

注意：在默认情况下，单文件组件中的 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) //渲染视图
})

（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()
	]	
};

（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>

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

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

小白_xm

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
13.Vue.js前端框架：单页Web应用

1、单页Web应用简介将多个组件写在同一个文件的方式适用于一些中小规模的项目。但是如果在更复杂的项目中，这种方式就会出现很多弊端。对此，Vue.js 提供了文件扩展名为 .vue 的单文件组件。单文件组件是 Vue.js 自定义的一种文件格式，一个 .vue 文件就是一个单独的组件，多个组件组合在一起就可以实现单页 Web应用。2、webpack 简介webpack 是一个前端资源加载和打包工具。可以将各种资源（如，JS、CSS 样式、图片等）作为模板块来使用，然后将这些模块按照一定规则进行打包处理，
复制链接

扫一扫