Vue前端工程化
前端工程化
1.模块化
传统开发模式的主要问题:命名冲突(重名变量覆盖)、文件依赖(js文件相互引用)
模块化:把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。
好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。
-
浏览器端模块化规范
AMD:require.js
CMD:sea.js
-
服务器端模块化规范
CommonJS:
模块分为单文件模块与包;
模块成员导出:module.exportes和exports;
模块成员导入:require('模块标识符')
-
大一统——ES6模块化
每一个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字
2.ES6模块化语法
- 默认导出,只允许使用一次
// export default 默认导出的成员
export default {
// 导出内容
}
- 默认导入
// import 接受名称 from '模块标识符'
import m1 from './m1.js'
- 按需导出,可以使用多次
export let s1 = 10
export function say(){
console.log('aaa');
}
- 按需导入
import {s1 as ss2} from '模块标识符'
- 直接导入并执行模块代码
// import '模块标识符'
import './m2.js'
3.webpack
当前web开发面临的困境:文件依赖关系错综复杂、静态资源请求效率低、模块化支持不友好、浏览器对高级JavaScript特性兼容程度较低……
webpack:前端项目构建工具(打包工具),解决当前web开发中面临的困境
提供友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大功能,提高开发效率和项目的可维护性。
①基本使用
案例:列表隔行变色
- 新建项目空白目录,并运行
npm init -y
,初始化包管理配置文件package.json - 新建src源代码目录
- 新建src->index.html首页
- 初始化首页基本的结构
- 运行
npm install jquery -S
,安装jQuery - 通过模块化的形式,实现列表隔行变色
-
在项目中安装和配置webpack,处理js兼容问题
-
运行
npm install webpack webpack-cli -D
,安装webpack相关的包 -
在项目根目录中哦,创建webpack.config.js的webpack配置文件
-
在webpack的配置文件webpack.config.js中,初始化基本配置
-
module.exports={
mode:'development' //mode指定构建模式 development / production
}
- 在package.json配置文件中的scripts节点下,新增dev脚本
"scripts":{
"dev":"webpack" // script节点下的脚本,可以通过npm run执行
}
- 在终端中运行
npm run dev
,启动webpack进行项目打包
-
配置打包的入口和出口
在webpack的配置文件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' // 输出文件的名称
}
}
-
配置自动打包
-
运行
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生成预览页面
把index复制一份到根目录
-
运行
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'//指定生成的文件的名称,该文件存在于内存中,在目录中不显示
})
- 修改文件中向外暴露的配置对象,新增如下配置节点
module.exports = {
plugins: [ htmlPlugin ] //plugins数组是webpack打包期间会用到的一些插件列表
}
-
配置自动打包的相关参数
package.json
--open:打包完成后自动打开浏览器页面
--post:IP地址
--port:端口号
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port:8888"
}
配置完成后,重启 npm run dev
②加载器loader
webpack默认只能打包处理.js
的模块。
loader加载器:协助webpack打包处理特定的文件模块
-
通过loader打包非js模块
less-loader:打包处理.less相关文件
sass-loader:打包处理.scss相关文件
url-loader:打包处理css中与url路径相关的文件
-
调用过程
![image-20200901103155484](https://gitee.com/xuzichang/blogImg/raw/master/image-20200901103155484.png)
-
基本使用
-
css文件
-
运行
npm i style-loader css-loader -D
,安装处理css的loader -
在webpack.config.js的module->rules数组中,添加loader规则
test:匹配的文件类型;
use:对应要调用的loader,书写顺序固定,调用顺序:从后往前调用
-
-
//所有第三方文件模块的匹配规则
module: {
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader'] }
]
}
-
less文件
-
运行
npm i less-loader less -D
,安装处理less的loader -
在webpack.config.js的module->rules数组中,添加loader规则
-
{ test: /\.less$/, use: [ 'style-loader', 'css-loader','less-loader'] }
-
scss文件
-
运行
npm i sass-loader node-sass -D
,安装处理scss的loader -
在webpack.config.js的module->rules数组中,添加loader规则
-
{ 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 ] //挂载插件
}
3. 在webpack.config.js的module->rules数组中,修改css的loader规则
{ test:/\.css$/,use: ['style-loader','css-loader','postcss-loader'] }
-
打包样式表中的图片和字体文件
-
运行
npm i url-loader file-loader -D
-
在webpack.config.js的module->rules数组中,添加loader规则
?之后的参数limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片才会被转为base64图片
-
{ 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-proposal-class-properties']
}
4. 在webpack.config.js的module->rules数组中,添加loader规则
//exclude为排除项,表示babel-loader不需要处理node_modules 中的js文件
{ test: /\.js$/,use: 'babel-loader',exclude: /node_modules/}
4.Vue单文件组件
传统组件的问题
- 全局定义的组件必须保证组件的名称不重复
- 字符串模板缺乏语法高亮,在html多行时,需要用到\
- 不支持css意味着html和JavaScript组件化时,css被遗漏
- 没有构建步骤限制,只能使用html和es5 JavaScript,而不能使用预处理器如Babel
解决方案:使用Vue单文件组件
①基本用法
后缀名.vue
-
组成结构
template:组件的模块区域【结构】
script:业务逻辑区域【行为】
style:样式区域【表现】
<template>
<div>
<h1>APP根组件</h1>
</div>
</template>
<script>
export default{
data(){
return {}
},
methods:{}
};
</script>
<style scoped>
h1{
color:red;
}
</style>
②webpack中配置vue组件的加载器
-
运行
npm i vue-loader vue-template-complier -D
-
在webpack.config.js的module->rules数组中,添加vue-loader的规则
const vueLoaderPlugin = require ('vue-loager/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",
//......
},
配置文件后,运行npm run build
5.Vue脚手架
用于快速生成vue项目基础架构。npm install -g @vue.cli
error:先卸载旧版本再安装
![](https://upload-images.jianshu.io/upload_images/16535515-1b0eccb54e3f98fc.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp)
①基本用法
npm run server
-
基于交互式命令行的方式
vue create my-project
-
基于图形化的方式
vue ui
-
基于2.x的旧模板
npm install -g @vue/cli-init
vue init webpack my-project
②项目结构分析
![image-20200901105115491](https://gitee.com/xuzichang/blogImg/raw/master/image-20200901105115491.png)
③自定义配置
- 通过package.json配置,不推荐,建议单独定义到vue.config.js配置文件中
//必须是符合规范的json语法
//端口号 自动打开浏览器
"vue": {
"devserver" : {
"port": "8888",
"open" : true
}
}
-
通过单独的配置文件配置
- 在项目根目录创建文件vue.config.js
- 在该文件中进行相关配置,从而覆盖默认配置
module.exports={
devServer : {
port: 8888,
open: true
}
}
6.Element-UI
基于vue2.0的桌面端组件库
①基本使用
- 方法一
-
安装依赖
npm i element-ui -S
-
导入Element-UI相关资源
// main.js
//导入组件库
import ElementUI from 'element-ui';
//导入组件相关样式
import 'elemgnt-ui/lib/theme-chalk/index.css';
//配置vue插件
vue.use (ElementUI);
- 方法二
- 运行
vue ui
命令,打开图形化界面 - 通过vue项目管理器,进入具体的项目配置面板
- 点击插件->添加插件,进入插件查询面板
- 搜索
vue-cli-plugin-element
并安装 - 配置插件,选择按需导入
import on demand
,从而减少打包后项目的体积