模块化的相关规范
传统开发模式的主要问题
- 命名冲突
- 文件依赖
通过模块化解决上述问题
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块。方便代码的重用，从而提升开发效率，并且方便后期的维护
服务器端模块化规范
CommonJS
- 模块分为 单文件模块 与 包
- 模块成员导出：
module.exports和 exports - 模块成员导入：
require('模块标识符')
ES6模块化规范
浏览器端与服务器端通用的模块化开发规范
定义：
- 每个 js文件都是一个独立的模块
- 导入模块成员使用
import关键字 - 暴露模块成员使用
export关键字
node.js通过 babel 体验 ES6 模块化规范
- 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 index.js 执行代码
默认导出 与 默认导入
默认导出 export default 成员
每个模块之运行使用一次
export default
// 每个模块之运行使用一次 export default
export default {
成员A,
成员B,
.......
},
//如下：
let num = 100;
export default{
num
}
默认导入 import 接收名称 from "模块标识符"成员
import 接收名称 from "模块标识符"，
//如下：
import test from "./test.js"
按需导入/导出
按需导出 export let s1 = 1
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
按需导入 import { s1 } from '模块标识符'
import { num,fn as printFn ,myName } from "./test.js"
//同时导入默认导出的成员以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"
注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出
直接导入并执行模块代码 import '模块标识符'
导入代码之后可以直接执行，不需要再次调用
比如import "./test2.js"不需要定义名字
webpack
webpack是一个流行的前端项目构建工具（打包工具），可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性
基本使用
- 创建列表隔行变色项目
- 创建项目，并打开项目所在目录的终端，输入命令：
npm init -y - 创建 src 目录 在里面创建 index.html页面,初始化首页基本的结构
- 运行
npm install jquery –S命令，安装 jQuery - 通过模块化的形式，实现列表隔行变色效果
- 创建项目，并打开项目所在目录的终端，输入命令：
- 在项目中安装和配置 webpack
- 安装 webpack 相关包，运行
npm install webpack webpack-cli -D - 在项目根目录创建 webpack.config.js的 webpack配置文件
- 安装 webpack 相关包，运行
module.exports = {
mode: 'development' // mode 用来指定构建模式
}
- package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行
}
- 运行
npm run dev命令，启动 webpack进行项目打包 - 配置打包的入口与出口
- 入口文件 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' // 输出文件的名称
}
}
- 配置 webpack 的自动打包功能
- webpack-dev-server 会启动一个实时打包的 http服务器
- webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的
- 运行
npm install webpack-dev-server –D命令，安装支持项目自动打包的工具 - 修改 package.json -> scripts 中的 dev 命令如下：
- 运行
"scripts": {
"dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
}
- 将 src -> index.html 中，script 脚本的引用路径，修改为 “/buldle.js”
- 运行
npm run dev命令，重新进行打包 - 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
- 配置 html-webpack-plugin 生成预览页面
- 在 webpack.config.js 中新增如下配置信息
module.exports = {
// 静态资源服务配置
devServer: {
// contentBase告诉服务器从哪个目录提供内容，只有在加载静态文件时才需要。
contentBase: './src', // 修改初始路径 相对与webpack.config.js文件所在的目录
open: true // 自动开启浏览器
}
}
- 配置自动打包相关的参数
// package.json中的配置
// --open 打包完成后自动打开浏览器页面
// --host 配置 IP 地址
// --port 配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},
加载器
通过 loader 打包非 js 模块
在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结 尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 调用过程
加载器的基本使用
打包处理 css 文件
- 运行
npm i style-loader css-loader -D命令，安装处理 css文件的 loader - 在 webpack.config.js 的 module -> rules 数组中，添加 loader规则如下：
- 其中，test表示匹配的文件类型， use表示对应要调用的 loader
- use数组中指定的 loader顺序是固定的
- 多个 loader的调用顺序是：从后往前调用
- 其中，test表示匹配的文件类型， use表示对应要调用的 loader
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
打包处理 less 文件
- 运行
npm i less-loader less -D命令 - 在 webpack.config.js 的 module -> rules 数组中，添加 loader规则如下
// 所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
打包处理 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'] }
]
}
配置 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'] }
]
}
打包样式表中的图片和字体文件
- 运行
npm i url-loader file-loader -D命令 - 在 webpack.config.js 的module -> rules 数组中，添加 loader规则如下
- 其中 ? 之后的是 loader 的参数项。
- limit用来指定图片的大小，单位是字节(byte),只有小于 limit大小的图片，才会被转为 base64图片
module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}
打包处理 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-proposalclass-properties' ]
}
- 在 webpack.config.js 的 module -> rules 数组中，添加 loader规则如下
// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
Vue单文件组件
针对传统组件的问题，Vue 提供了——Vue 单文件组件
问题：
- 全局定义的组件必须保证组件的名称不重复
- 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）
组件的组成结构
- template 组件的模板区域
- script 业务逻辑区域
- style 样式区域
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$/, use: 'vue-loader' }
]
},
plugins: [
// ... 其它插件
new VueLoaderPlugin() // 请确保引入这个插件！
]
}
在 webpack 项目中使用 vue
- 运行
npm i vue -S安装 vue - 在 src -> index.js 入口文件中，通过
import Vue from 'vue'来导入 vue 构造函数 - 创建 vue 的实例对象，并指定要控制的 el区域
- 通过 render 函数渲染 App根组件
// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'
const vm = new Vue({
// 3. 指定 vm 实例要控制的页面区域
el: '#app',
// 4. 通过 render 函数，把指定的组件渲染到 el 区域中
render: h => h(App)
})
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 3000",
},
Vue脚手架
基本用法
Vue脚手架用于快速生成 Vue 项目基础架构，官网地址
安装 3.x 版本的Vue脚手架：npm install -g @vue/cli
检查时候安装完成并查看版本号：vue -V
脚手架创建vue项目
前面两个重点学习，后面一个了解即可
// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式，创建 新版 vue 项目
vue ui
// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project
手动安装：
选择安装的功能 ->
选择版本 2.x/3.x ->
历史模式的路由(y)和hash模式的路由(n) ->
选择EXLint语法版本（推荐使用EXLint + Standard config) ->
什么时候进行EXLint语法校验（默认即可）->
工具的配置文件怎么创建 (单独的配置文件/统一放到package.json文件)推荐第一个 ->
是否把当前选择保存一个模板 y/n ->
择要使用的包管理器 Yarn/NPM
Vue 脚手架的自定义配置
- 通过 package.json 配置项目
- 不推荐使用这种配置方式。
- 因为 package.json 主要用来管理包的配置信息；为了方便维护，推荐将 vue 脚 手架相关的配置，单独定义到 vue.config.js 配置文件中。
- 不推荐使用这种配置方式。
// 必须是符合规范的json语法
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
}
- 通过单独的配置文件配置项目
- 在项目的跟目录创建文件 vue.config.js
- 在该文件中进行相关配置，从而覆盖默认配置
// vue.config.js
module.exports = {
devServer: {
port: 8888
}
}
Element-UI的基本使用
为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。 官网地址
基于命令行方式手动安装
- 安装依赖包
npm i element-ui –S - 导入
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 并安装
- 配置插件，实现按需导入，从而减少打包后项目的体积
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
