Vue全家桶之前端工程化（模块化、Webpack、Vue-cli脚手架、Element-UI）

目录

1. 模块化相关规范

1.1 模块化概述

1.1.1传统开发模式的主要问题

1.2 浏览器端模块化规范

1.3 服务器端模块化规范

1.4 模块化规范 – ES6模块化

1.4.1Node.js 中通过 babel 体验 ES6 模块化

1.5 ES6 模块化的基本语法

1. 5.1 默认导出 与 默认导入

1.5.2 需导出 与 按需导入

1.5.3 直接导入并执行模块代码

2. Webpack

2.1 当前 Web 开发面临的困境

2.2 webpack 概述

2.3 webpack 的基本使用

2.3.1 创建列表隔行变色项目

2.3.2 在项目中安装和配置 webpack

2.3.3 配置打包的入口与出口

2.3.4 配置 webpack 的自动打包功能

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

2.3.6 配置自动打包相关的参数

2.4 webpack 中的加载器

2.4.1 通过 loader 打包非 js 模块

2.5 webpack 中加载器的基本使用

2.5.1 打包处理 css 文件

2.5.2 打包处理 less 文件

2.5.3 打包处理 scss 文件

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

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

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

3. Vue 单文件组件

3.1 传统组件的问题和解决方案

3.1.1 问题

3.1.2  解决方案

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

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

3.4 在 webpack 项目中使用 vue

3.5 webpack 打包发布

4. Vue 脚手架

4.1 Vue 脚手架的基本用法

4.2 Vue 脚手架的自定义配置

4.2.1通过 package.json 配置项目

4.2.2 通过单独的配置文件配置项目

5. Element-UI 的基本使用

5.1 基于命令行方式手动安装

5.2 基于图形化界面自动安装

---

1. 模块化相关规范

1.1 模块化概述

1.1.1传统开发模式的主要问题

① 命名冲突    ② 文件依赖

通过模块化解决上述问题：

 模块化 就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成

员，也可以依赖别的模块

  模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

1.2 浏览器端模块化规范

1. AMD

Require.js ( http://www.requirejs.cn/ )

2. CMD

Sea.js ( https://seajs.github.io/seajs/docs/ )

1.3 服务器端模块化规范

CommonJS

① 模块分为 单文件模块 与 包

② 模块成员导出： module.exports 和 exports

③ 模块成员导入： require( ' 模块标识符 ' )

1.4 模块化规范 – ES6模块化

在 ES6 模块化规范诞生之前， Javascript 社区已经尝试并提出了 AMD 、 CMD 、 CommonJS 等模块化规范。

但是，这些社区提出的模块化标准，还是存在一定的 差异性 与 局限性 、 并不是 浏览器与服务器 通用的模块化标准 ，例如：

 AMD 和 CMD 适用于浏览器端的 Javascript 模块化

 CommonJS 适用于服务器端的 Javascript 模块化

因此， ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6 模块化规范中定义：

 每个 js 文件都是一个独立的模块

 导入模块成员 使用 import 关键字

 暴露模块成员 使用 export 关键字

1.4.1Node.js 中通过 babel 体验 ES6 模块化

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

② npm install --save @babel/polyfill

③ 项目跟目录创建文件 babel.config.js

④ babel.config.js 文件内容如下代码

⑤ 通过 npx babel-node index.js 执行代码

 

const presets = [

    ["@babel/env", {

      targets: {

        edge: "17",

        firefox: "60",

        chrome: "67",

        safari: "11.1"

      }

    }]

];

module.exports = { presets };

1.5 ES6 模块化的基本语法

1. 5.1 默认导出 与 默认导入

 默认导出语法 export default 默认导出的成员

 

// 当前文件模块为 m1.js

// 定义私有成员 a 和 c

let a = 10

let c = 20

// 外界访问不到变量 d ,因为它没有被暴露出去

let d = 30

function show() {}

// 将本模块中的私有成员暴露出去，供其它模块使用

export default {

a,

c,

show

}

 

 默认导入语法 import 接收名称 from '模块标识符'

// 导入模块成员

import m1 from './m1.js'

 

注意：每个模块中，只允许使用唯一的一次 export default ，否则会报错！

1.5.2 需导出 与 按需导入

 按需导出语法 export let s1 = 10

        

// 当前文件模块为 m1.js

// 向外按需导出变量 s1

export let s1 = 'aaa'

// 向外按需导出变量 s2

export let s2 = 'ccc'

// 向外按需导出方法 say

export function say = function() {}

 

 按需导入语法 import { s1 } from ' 模块标识符 '

 

// 导入模块成员

import { s1, s2 as ss2, say } from './m1.js'

console.log(s1) // 打印输出 aaa

console.log(ss2) // 打印输出 ccc

console.log(say) // 打印输出 [Function: say]

 

1.5.3 直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

// 直接导入并执行模块代码

import './m2.js'

2. Webpack

2.1 当前 Web 开发面临的困境

 文件依赖关系错综复杂

 静态资源请求效率低

 模块化支持不友好

 浏览器对高级 Javascript 特性兼容程度较低

 etc…

2.2 webpack 概述

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

webpack 提供了 友好的模块化支持 ，以及 代码压缩混淆 、 处理 js 兼容问题 、 性能优化 等强大的功能，从而让程序员把

工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

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

2.3 webpack 的基本使用

2.3.1 创建列表隔行变色项目

① 新建项目空白目录，并运行 npm init –y 命令