一、传统模块化规范

Node.js 第九天的 线下笔记 中，详细介绍了ES6模块化规范，以及如何在 Node 中使用ES6模块化规范。

（1）AMD 和 CMD 适用于浏览器端的 Javascript 模块化
（2）CommonJS 适用于服务器端的 Javascript 模块化
（3）Node.js中使用的就是CommonJS 模块化规范：
① 导入其它模块使用 require() 方法
② 模块对外共享成员使用 module.exports 对象

二、ES6 模块化规范

1. ES6 模块化规范的核心

① 每个 js 文件都是一个独立的模块
② 导入其它模块成员使用 import 关键字
③ 向外共享模块成员使用 export 关键字

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

（1）安装babel

打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill
注意：如果npm安装上述包不成功，就使用cnpm
但是需要安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org

（2）配置babel
在项目目录中创建babel.config.js文件。编辑js文件中的代码如下：

const presets = [
    ["@babel/env",{
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
        }
    }]
]
//暴露
module.exports = { presets }

（3）创建index.js文件

在项目目录中创建index.js文件作为入口文件
在index.js中输入需要执行的js代码，例如：
console.log("ok");

（4）使用npx执行文件

打开终端，输入命令：npx babel-node ./index.js

3. 默认导出

注意：一个模块中，默认导出只能用一次！

export default { 默认导出的成员 } 加了花括号，导出的是对象形式的数据。

或者export default 默认导出的成员 不加花括号，导出的是数据本身。

let num1 = 10;
let num2 = 20;

function show() {
  console.log('默认导出模块的函数');
}

// 默认导出
export default { num1, show }; //{ num1: 10, show: [Function: show] }

4. 默认导入

注意：导入自定义模块时，必须以 ./ 开头

import 自定义名字 from "模块标识符"

import wl from './1.默认导出.js';
console.log(wl);

5. 按需导出

export 按需导出的成员

export let name = '吴磊';
export let hobby = '冲浪';
export function say() {
  console.log('你好');
}

6. 按需导入

注意：按需导入的名称必须和按需导出的名称一致，但可以使用as关键字修改名称。

import { } from "模块标识符"
import 默认导入名字,{ } from '模块标识符

import moRen, { name, hobby as aihao, say } from './3.按需导出.js';

console.log('名字：' + name + ',爱好:' + aihao);
console.log('默认导出的模块' + moRen);

7. 直接导入并执行模块的代码

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码。

import "模块标识符"

import './5.被直接导入的模块.js'

三、webpack基本使用

1. 概念

webpack 是一个流行的前端项目构建工具（打包工具），它提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能。

• -S：--save，缩写为-S，表示安装的包将写入package.json里面的dependencies
• -D：--save-dev，缩写为-D，表示将安装的包将写入packege.json里面的devDependencies
• -g ：--global，缩写为-g，表示安装包时，视作全局的包。

2. webpack 的基本使用

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

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

③ 在 webpack 的配置文件中，初始化如下基本配置：

module.exports = {
 mode: 'development' // mode 用来指定构建模式，开发模式：development，产品发布：production
}

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

"scripts": {
"dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行
}

⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

⑥ webpack把 main.js输出文件 打包到了 dist 目录下，之后就使用这里面的文件。

3. 配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

• 打包的入口文件为 src -> index.js
• 打包的输出文件为 dist -> main.js

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

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

4.配置 webpack 的自动打包功能

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

② 修改 package.json文件中，scripts 中的 dev 命令如下：

"scripts": {
 "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
}

③ 在文件中引用 .js输出文件 时，必须引用 【/ bundle.js】 。因为自动打包工具把打包好的文件放到了 项目的根目录下。（千万别少了 / ）

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

④ 运行 npm run dev 命令，重新进行打包。

⑤ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果。

注意：

• webpack-dev-server 会启动一个实时打包的 http 服务器。
• webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的。
• 由于4.0版本的 webpack-cli包 和3.0版本的 webpack-dev-server包 不兼容，所以只能把webpack-cli包 更换成3.0版本的。

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

如果安装了 自动打包 工具后，虽然每次修改代码能自动打包，但首次打开时还需要查找文件夹，很麻烦。接下来实现：每次自动打包后，访问文件所在网址，可以直接看到页面效果。

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

② 修改 webpack.config.js 文件头部区域，添加如下配置信息：

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
 template: './src/index.html', // 指定要用到的模板文件
 filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

③ 修改 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点：

module.exports = {
 plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}

6. 配置自动打包相关的参数

上一步配置，虽然可以在打开网址时，立刻看到页面效果，但还是很麻烦。
接下来实现：每次启动自动打包后，不需要手动打开浏览器，直接跳转到页面效果。

package.json中的配置：

 // --open 打包完成后自动打开浏览器页面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 },

四、 webpack 中的加载器

1. loader加载器的作用

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

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

• less-loader 可以打包处理 .less 相关的文件
• sass-loader 可以打包处理 .scss 相关的文件

• url-loader 可以打包处理 css 中与 url 路径相关的文件

  
  
  捕获.PNG

2. 打包处理 css 文件

① 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 文件的 module.exports 对象中，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
module.exports = {
 module: {
 rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
 }
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader。

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

3. 打包处理 less 文件

① 运行 npm i less-loader less -D 命令
② 在 webpack.config.js 文件中，为module对象的 rules 数组，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
 module: {
 rules: [
 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
 ]
 }

4. 打包处理 scss 文件

① 运行 npm i sass-loader node-sass -D 命令
② 在 webpack.config.js 文件中，为module对象的 rules 数组，添加 loader 规则如下：

// 所有第三方文件模块的匹配规则
 module: {
 rules: [
 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
 ]
 }

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

某些css样式具有兼容性问题，下载并配置 postCSS，可以为css样式自动添加兼容性前缀，解决兼容性问题。

① 运行 npm i postcss-loader autoprefixer -D 命令
② 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

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

③ 在 webpack.config.js文件中，找到 module对象的 rules 数组，修改 css 的 loader 规则如下：

module: {
 rules: [
 { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
 ]
 }

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

① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js文件中，找到 module对象中的 rules 数组，添加 loader 规则如下：

module: {
 rules: [
 { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' }
 ]
 }

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

① 安装babel转换器相关的包：
npm i babel-loader @babel/core @babel/runtime -D
② 安装babel语法插件相关的包：
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
③ 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

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

④ 在 webpack.config.js文件中，找到 module对象中的 rules 数组，添加 loader 规则如下：

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

五、单文件组件 （重点）

单文件组件搭配路由使用。单文件组件负责定义组件，路由负责定义路由规则。

1. 问题

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

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

2. Vue 单文件组件的基本用法

创建一个 .vue 的文件，单文件组件的组成结构：
① template 组件的模板区域
② script 业务逻辑区域
③ style 样式区域

<template>
    <div>这里定义vue组件的模板内容</div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{}
}
</script>

<style scoped>
div {
    color: red;
}
</style>

注意：
style添加 scoped 防止组件样式之间的冲突问题。
vue文件的代码提示，可以在vscode中安装Vetur插件。

3. webpack 中配置 vue 组件的加载器

① 运行 npm i vue-loader vue-template-compiler -D 命令
② 在 webpack.config.js 配置文件中，添加 vue-loader加载器 的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 module: {
 rules: [
 // ... 其它规则
 { test: /\.vue$/, loader: 'vue-loader' }
 ]
 },
 plugins: [
 // ... 其它插件
 new VueLoaderPlugin() // 请确保引入这个插件！
 ]
}

4. 在webpack 中使用 vue单文件组件

① 在项目中下载 vue 的包。

npm i vue –S

② 在输入文件 index.js 中，导入 vue 包。

import Vue from 'vue'

③ 在输入文件 index.js 中，导入 单文件组件。

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

⑤ 在vue 的实例对象中，通过 render 函数，将组件挂载并渲染出来。

5. webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以在 package.json 文件中的 scripts对象 里，添加如下命令：

"scripts": {
 // 用于打包的命令
 "build": "webpack -p",
}

然后运行命令：npm run build ，会生成 .dist 文件夹。

六、 脚手架 （重点）

Vue 脚手架就是一个 命令行工具，用于快速生成 Vue 项目基础架构。其官网地址为：https://cli.vuejs.org/zh/

1. 全局安装vue脚手架

npm install -g @vue/cli

• 安装了脚手架后，就可以基于脚手架创建vue项目了。

2. 基于 交互式命令行 的方式，创建 vue 项目（重点）

在命令行输入：vue create 项目名称

3. 基于图形化界面创建vue项目（重点）

注意：使用vue ui 命令就能打开vue 的图像化界面。

在命令行输入：vue ui

4. 基于2.x的旧模板创建旧版vue项目（几近淘汰）

首先在要安装一个包：npm install -g @vue/cli-init
然后输入：vue init webpack 项目名称

具体创建步骤，见 前端工程化-第六天 的线下笔记。

5. 启动

创建完成后，在vscode中打开项目文件夹，在终端里运行 npm run serve 命令。

6. 对vue脚手架项目进行自定义配置的两种方式

（1）在 package.json 文件中添加配置信息。（不推荐）
（2）在根目录下创建 vue.config.js 文件。在这个文件中的配置信息会覆盖默认配置信息。

module.exports = {
  devServer: {
    open: true, //启动项目后，直接跳转到显示效果页面
    port: 8888 //端口号
  }
};

（3）vue.config.js文件的核心就是webpack打包工具。vue-cli是基于nodejs+webpack封装的命令行工具。
① build文件夹是webpack的配置文件夹，如果使用了vue-cli脚手架则会用vue.config.js文件替代。
② config文件是我们自己加的配置文件，只是把webpack配置参数单独写出了。
③ dist文件是打包文件。

image.png

七、组件库 Element-UI （重点）

官网：https://element.eleme.cn/#/zh-CN
Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，它提供了丰富的组件，设计非常美观，我们可以直接拿来用，这样可以省去很多样式编写时间，让我们更加专注逻辑代码。

1. 基于命令行方式手动安装

① 在项目的命令行安装依赖包

npm install element-ui -S

② 在打包入口文件：main.js 中导入Element-UI的相关资源

// 手动配置Element-UI
// 导入Element-UI组件库
import ElementUI from "element-ui";
// 导入组件库的相关css样式
import "element-ui/lib/theme-chalk/index.css";
// 配置vue插件啊
Vue.use(ElementUI);

③ 启动项目：npm run serve

2. 基于图形化界面自动安装element-ui

① 在命令行运行 vue ui 命令，打开vue的图形化界面。

② 通过 vue项目管理器 ，进入具体的项目配置面板。

③ 点击 插件 -->添加插件 ，进入插件查询面板。

④ 搜索 vue-cli-plugin-element 并安装。

⑤ 在 配置插件 中，实现按需导入，从而减少打包后的项目体积。

配置完成后，就可以去ElementUI官网上复制代码使用了。
注意：用脚手架搭建的项目，其入口文件是 main.js

八 、vscode 格式化代码

配置完成后，保存代码会自动格式化为 ESlint 的规范。
（1）在vscode中安装下面三个插件。

111111111.PNG

（2）在设置里面，找到 json 配置文件，添加下面的代码。

1111111111.png

注意！！！是在原来配置对象里面追加如下配置代码，注意格式：

"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
"vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 80,
      // Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
      "wrap_attributes": "force-expand-multiline"
    }
  },
  "editor.tabSize": 2,
  "vetur.validation.template": false,
  "git.ignoreLimitWarning": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "git.confirmSync": false,
  "eslint.quiet": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceAfterConstructor": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.preferences.quoteStyle": "single",
  "javascript.format.insertSpaceAfterConstructor": true,
  "typescript.preferences.quoteStyle": "single",
  "html.format.wrapAttributes": "force-expand-multiline",
  "editor.formatOnSave": true,
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.singleQuote": true,
  "prettier.useTabs": true,
  "prettier.printWidth": 100,
  "eslint.workingDirectories": [
    ".eslintrc.js",
    {
      "mode": "auto"
    }
  ]

九、生成vue基本结构

https://www.cnblogs.com/youmingkuang/p/14926256.html