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

最新推荐文章于 2024-07-20 05:42:48 发布

原创

最新推荐文章于 2024-07-20 05:42:48 发布 · 988 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#单文件组件 #vue.js #javascript #css #js

本文介绍了如何使用Vue.js的单文件组件配合Webpack进行项目构建，包括组件化开发、Webpack配置、CSS和图片加载，以及如何使用.vue文件实现HTML、JS和CSS的整合。

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")

最低0.47元/天解锁文章