Bootstrap

前端工程化

模块化概述

传统开发模式的主要问题
① 命名冲突
② 文件依赖

 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块
 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

浏览器端模块化规范

  1. AMD
    Require.js (http://www.requirejs.cn/)
  2. CMD
    Sea.js (https://seajs.github.io/seajs/docs/)

服务器端模块化规范

  1. CommonJS
    ① 模块分为 单文件模块 与 包
    ② 模块成员导出：module.exports 和 exports
    ③ 模块成员导入：require(‘模块标识符’)

ES6模块化

在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：
 AMD 和 CMD 适用于浏览器端的 Javascript 模块化
 CommonJS 适用于服务器端的 Javascript 模块化

ES6模块化规范中定义：
 每个 js 文件都是一个独立的模块
 导入模块成员使用 import 关键字
 暴露模块成员使用 export 关键字

ES6 模块化的基本语法

默认到处与默认导入

 默认导出语法 export default 默认导出的成员
 默认导入语法 import 接收名称 from ‘模块标识符’

在这里插入图片描述
在这里插入图片描述
注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

按需导出与按需导入

 按需导出语法 export let s1 = 10
 按需导入语法 import { s1 } from ‘模块标识符’
在这里插入图片描述
s2 as ss2 — 设置别名
注意：每个模块中，可以使用多次按需导出

直接导入并执行模块代码

只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。
在这里插入图片描述

webpack

当前web开发面临的困境
 文件依赖关系错综复杂
 静态资源请求效率低
 模块化支持不友好
 浏览器对高级 Javascript 特性兼容程度较低

webpack是一个流行的前端项目构建工具（打包工具）,可以解决目前web开发的困境.
webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把 工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
在这里插入图片描述

webpack 的基本使用

1.新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
2. 新建 src 源代码目录
3. 新建 src -> index.html 首页
4. 初始化首页基本的结构
5. 运行 npm install jquery ,安装 jQuery
6. 新建index.js文件,导入jquery,编写代码并实现功能
此时此时项目运行会有错误，因为import $ from “jquery”;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题
7. 安装webpack — npm install webpack webpack-cli –D
8. 在项目根目录中新建webpack.config.js的webpack配置文件

module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}

补充：mode设置的是项目的编译模式。
如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

9.在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"// script 节点下的脚本，可以通过 npm run 执行 
  },

10.在终端中运行 npm run dev 命令，启动 webpack 进行项目打包
11. 等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中

配置打包的入口与出口

webpack 的 4.x 版本中默认约定：
 打包的入口文件为 src -> index.js
 打包的输出文件为 dist -> main.js

如果要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置信息：

const path = require('path'); // 导入 node.js 中专门操作路径的模块 
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),// 打包入口文件的路径 
    output: {
        path: path.join(__dirname, 'dist'),// 输出文件的存放路径 
        filename: 'index.js'// 输出文件的名称 
    }
}

配置 webpack 的自动打包功能

默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成新的js文件
每次都要重新执行命令打包，这是一个非常繁琐的事情，自动打包可以解决这样繁琐的操作。
1.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
2.修改package.json中的dev指令如下：
“scripts”:{
“dev”:“webpack-dev-server”
}
3.将引入的js文件路径更改为：
4.运行npm run dev，进行打包
注意：
 webpack-dev-server 会启动一个实时打包的 http 服务器
 webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

配置 html-webpack-plugin 生成预览页面

因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。

  1. 运行 npm install html-webpack-plugin –D 命令，安装生成预览页面的插件
  2. 修改 webpack.config.js 文件头部区域，添加如下配置信息
  3. 修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');// 导入生成预览页面的插件，得到一个构造函数 

const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象 
    template: 'src/index.html',  // 指定要用到的模板文件 
    filename: 'index.html'   // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示 
});
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [htmlPlugin]       // plugins 数组是 webpack 打包期间会用到的一些插件列表 
}

配置自动打包相关的参数

在这里插入图片描述

webpack中的加载器

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结 尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器可以协助 webpack 打包处理特定的文件模块
loader加载器包含：
1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader

loader的调用过程
在这里插入图片描述

打包处理 css 文件

1.运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
2. 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');// 导入生成预览页面的插件，得到一个构造函数 

const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象 
    template: 'src/index.html',  // 指定要用到的模板文件 
    filename: 'index.html'   // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示 
});
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [htmlPlugin],       // plugins 数组是 webpack 打包期间会用到的一些插件列表 
    module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ]
    }
}

注意： 
 use 数组中指定的 loader 顺序是固定的 
 多个 loader 的调用顺序是：从后往前调用

打包处理less文件

1.安装less,less-loader处理less文件,npm install less-loader less -D
2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

打包处理scss文件

1.安装sass-loader,node-sass,npm install sass-loader node-sass -D
2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
        ]
    }

补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

配置 postCSS 自动添加 css 的兼容前缀

1.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）,npm install postcss-loader autoprefixer -D
2.在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

const autoprefixer = require('autoprefixer');// 导入自动添加前缀的插件 
module.exports = {
    plugins: [autoprefixer]// 挂载插件 
}

3.修改webpack-config.js中的module -> rules的规则:

module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },//加上postcss-loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
        ]
    }

打包样式表中的图片和字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1.安装:npm install url-loader file-loader -D
2.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: "url-loader?limit=16940"//其中 ? 之后的是 loader 的参数项。 limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片 
            }
        ]
    }

打包处理 js 文件中的高级语法

打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
1.安装babel转换器:npm install babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件包:npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录创建并配置babel.config.js文件

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

4.在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: "url-loader?limit=16940"
            },
            {
                test: /\.js$/,
                use: "babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude: /node_modules/
            }
        ]
    }

webpack中配置vue组件的加载器

1.安装 ---- npm install vue-loader vue-template-compiler -D
2.在webpack-config.js文件中配置规则如下:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');// 导入生成预览页面的插件，得到一个构造函数 

const htmlPlugin = new HtmlWebpackPlugin({  // 创建插件的实例对象 
    template: 'src/index.html',  // 指定要用到的模板文件 
    filename: 'index.html'   // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示 
});
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js'
    },
    plugins: [htmlPlugin, new VueLoaderPlugin()],       // plugins 数组是 webpack 打包期间会用到的一些插件列表 
    module: {
        // 所有第三方文件模块的匹配规则 
        rules: [
            //test 表示匹配的文件类型， use 表示对应要调用的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" },
            {
                test: /\.js$/, use: "babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude: /node_modules/
            },
            { test: /\.vue$/, loader: 'vue-loader' }
        ]
    }
}

Vue单文件组件

  1. 全局定义的组件必须保证组件的名称不重复
  2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
  3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

Vue单文件组件的组成结构

  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域

在webpack项目中使用vue

1.安装vue ---- npm install vue
2.在index.js入口文件中,通过import Vue from 'vue’
3.创建Vue实例对象,并指定要控制的el区域,通过 render 函数渲染 App 根组件

import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({
    el: '#app',
    render: h => h(App)
});

webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",
    "build": "webpack -p"	//打包命令
  },

Vue脚手架

用于快速生成Vue项目基础架构.
在命令行工具中使用命令安装
安装 ---- npm install -g @vue/cli

Vue 脚手架的基本用法

在命令行工具中执行以下命令:
在这里插入图片描述

Vue脚手架生成的项目结构

在这里插入图片描述

Vue脚手架的自定义配置

1.通过package.json配置项目

 // 必须是符合规范的json语法,属性必须要加双引号
 "vue": { 
    "devServer": { 
      "port": "8888", 
      "open" : true 
    } 
  },

2.通过单独的配置文件配置项目
① 在项目的根目录创建文件 vue.config.js
② 在该文件中进行相关配置，从而覆盖默认配置

module.exports = {
  devServer: {
    open: true	//b编译完成后自动打开浏览器
  }
}

Element-UI 的基本使用

基于命令行方式手动安装

① 安装依赖包 npm i element-ui
② 导入 Element-UI 相关资源

// 导入组件库   
import ElementUI from 'element-ui';  
// 导入组件相关样式   
import 'element-ui/lib/theme-chalk/index.css';   
// 配置 Vue 插件   
Vue.use(ElementUI);

基于图形化界面自动安装

① 运行 vue ui 命令，打开图形化界面
② 通过 Vue 项目管理器，进入具体的项目配置面板
③ 点击 插件 -> 添加插件，进入插件查询面板
④ 搜索 vue-cli-plugin-element 并安装
⑤ 配置插件，实现按需导入，从而减少打包后项目的体积

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
【计算机毕业设计】基于Java的敬老院管理系统设计与实现_养老院管理系统国内外研究现状
【TensorFlow】No module named ‘tensorflow_core.keras‘
Vue项目引入CDN后出现问题
浅谈分库分表那些事儿
接口压测时MySql对CPU占用过高
Linux:免交互
15个增加您的网站流量的Google Search Console（Google搜索控制台）专家技巧
记一次anr问题排查
SpringCloud实例---电影购票
Java基础
;