Vue学习笔记5--前端工程化
前端工程化
完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ
模块化相关规范
概述
传统开发问题
- 命名冲突
- 文件依赖
模块化
-
含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块
-
好处：方便代码重用，提升开发效率，方便后期维护
浏览器端模块化规范
- AMD（Require.js）
- CMD（Sea.js）
服务器端模块化规范
- CommonJS
- 模块分为单文件模块和包
- 模块成员导出：module.exports 和 exports
- 模块成员导入：require(‘模块标识符’)
大一统模块发规范：ES6模块化
- 语言层面定义模块化规范，浏览器端和服务器端通用的模块化开发规范
定义：
- 每个js文件都是一个独立的模块
- 导出模块成员使用 export关键字
- 导入模块成员使用 import 关键字
node.js中通过babel使用es6模块化
- 安装bable
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 默认导出成员
- import 接收名称 from ‘模块标识符’
//m1.js
let a = 10;
let c = 20;
//不对外界暴露
let d = 30;
function show() {
console.log('m1test')
}
export default {
a,
b,
show,
};
//index.js
import m1 from './m1.js';
console.log(m1);
m1.show();
//输出{ a: 10, c: 20, show: [Function: show] }
- 按需导出 和 按需导入
- export let s1 = 10
- import { s1 } from ‘模块标识符’
//m1.js
export let s1 = '111';
export let s2 = '222';
export function say() {
console.log('hello world!');
}
//index.js 可以与默认导入同时存在import m1,{ s1, s2 as ss2, say} from './m1.js';
import { s1, s2 as ss2, say} from './m1.js';
console.log(s1);
console.log(ss2);
console.log(say());
/* 结果
111
222
hello world!
*/
-
直接导入并执行模块代码
使用场景：只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员
//m1.js 没有方法，只有代码片段
for (let i = 0; i < 3; i++) {
console.log(i);
}
//直接导入并执行代码
import './m1.js'
/* result
0
1
2 */
webpack使用
传统web开发困境
- 文件依赖关系复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级JavaScript特性兼容程度低
webpack概述
前端项目构建工具（打包工具）友好的模块化支持，处理js兼容问题，性能优化
基本使用
- 创建项目的空白目录，进入执行下面代码，初始化包管理配置文件
npm init -y
-
新建src源代码目录
-
src下新建index.html
-
初始化首页基本结构（导入webpack打包之后的包）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="../dist/main.js">script>
head>
<body>
<ul>
<li>这是第1个lili>
<li>这是第2个lili>
<li>这是第3个lili>
<li>这是第4个lili>
<li>这是第5个lili>
<li>这是第6个lili>
<li>这是第7个lili>
<li>这是第8个lili>
<li>这是第9个lili>
ul>
body>
html>
- 安装jQuery
npm insatll jquery -S
- 通过模块化形式实现列表隔行变色（index.js）
import $ from 'jquery';
$(function () {
$('li:odd').css('backgroundColor', 'pink');
$('li:even').css('backgroundColor', 'lightblue');
});
- 运行命令安装webpack相关包
npm install webpack webpack-cli -D
- 项目根路径创建webpack.config.js的webpack配置文件
module.exports = {
mode: 'development'// mode用来指定构建模式 开发不压缩代码
}
- 在package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack" //scripts 节点下的脚本可以通过npm run 执行
}
- 在终端中运行下面命令，启动webpack进行项目打包
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的自动打包功能
每次更新代码后都需要重新打包
- 安装支持项目自动打包的工具
npm install webpack-dev-server -D
- 修改 package.json --> scripts节点中dev命令
"scripts": {
"dev": "webpack-dev-server" //scripts 节点下的脚本可以通过npm run 执行
}
- 将 src -> index.html中 script 脚本引用路径改为 “/buldle.js”
- 运行命令
npm run dev
- 浏览器中 访问 http://locahost:8080 查看打包效果
备注
- webpack-dev-server 会启动一个实施打包的http服务器
- webpack-dev-server 打包生成的输出文件默认放到项目根路径，是虚拟的
配置html-webpack-plugin 生成预览页面
将src目录下的index.html页面复制到根目录，浏览器访问时直接访问首页
- 安装预览页面的插件
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打包期间会用到的一些插件列表
}
项目运行后自动打开浏览器
package.json配置
// --open 打包完成后自动打开浏览器
// --host 配置IP地址
// --port 配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080" //scripts 节点下的脚本可以通过npm run 执行
}
webpack中的加载器
打包非js模块
webpack默认只打包处理 .js 后缀名的结尾的模块，其他模块需调用loader加载器才能正常打包，否则会报错
例如：
- less-loader: 可以打包处理 .less 文件
- sass-loader: 可以打包处理 .scss文件
- url-loader: 可以打包处理css中与url路径相关的文件
基本使用
打包处理css文件
- 创建1.css文件
li{
list-style: none;
}
- index.js 中导入
import './css/1.css';
- 安装处理css文件的loader
npm i style-loader css-loader -D
- 在webpack.config.js 的module.exports --> module --> rules 数组中添加规则
module: {
rules: [
{ test: /\.css$/,use: ['style-loader','css-loader'] }
]
}
test 匹配文件类型（正则）use 表示对应调用的 loader
use 中配置的加载器顺序是固定的
打包处理less文件
- 安装less相关加载器
npm i less-loader less -D
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
module: {
rules: [
{ test: /\.less$/,use: ['style-loader','css-loader','less-loader'] }
]
}
打包sass文件
- 安装sass相关加载器
npm i sass-loader node-sass -D
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
module: {
rules: [
{ test: /\.sass$/,use: ['style-loader','css-loader','sass-loader'] }
]
}
配置postCSS自动添加兼容前缀
- 安装postCSS相关加载器
npm i postcss-loader autoprefixer -D
- 在项目根目录创建postcss 的配置文件 postcss.config.js
const autoprefixer = require('autoprefixer')//导入自动添加前缀的插件
module.exports = {
plugins: { autoprefixer } //挂载插件
}
- webpack.config.js 的module.exports --> module --> rules 数组中 添加/修改 规则
module: {
rules: [
{ test: /\.css$/,use: ['style-loader','css-loader'，'postcss-loader'] }
]
}
打包样式表中的图片和字体文件
- 安装相关加载器
npm i url-loader file-loader -D
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'
}
]
}
? 之后是loader的参数项
limit 用来指定图片的大小，单位是字节（byte），之后小于limit大小的图片，才会被转为base64图片
打包JavaScript的高级语法
- 安装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.exports --> module --> rules 数组中添加规则
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
}
Vue 单文件组成
传统组件问题和解决方案
问题
- 全局定义的组件必须保证组件名称不重复
- 字符串模板没有语法高亮
- 不支持css
- 没有构建步骤限制，不能使用预处理器（babel）
解决方案
- 使用Vue单文件组件
基本用法
组成结构
- template: 组件模板区域
- script：业务逻辑区域
- style：样式区域
<template>
<div>div>
template>
<script>
//定义组件的业务逻辑
export default {
data() {
//私有数据
return {};
},
methods: {},
};
script>
<style scoped>
/* 定义组件样式 scoped保证样式私有不冲突 */
style>
webpack配置vue文件加载器
- 安装vue文件加载器相关包
npm i vue-loader vue-template-compiler -D
- webpack.config.js 的module.exports --> module --> rules 数组中添加规则
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [{ test: /\.vue$/, loader: 'vue-loader' }],
},
plugins: [
//确保引入这个插件
new VueLoaderPlugin()
]
};
webpack项目中使用vue
- 安装vue
npm i vue -S
- 在src -> index.js 入口文件中通过导入vue构造函数
import Vue from 'vue'
- 创建vue实例对象，指定要控制的 el 区域
- 通过render函数渲染App根组件
import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({
el: '#app',
render: h => h(App)
})
webpack打包发布
- 配置package.json文件，配置打包命令，该命令默认加载webpack.config.js 配置文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080",
"bulid": "webpack -p"
}
- 运行打包命令(最好打包之前删除dist目录)
npm run bulid
Vue脚手架
用于快速生成Vue项目的基础架构
安装
- 安装Vue脚手架
npm install -g @vue/cli
创建项目
- 方式一：交互式命令
vue create my-project
- 方式二：图形化界面
vue ui
- 方式三：基于 2.0 的旧模板 创建旧版vue项目
npm install -g @vue/cli-init
vue init webpack my-project
自定义配置
- 通过 package.json 配置项目，新增下面代码，配置端口和自动打开浏览器
"vue": {
"devServer": {
"port": 8888,
"open": true
}
}
不推荐此方式，package.json 主要是管理包的配置信息的。为了方便维护，推荐将配置单独定义到 vue.config.js 中
- 通过单独配置文件配置项目，项目根目录创建文件 vue.config.js
module.exports = {
devServer: {
port: 8888,
open: true
}
}
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 并安装
- 配置插件，实现按需导入，从而减少打包后的项目体积