文章目录
01.模块化相关规范
1.1.模块化概述
传统开发模式的主要问题:
- ① 命名冲突
- ② 文件依赖
通过模块化解决上述问题:
- 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
- 模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护
模块化的分类:
- 浏览器端的模块化
- 服务器端的模块化
- ES6模块化
1.2.浏览器端的模块化(过时)(了解)
- AMD(Asynchronous Module Definition,异步模块定义),代表产品为:Require.js
- CMD(Common Module Definition,通用模块定义),代表产品为:Sea.js
1.3.服务器端的模块化(了解)
服务器端的模块化规范是使用CommonJS规范:
- 使用require引入其他模块或者包
- 使用exports或者module.exports导出模块成员
- 一个文件就是一个模块,都拥有独立的作用域
1.4.大一统的模块化规范—ES6模块化(重点)
在 ES6 模块化规范诞生之前, Javascript 社区已经尝试并提出了 AMD、 CMD、 CommonJS 等模块化规范,但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、 并不是浏览器与服务器通用的模块化标准,例如:
-
AMD 和 CMD 适用于浏览器端的 Javascript 模块化
-
CommonJS 适用于服务器端的 Javascript 模块化
-
因此, ES6 语法规范中,在语言层面上定义了 ES6 模块化规范,是浏览器端与服务器端
通用的模块化开发规范
。
ES6模块化规范中定义:
- 1).每一个js文件都是独立的模块
- 2).导入模块成员使用
import
关键字 - 3).暴露模块成员使用
export
关键字
1.5.小结
- 推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。
- ES6模块化是浏览器端和服务器端通用的规范.
02.ES6模块化的基本语法
2.1.默认导入/导出
- 默认导出语法:
export default{}
export default {
成员A,
成员B,
.......
}
// 当前文件模块为 m1.js
// 定义私有成员变量 a 和 c,外界访问不到私有成员变量 a 和 c ,因为它没有被暴露出去
let a = 10
let c = 20
//同样也访问不了成员show()函数
function show() {}
// 将本模块中的私有成员暴露出去,供其它模块使用
export default {
a,
c,
show
}
- 默认导入语法 :import 接收名称 from ‘模块标识符’
import m1 from './m1.js'
// 导入模块成员
import m1 from './m1.js'
console.log(m1)
// 打印输出的结果为:
//{ a: 10, c: 20, show: [Function: show] }
注意:
- 在一个模块中,使用export default向外暴露默认成员只能使用一次,千万不要写多个export default。
如果在一个模块中没有向外暴露成员,其他模块引入该模块时将会得到一个空对象
。
2.2.按需导入/导出
- 按需
导出
语法 :export let s1 = 10 - 按需
导入
语法: import { s1 } from '模块标识符 ’ ,
//在一个模块中的成员
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
注意:
-
被导入的模块必须把成员暴露出来,其他模块才能导入,或者按需导入。
-
按需导出
的模块可以使用多次按需导出。
import { num,fn as printFn ,myName } from "./test.js"
//同时导入,其他模块默认导出的成员 以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"
注意:
- 一个模块中导入另外一个模块,既可以按需导入,也可以默认导入。
- 一个模块既可以按需导出,也可以默认导出。
2.3.直接导入并执行代码
- 有时候,我们只想单纯执行某个模块中的代码,并不需要得到模块中向外暴露的成员(或者模块没有向外暴露任何成员),此时可以直接导入并执行模块代码
import "./test2.js";
03.webpack(了解)
后面我们使用Vue脚手架创建Vue项目,里面会内嵌webpack,非常简单。
vue-cli
是脚手架工具体作用就是用配置好的模板快速搭建一个webpack项目工程,省去自己配置webpack配置文件的基本内容
- 做个类比吧
就好像我们使用IDEA的快创建工具可以创建出来一个maven管理的项目一样,使用vue-cli可以快速创建出一个weebpack管理的项目
- 注意:
使用vue-cli创建webpack项目之前要先安装webpack,具体的如何快速创建一个vue项目可以参考这篇文章:
https://blog.csdn.net/weixin_45583303/article/details/111354653
3.1.当前 Web 开发面临的困境
- 当前 Web 开发面临的困境
文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级 Javascript 特性兼容程度较低
etc
3.2.webpack 概述
- webpack是一个流行的
前端项目构建工具
,类比Maven
,可以解决目前web开发的困境。 - webpack提供了模块化支持,代码压缩混淆,解决js兼容问题,性能优化等特性,提高了开发效率和项目的可维护性
- 目前绝大多数企业中的前端项目,都是基于 webpack 进行打包构建的。
3.3.webpack的基本使用
- 使用webpack之前必须要
先安装
NodeJs - 要先在前端项目中安装webpack打包工具,才能使用
npm install webpack -D
npm install webpack-cli -D
提前预知
下面的内容都是手动搭建webpack管理的项目的过程,目的是为了更加深入的了解webpack打包工具的使用,做到知其然知其所以然
,如果不想看可以跳过。
后面会使用vue脚手架快速创建一个基于webpack管理的vue项目
- 项目目录结构
- 项目代码地址:
链接:https://pan.baidu.com/s/1ID1RtXU6bibZaoouMg0Xxg
提取码:qzuc
3.3.1.设置webpack的打包入口/出口:webpack.config.js
在webpack 4.x中
- 会将 src/index.js 作为
默认的打包入口js文件
- 会将 dist/main.js 作为
默认的打包输出js文件
- 如果不想使用默认的入口/出口js文件,我们在
webpack.config.js
设置入口/出口的js文件,如下:
使用脚手架创建的webpack管理的项目中
vue.config.js
等同于webpack.config.js
开发者一般不需要再去知道 webpack 做了什么,所以没有暴露 webpack 的配置文件,但你依然可以创建
vue.config.js
去修改默认的 webpack。
手动创建一个webpack.config.js文件,文件中的内容如下:
const path = require("path");
module.exports = {
//development开发模式,生产模式(代码压缩)production
mode:"development",
//设置入口文件路径
entry: path.join(__dirname,"./src/xx.js"),
//设置出口文件
output:{
//设置路径
path:path.join(__dirname,"./dist"),
//设置文件名
filename:"res.js"
}
}
3.3.2.设置webpack的自动打包:package.json
当我们更改了js文件的代码,要想运行前端项目就需要重新进行打包:npm run dev,那么每次修改过之后都要重新执行命令打包,这是一个非常繁琐的事情,自动打包可以解决这样繁琐的操作。
- 注意:
package.json文件中的scripts节点写的脚本,可以同过npm run 脚本名称来执行
后面要讲到的这个打包命令:
npm run dev
就是通过dev执行里面对应的脚本文件(自动打包功能):webpack-dev-server
- 实现自动打包功能的步骤如下:
前提:在项目中安装依赖:npm install webpack webpack-cli -D
A.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
B.修改package.json中的dev指令如下:
"scripts":{
"dev":"webpack-dev-server"
}
C.在终端运行命令进行打包:npm run dev
D.打开网址查看效果:http://localhost:8080
注意:webpack-dev-server自动打包的输出文件,默认放到了服务器的根目录中
我们常用的
:
我们可以使用ctrl+s来自动打包并运行
- 补充:
在自动打包完毕之后,默认打开服务器网页,实现方式就是打开package.json文件,修改dev命令:
默认打开:"dev": "webpack-dev-server --open"
默认打开并指定IP地址和端口号:"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
3.3.3.webpack中的加载器
通过loader打包非js模块:默认情况下,webpack只能打包js文件,如果想要打包非js文件
,需要调用loader加载器才能打包。
- loader加载器包含:
A).css-loader,style-loader
B).less-loader
C).sass-loader
D).postcss-loader
E).url-loader:打包处理css中与url路径有关的文件
F).babel-loader:处理高级js语法的加载器
注意:指定多个loader时的顺序是固定的,而调用loader的顺序是从后向前进行调用
A.安装style-loader,css-loader来处理样式文件
1).安装包
npm install style-loader css-loader -D
2).配置规则:更改`webpack.config.js`的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader,user数组中指定的loader顺序是固定的
use:['style-loader','css-loader']
}
]
}
}
B.安装less,less-loader处理less文件
1).安装包
npm install less-loader less -D
2).配置规则:更改`webpack.config.js`的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader,user数组中指定的loader顺序是固定的
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
C.安装sass-loader,node-sass处理less文件
1).安装包
npm install sass-loader node-sass -D
2).配置规则:更改`webpack.config.js`的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
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
D.安装post-css自动添加css的兼容性前缀(-ie-,-webkit-)
1).安装包
npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置`postcss.config.js`文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置规则:更改`webpack.config.js`的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
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']
}
]
}
}
E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件,一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
npm install url-loader file-loader -D
2).配置规则:更改`webpack.config.js`的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-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$/,
//limit用来设置字节数,只有小于limit值的图片,才会转换
//为base64图片
use:"url-loader?limit=16940"
}
]
}
}
F.打包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数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-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$/,
//limit用来设置字节数,只有小于limit值的图片,才会转换
//为base64图片
use:"url-loader?limit=16940"
},
{
test:/\.js$/,
use:"babel-loader",
//exclude为排除项,意思是不要处理node_modules中的js文件
exclude:/node_modules/
}
]
}
}
04.Vue单文件组件
4.1.传统组件的缺陷的解决方法
缺陷
1、全局定义的组件不能重名
2、字符串模板缺乏语法高亮,在html有多行的时候,需要用到丑陋的\
3、不支持css(当html和js组件化时,css没有参与其中)
4、没有构建步骤限制,只能使用H5和ES5,不能使用预处理器(babel)
解决方案:
1,使用Vue单文件组件,每个单文件组件的后缀名都是.vue
2、每一个Vue单文件组件都由三部分组成
- 1).template组件组成的模板区域
- 2).script组成的业务逻辑区域
- 3).style样式区域
代码如下:
<template>
<!--这里定义Vue组件的模板内容-->
</template>
<script>
<!--这里定义Vue组件的业务逻辑-->
<!--js代码区-->
export default{
data:(){return{}},//私有数据
methods:{},//处理函数
//.....其他业务逻辑
}
</script>
<style scoped>
<!-- 样式代码区域-->
</style>
- 补充:安装Vetur插件可以使得.vue文件中的代码高亮
4.2.webpack中配置vue组件的加载器
- 配置.vue文件的加载器
A.安装vue组件的加载器
npm install vue-loader vue-template-compiler -D
B.配置规则:更改webpack.config.js的module中的rules数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其他规则
{
test:/\.vue$/,
loader:"vue-loader",
}
]
}
}
05.在webpack中使用vue(了解)
-
我们以后使用Vue脚手架创建项目,这些都是给配置好的
。 -
上一节我们安装处理了vue单文件组件的加载器,想要让vue单文件组件能够使用,我们必须要安装vue,并使用vue来引用vue单文件组件。
A.安装Vue
npm install vue -S
B.在index.js中引入vue:import Vue from "vue"
C.创建Vue实例对象并指定el,最后使用render函数指定要渲染单文件组件
const vm = new Vue({
el:"#app",
render:h=>h(app)
})
06.使用webpack打包发布项目(了解)
在项目上线之前,我们需要将整个项目打包并发布。
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在项目打包之前,可以将dist目录删除,生成全新的dist目录
07.Vue脚手架(重要)
Vue脚手架可以快速生成Vue项目基础的架构,不用像前面那样麻烦的手动创建
。
使用脚手架创建项目之后,我们就可以只关心代码如何编写
,不需要关心项目如何创建
的。
提醒:项目如何创建的最好还是要了解的。
注意:如果前面的了解内容
没有看直接跳过了,那么在使用vue脚手架之前要先安装vue,具体可以参考:https://blog.csdn.net/weixin_45583303/article/details/111354653
7.1.Vue脚手架的安装
- 安装
npm install -g vue-cli
7.2.使用脚手架创建项目
参考:https://blog.csdn.net/weixin_45583303/article/details/111354653
7.3.Vue脚手架生成的项目结构
node_modules:依赖包目录
public:静态资源目录
src:源码目录
src/assets:资源目录
src/components:组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
08.Vue脚手架的自定义配置
A.通过 package.json 进行配置 [不推荐使用]
- package.json主要用来管理包的配置信息,主要为了方便维护,推荐使用将vue脚手架相关配置,单独定义到vue.config.js中。
"vue":{
"devServer":{
"port":"9990",
"open":true
}
}
B.通过单独的配置文件进行配置,在项目根目录创建vue.config.js
module.exports = {
devServer:{
port:8888,
open:true
}
}
C.配置Vue项目中config/index.js文件
module.exports = {
dev: {
host: 'localhost',
port: 8080,
}
}
09.Element-UI的基本使用(要会用)
Element-UI:一套基于2.0的桌面端组件库
官网地址:http://element-cn.eleme.io/#/zh-CN
A.安装:
npm install element-ui -S
B.导入使用:
import ElementUI from “element-ui”;
import “element-ui/lib/theme-chalk/index.css”;
Vue.use(ElementUI)