Vue学习笔记(三)

最新推荐文章于 2023-12-27 15:47:35 发布

被秃头支配的恐惧

最新推荐文章于 2023-12-27 15:47:35 发布

阅读量108

点赞数

文章标签： vue webpack node.js

本文链接：https://blog.csdn.net/qq_43582366/article/details/118575776

版权

一、前段模块化

1.模块化是什么

在开发后端接口的时候，需要开发controller，service和mapper，controller注入service，service注入mapper。在后端中，类与类之间的调用成为模块化操作。
在前端开发中，js与js文件之间的调用称为模块化操作。
示例：
首先编写被引入的js文件

// 定义成员：
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}

// 导出成员：导出之后才能被其他js所引用
module.exports = {
    sum: sum,
    subtract: subtract,
    multiply: multiply,
    divide: divide
}

//简写
// module.exports = {
//     sum,
//     subtract,
//     multiply,
//     divide
// }

然后编写引入的js文件

//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
console.log(m)

const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
console.log(result1, result2)

2.ES6模块化规范

注意：Es6编写的模块化是无法在node,js中执行的，需要用babel将Es6转化为Es5才能执行。
示例：

//编写导出模块01.js
export function getList(){
	console.log("获取数据列表")
}
export function save(){
	console.log("保存数据")
}

//编写导入模块02.js
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()

//运行程序
node es6模块化-dist/userComponent.js

3.Es6模块化的另一种写法

//编写导出模块userApi.js
export function getList(){
	console.log("获取数据列表")
}

export function save(){
	console.log("保存")
}

//编写导入模块userCommponment.js
import user from "./userApi.js"
user.getList()
user.save()

二、Webpack

Webpack是一种前端资源打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack可以将多种静态资源CSS，JS，less转换成一个静态文件，减少了页面的请求。

初始化项目

1、创建webpack文件夹，进入webpack目录，执行命令

npm init -y

2、创建src文件夹
3、src下创建common.js

exports.info = function (str) {
    document.write(str);
}

4、src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5、src下创建main.js

const common = require('./common');
const utils = require('./utils');

common.info('Hello world!' + utils.add(100, 200));

JS打包

1、webpack目录下创建配置文件webpack.config.js
以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

2、命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }

运行npm命令执行打包

npm run dev

3、webpack目录下创建index.html，引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html

CSS打包

1、安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

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

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夹创建style.css

body{
    background:pink;
}

4、修改main.js
在第一行引入style.css

require('./style.css');

5、浏览器中查看index.html。此时背景就变成了粉色

被秃头支配的恐惧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(三)

一、前段模块化1.模块化是什么        在开发后端接口的时候，需要开发controller，service和mapper，controller注入service，service注入mapper。在后端中，类与类之间的调用成为模块化操作。        在前端开发中，js与js文件之间的调用称为模块化操作。示例：首先编写被引入的js文件
复制链接

扫一扫