前端工程化

zoukankan html css js c++ java

前端工程化
目录
第一章：模块化开发
1.1-模块化概述
1.1.1-为什么需要模块化
1.1.2-模块化相关规范
1.2-Node中体验ES6模块化
1.3-ES6模块化基本语法
1.3.1-默认导出和导入
1.3.2-按需导出导入
1.3.3-直接导入并执行模块程序
第二章：webpack
2.1-为什么需要webpack
2.2-什么是webpack
2.3-webpack的基本使用
2.4-配置打包的入口与出口
2.5-配置webpack自动打包
2.6-生成预览页面
2.7-自动打包参数配置
2.8-webpack加载器
2.8.1-概述
2.8.2-基本使用
2.8.3-打包处理css文件
2.8.4-打包处理less文件
2.8.5-打包处理scss文件
2.8.6-配置postCSS
2.8.7-打包样式图片和字体
2.8.8-打包处理js高级语法
第三章：Vue单文件组件
3.1-传统Vue组件的问题
3.2-单文件组件的基本用法
3.3-webpack中配置vue组件的加载器
3.4-在webpack中使用vue
3.5-webpack打包发布
第四章：Vue CLI
4.1-概述
4.2-基本使用
4.2.1-安装
4.2.2-创建vue项目
4.2.3-Vue项目目录
4.3-Vue CLI自定义配置
第五章：Element-UI快速入门
5.1-概述
5.2-安装
第一章：模块化开发

1.1-模块化概述

1.1.1-为什么需要模块化

传统开发模式的主要问题：
- 命名冲突
- 文件依赖
通过模块化解决上述问题：
- 模块化就是把单独的一个功能封装到一个模块中（文件中），模块化之间互相隔离（高内聚，低耦合），但是可以通过特定的接口公开内部成员（导出），也可依赖别的模块（导入）。
- 模块化开发的好处，方便代码的重用，提高开发效率，并且便于后期维护。
1.1.2-模块化相关规范

浏览器端模块化规范
- AMD，典型代表Require.js
- CMD，典型代表Seajs
在本篇文章中，不做过多解释，因为这两种浏览器端模块化规范已经过时。

服务器端（node）模块化规范

CommonJs规范，在node环境中使用。典型规范定义如下：
- 模块分为 单文件 与 包
- 模块成员导出：module.exports 或 exports
- 模块成员导入：require('模块标识符')
ES6模块化规范

ES6模块化规范，是大一统的规范。

在ES6模块化未出现之前，JavaScript社区已经尝试并提出了AMD、CMD、CommonJs等模块规范。

但是这些模块化规范的标准还存在一定的差异性、局限性，并不是浏览器与服务器通用的标准规范。例如：
- AMD和CMD仅适用于浏览器端模块化规范
- CommonJS仅适用于服务器端Node环境
因此，ES6在语言层面上定义了ES6模块化规范，是浏览器与服务器通用的模块化规范

规范定义如下：
- 每个js文件都是一个独立的模块
- 导入模块成员使用import关键字
- 导出模块成员使用export关键字
1.2-Node中体验ES6模块化

由于Node环境对ES6模块化支持不完善，所以我们需要借助第三方插件babel，安装步骤如下：
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
```
项目根目录创建babel.config.js，配置文件代码如下
```
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1"
      }
    }
  ]
];
module.exports = { presets };
```
通过npx babel-node 要执行的js文件执行代码

1.3-ES6模块化基本语法

1.3.1-默认导出和导入

语法
- 导出：export default 默认导出的成员
- 导入：import 接收名称 from "模块标识符"
注意：默认导出，只能出现一次

代码

模块1：01-m1.js
```
let a = 10;
let b = 'hello';
let c = 1000;
let fn = () => {
  console.log('Hello ES6');
}
// 导出
export default {a,b,fn};
```
模块2：02-test.js
```
// 导入
import m1 from './01-m1.js';
console.log(m1);
```
执行命令：npx babel-node 02-test.js

输出结果：{ a: 10, b: 'hello', fn: [Function: fn] }

1.3.2-按需导出导入

语法
- 按需导出：export let a = 10
- 按需导入：import 默认名称, {a,b,c as 别名,...} from "模块标识符"
注意：按需导入导出和默认导入导出可以一起使用。

代码

模块1： 01-m1.js
```
let a = 10;
let b = 'hello';
let c = 1000;
let fn = () => {
  console.log('Hello ES6');
}
// 按需导出-say
export let say = () => {
  console.log('你好')
};
// 按需导出-age
export let age = 18;
// 默认导出
export default {a,b,fn};
```
测试：02-test.js
```
// 按需导入
import  { say, age } from './01-m1.js';
// 默认导入
import m1 from './01-m1.js';
// 默认和按需导入混合
// import m1, { say, age } from './01-m1.js';

console.log(say);  // 结果：[Function: say]
console.log(age);  // 结果：[18]
console.log(m1);   // { a: 10, b: 'hello', fn: [Function: fn] }
```
执行命令：npx babel-node 02-test.js

1.3.3-直接导入并执行模块程序

语法

import "模块标识符"

代码

模块：03-m2.js
```
for (var i = 1; i <= 100; i++){
  console.log(i);
}
```
模块：04-test.js
```
import "./03-m2";
```
执行命令：npx babel-node 03-test.js

第二章：webpack

2.1-为什么需要webpack

当前web开发中面临如下问题：
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对象高级javascript特性兼容性低
- ...
2.2-什么是webpack

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作重心放到具体的业务实现上，提高开发效率和项目的可维护性。

目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。

2.3-webpack的基本使用

代码准备

用模块化开发的方式，基于jquery实现隔行变色效果。
- 新建项目空白目录，并运行npm install -y命令，初始包管理配置文件package.json。
- 新建src源代码目录
- 新建src→index.html首页
- 初始化首页基本结构
- 运行npm install jquery -S命令，安装jquery
- 通过模块化的形式，实现隔行变色效果。
index.js文件
```
import $ from 'jquery';
$(function () {
  $('li:odd').css({ background: 'darkskyblue' });
  $('li:even').css({ background: 'skyblue' });
})
```
index.html文件
```
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
  </ul>
```
webpack安装和配置

01-运行命令 npm install webpack webpack-cli -D命令，安装webpack相关的包

02-在项目根目录中，创建名为webpack.config.js的webpack配置文件

03-在webpack配置文件中初始化如下配置
```
module.exports = {
	// mode用来指定构建模式，devloment、production
	// devloment 开发模式（开发过程中）
	// producton 生产模式（部署上线）·
    mode:'develoment'
}
```
04-在package.json配置文件中的scripts节点下，新增dev脚本如下：
```
// scripts下的脚本可以通过npm run 执行
"scripts":{
    "dev":"webpack"
}
```
05-在终端中运行npm run dev 命令，启动webpack进行项目打包

打包完成后，会生成要dist目录，并有一个main.js，在html中引入编译后的main.js文件

2.4-配置打包的入口与出口

webpack4.x版本默认规定
- 打包的入口文件：src→index.js
- 打包的出口文件：dist→main.js
如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置
```
const path = require('path');   // 导入node中负责操作路径的模块
module.exports = {
    entry:path.join(__dirname,'./src/index.js'),打包的入口文件路径
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js' // 输出文件的名字
    }
}
```
2.5-配置webpack自动打包

01-运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具

02-修改package.json→scripts节点如下：
```
  "scripts": {
    "dev":"webpack-dev-server"
  },
```
03-将index.html页面中引用脚本的路径改为根路径../bundle.js

04-运行npm run dev重新打包

05-在浏览器中http://localhost:8080地址，查看自动打包效果

注意：
- webpack-dev-server 会启动一个实时打包的http服务器
- webpack-dev-server 打包生成的输出位文件，默认放到了项目根目录中，而且是虚拟的，是看不见的。
2.6-生成预览页面

01-运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件

02-修改webpack.config.js文件头部区域，添加如下配置信息
```
// 导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
	// 指定要用到的模板文件
    template:'./src/index.html',
    // 指定生成的文件名称，该文件存在于内存中，在目录中不显示
    filename:'index.html'
})
```
03-修改webpack.config.js导出，新增如下
```
module.exports = {
	// plugins数组时webpack打包期间会用到的一些插件列表
    plugins:[htmlPlugin]
}
```
2.7-自动打包参数配置

package.json文件中
```
参数：
	--open 		打包完成后，自动打开浏览器
	--host ip 	配置ip地址
	--port 8888	配置端口号
```
```
  "scripts": {
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
  },
```
2.8-webpack加载器

2.8.1-概述

在实际开发中，webpack默认只能处理js文件模块，其他非js文件模块，需要调用loader加载器才能处理，否则会报错。

loader加载器可以协助webpack打包处理特定的文件模块，比如：
- less-loader可以处理.less文件
- scss-loader 可以处理.scss文件
- url-loader可以处理css中与url相关的文件
loader的调用过程：

2.8.2-基本使用

2.8.3-打包处理css文件

01-运行 npm install style-loader css-loader -D命令，安装处理css文件的loader

02-在webpack.config.js的moudle→rules数组中，添加loader规则如下：
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.css$/,
            use:['style-loader','css-loader']
        }
    ]
}
```
其中，test表示文件匹配的类型，use表示对应要调用的loader

注意：
- use数组中指定的loader顺序是固定的。
- 多个loader的调用顺序是从后向前调用
index.js文件中导入css模块
```
import $ from 'jquery';
import './index.css';
$(function () {
  $('li:odd').css({ background: 'deepskyblue' });
  $('li:even').css({ background: 'skyblue' });
})
```
2.8.4-打包处理less文件

01-运行 npm install less-loader less -D命令，安装处理css文件的loader

02-在webpack.config.js的moudle→rules数组中，添加loader规则如下：
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.less$/,
            use:['style-loader','css-loader','less-loader']
        }
    ]
}
```
2.8.5-打包处理scss文件

01-运行 npm install sass-loader node-sass -D命令，安装处理css文件的loader

02-在webpack.config.js的moudle→rules数组中，添加loader规则如下：
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.scss/,
            use:['style-loader','css-loader','sass-loader']
        }
    ]
}
```
2.8.6-配置postCSS

目的：自动添加css的兼容前缀

01-运行npm install postcss-loader autoprefixer -D命令

02-在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置
```
const autoprefixer = require('autoprefixer');
module.exports = {
    plugins:[autoprefixer]  // 挂载插件
}
```
03-在webpack.config.js的moudle→rules数组中，修改css的loader规则：
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.css$/,
            use:['style-loader','css-loader','postcss-loader']
        }
    ]
}
```
2.8.7-打包样式图片和字体

01-运行npm install url-loader file-loader -D命令

02-在项目根目录中配置文件webpack.config.js，实现如下配置
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.jpp|png|gif|bmp|ttf|woff|svg|etc|woff2$/,
            use:['url-loader?limit=16000']
        }
    ]
}
```
其中?是loader后面的参数项

limit用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转为base64图片

2.8.8-打包处理js高级语法

01-安装babel转换器相关的包：npm install babel-loader @babel/core @babel/runtime -D

02-安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

03-在项目根目录中，创建babel配置文件babel.config.js，并实现如下配置：
```
module.exports = {
    presets:['@babel/preset-env'],
    plugins:[
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties'
    ]
}
```
04-在webpack.config.js的moduel→rules数组中，添加loader规则如下：
```
// 所有第三方文件模块的匹配规则
module:{
    rules:[
        {
            test:/.js$/,
            use:['babel-loader'],
            exclude:/node_modules/
        }
    ]
}
```
第三章：Vue单文件组件

3.1-传统Vue组件的问题

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

针对传统组件的问题，vue提供了对应的解决方案→使用vue单文件组件。

3.2-单文件组件的基本用法

组成结构
- template，组件的模板区域
- script，组件的业务逻辑区域
- style，样式区域
组件文件后缀是.vue
```
<template>
    
    <div></div>
</template>

<script>
    // 这里用于定义业务逻辑
    export default {
      data(){
        return {}
      },
      methods: {
        
      },
    }
</script>

<style scoped>
  /* 这里用于定义样式 */
</style>
```
代码演示
```
<template>
    
    <div>
      <h2>标题</h2>
    </div>
</template>

<script>
    // 这里用于定义业务逻辑
    export default {
      data(){
        return {}
      },
      methods: {
        
      },
    }
</script>

<style scoped>
  /* 这里用于定义样式 */
  h2 {
    color:red
  }
</style>
```
3.3-webpack中配置vue组件的加载器

01-运行npm i vue-loader vue-template-compiler -D命令

02-在webpack.config.js配置文件中，添加vue-loader的配置项如下：
```
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    // 所有第三方文件模块的匹配规则
    module:{
        rules:[
            {
                test:/.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[其他插件...,new VueLoaderPlugin()]
}
```
3.4-在webpack中使用vue

01-运行npm install vue -S 安装vue

02-在src→index.js文件中，通过import Vue from "vue"导入Vue构造函数

03-创建vue的实例对象，并指定要控制的el区域

04-通过render函数渲染App组件
```
// 引入Vue
import Vue from "vue";
// 引入vue根组件
import App from './componets/App.vue';
// 创建vue实例
const vm = new Vue({
  el: "#app",
  // 通过render函数把指定的组件渲染到el区域中
  render:h=>h(App)
});
```
3.5-webpack打包发布

简单的打包发布

上线之前，需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令。
```
// 在package.json文件中配置webpack打包命令
// 该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts":{
	// 用于打包的命令
    "build":"webpack -p",
    // 用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
    
}
```
运行命令：npm run build

第四章：Vue CLI

4.1-概述

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过 @vue/cli 搭建交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
  
  可升级；
  
  基于 webpack 构建，并带有合理的默认配置；
  
  可以通过项目内的配置文件进行配置；
  
  可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject 。

4.2-基本使用

4.2.1-安装

版本：3.x

命令：npm install -g @vue/cli

4.2.2-创建vue项目
```
# 基于命令行创建vue项目
vue create my-project
# 基于图形化界面创建vue项目
vue ui
# 基于2.x旧版本模板，创建vue项目
npm install -g @vue/cli-init
vue init webpack my-project
```
4.2.3-Vue项目目录

4.3-Vue CLI自定义配置

通过package.json配置项目
```
"vue":{
	"devServer":{
		"port":"8888",
		 "open":true
	}
}
```
通过单独的配置文件配置项目（推荐）

01-在项目根目录中创建文件：vue.config.js

02-在文件中进行相关配置，从而覆盖默认配置
```
module.exports = {
  devServer: {
    port: 8898,
    open: true
  }
}
```
第五章：Element-UI快速入门

5.1-概述

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

5.2-安装

基于命令行方式安装

01-安装依赖包：npm i element-ui -S

02-导入element-ui相关资源
```
// 导入element相关资源-组件库
import ElementUI from 'element-ui'
// 导入element相关资源-组件库
import 'element-ui/lib/theme-chalk/index.css'
// 配置Vue插件
Vue.use(ElementUI)
```
基于图形化界面自动安装

01-运行vue ui命令，打开图形化界面

02-通过Vue项目管理器，进入具体的项目配置面板

03-点击插件→添加插件，进入插件查询面板

04-搜索vue-cli-plugin-element并安装

05-配置插件，实现按需导入，从而减少打包后项目的体积
查看全文

相关阅读:
django 定时任务 django-crontab 的使用
 Django中更新多个对象数据与删除对象的方法
 Django复制记录的方法
 Python中关于日期的计算总结
 django中添加日志功能
 Python 日期时间datetime 加一天，减一天，加减一小时一分钟,加减一年
 根据后端传的时间前端js进行倒计时
 输入pip命令报错：from pip import main ImportError: cannot import name 'main'
操作uwsgi命令
 关于linux下安装mysqlclient报 Failed building wheel for mysqlclient问题

原文地址：https://www.cnblogs.com/lpl666/p/12618564.html

第一章：模块化开发

1.1-模块化概述

1.1.1-为什么需要模块化

1.1.2-模块化相关规范

1.2-Node中体验ES6模块化

1.3-ES6模块化基本语法

1.3.1-默认导出和导入

1.3.2-按需导出导入

1.3.3-直接导入并执行模块程序

第二章：webpack

2.1-为什么需要webpack

2.2-什么是webpack

2.3-webpack的基本使用

2.4-配置打包的入口与出口

2.5-配置webpack自动打包

2.6-生成预览页面

2.7-自动打包参数配置

2.8-webpack加载器

2.8.1-概述

2.8.2-基本使用

2.8.3-打包处理css文件

2.8.4-打包处理less文件

2.8.5-打包处理scss文件

2.8.6-配置postCSS

2.8.7-打包样式图片和字体

2.8.8-打包处理js高级语法

第三章：Vue单文件组件

3.1-传统Vue组件的问题

3.2-单文件组件的基本用法

3.3-webpack中配置vue组件的加载器

3.4-在webpack中使用vue

3.5-webpack打包发布

第四章：Vue CLI

4.1-概述

4.2-基本使用

4.2.1-安装

4.2.2-创建vue项目

4.2.3-Vue项目目录

4.3-Vue CLI自定义配置

第五章：Element-UI快速入门

5.1-概述

5.2-安装