06Vue的前端工程化

Vue的前端工程化

一模块化规范

1.1模块化规范举例

浏览器端JS模块化规范：AMD，CMD
服务器端JS模块化规范：CommonJS
大一统的模块化规范：ES6
- 每个js文件都是独立的模块
- 导入模块成员使用import关键字
- 暴露模块成员使用export关键字

1.2 babel

加载babel的模块

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 执行代码

npx babel-node .\index.js

1.3 默认导出和默认导入

默认导出语法 export default 只允许使用一次
若没有 export default 则默认导入一个空对象

实例：

导出模块 m1.js

let a = 10
let b = 20
let c = 30

function show(){
    console.log("Hello World")
}

export default {
    a,
    b,
    show
}

导入模块 index.js

import m1 from "./m1.js"

console.log(m1)

运行

npx babel-node index.js

1.4 按需导出与按需导入

每个模块可以使用多次按需导出
按需导出和导入可以与默认导出和导入共同使用，互不影响

实例：

导出模块 m1.js

let a = 10
let b = 20
let c = 30

function show(){
    console.log("Hello World")
}
//默认导出
export default {
    a,
    b,
    show
}
//按需导出
export let s1 = "yorick"
export let s2 = "tom"
export function sayHello(){
    console.log("Hello")
}

导入模块 index.js

//m1为默认导入，{}内的为按需导入
import m1,{s1,s2 as ss2,sayHello} from "./m1.js"

console.log(m1)
console.log(s1)
console.log(ss2)
console.log(sayHello)

运行

PS D:\study\code\test\vue> npx babel-node .\index.js
{ a: 10, b: 20, show: [Function: show] }    
yorick
tom
[Function: sayHello]

1.5 直接导入并执行代码

实例：

需要直接导入的模块 m2.js

for(let i=0 ; i<3 ; i++){
    console.log(i)
}

导入模块 index.js

import "./m2.js"

执行

PS D:\study\code\test\vue> npx babel-node .\index.js
0
1
2

二 Webpack打包工具

2.1 webpack概述

image-20210128101239202.png

2.2 webpack基本使用

创建列表隔行变色项目

新建空目录，运行 npm init -y 初始化包管理配置
新建 src 源代码目录
在 src 目录下创建 index.html 首页
初始化首页的结构
运行 npm install jquery 安装 jquery
通过模块化的形式实现列表隔行变色的效果（需要使用webpack解决es6兼容性问题）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./index.js"></script>
</head>
<body>
  <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
  </ul>
</body>
</html>

index.js

import $ from "jquery"

$(function(){
    $("li:odd").css("backgroundColor","pink")
    $("li:even").css("backgroundColor","lightblue")
})

在项目中安装和配置webpack

运行 npm install webpack webpack-cli -D 命令，安装webpack
在项目根目录下，创建名为 webpack.config.js 的配置文件，在文件中初始化构建模式

module.exports = {
    mode: "development" // development 为开发模式 production 为上线模式（压缩混淆）
}

在 package.json 中的 scripts 节点下，新增 dev 脚本

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

将 index.html 中的src引入替换为webpack生成的文件

<script src="../dist/main.js"></script>

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

PS D:\study\code\test\vue\webpack-project> npm run dev

> webpack-project@1.0.0 dev D:\study\code\test\vue\webpack-project
> webpack

asset main.js 322 KiB [emitted] (name: main)
runtime modules 931 bytes 4 modules
cacheable modules 281 KiB
  ./src/index.js 143 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 281 KiB [built] [code generated]
webpack 5.18.0 compiled successfully in 296 ms

配置打包的入口和出口

默认约定：

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

修改打包的入口和出口配置，在 webpack.config.js 中添加如下配置

const path = require("path")
module.exports = {
    mode: "development", // development 为开发模式 production 为上线模式（压缩混淆）
    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" 
}

将 src -> index.html 中的 script 引用路径改为 "/bundle.js"
运行 npm run dev 重新打包
在浏览器 http://localhost:8080 查看自动打包效果

注意：版本的兼容问题，下方版本可以正常使用

"devDependencies": {
    "webpack": "^5.18.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },

配置 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打包期间会用到的插件列表
}

配置自动打包的相关参数

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

2.3 webpack的加载器

loader的调用流程

image-20210129125229232.png

打包处理css文件

运行 npm install style-loader css-loader -D 命令，安装处理css文件的loader
在webpack.config.js 的 module -> rules 数组中添加loader

// test 表示匹配的文件类型，use表示调用的loader
// user数组中指定的loader加载顺序是固定的，多个loader的调用顺序是从后往前调用
module: {
    rules: [
        {test:/\.css$/,use:["style-loader","css-loader"]}
    ]
}

打包处理less文件

运行 npm install less-loader less -D 命令
在 webpack.config.js 的 module -> rules 数组中添加规则

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

打包处理scss文件

运行 npm install sass-loader node-sass -D 命令
在 webpack.config.js 的 module -> rules 数组中添加规则

module: {
    rules: [
        {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}
    ]
}

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

运行 npm install 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 install url-loader file-loader -D 命令
在 webpack.config.js 的 module -> rules 数组中加入规则

// loader的?之后用来指定图片的大小，单位字节，小于limit大小的图片会被转为 base64 图片
module: {
    rules: [
        {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:["url-loader?limit=100000"]}
    ]
}

打包处理js文件的高级语法部分

安装 babel 转换器相关包 npm install babel-loader @babel/core @babel/runtime -D
安装 babel 语法插件包 npm install @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规则

module: {
    rules: [
        {test:/\.js$/,use:["babel-loader"],exclude: /node_modules/}
    ]
}

三 Vue单文件组件

3.1 Vue单文件组件的基本用法

<template>
    <div>
        <h1>App 根组件</h1>
    </div>
</template>

<script>
export default {
    data:function(){
        return {}
    },
    methods: {}
}
</script>

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

3.2 webpack中配置 vue 组件的加载器

运行 npm install 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()
    ]
}

3.3 在webpack中使用vue

运行 npm install vue -S 安装 vue
在 src -> index.js 入口文件中，通过 import Vue from "vue" 导入vue的构造函数
创建vue的实例对象，并指定控制的el区域
通过 render 函数渲染 App 根组件

import Vue from "vue"
import App from "../components/App.vue"

const vm = new Vue({
    el: "#app",
    // 通过 render 函数，把指定的组件渲染到 el 区域
    render: h => h(App)
})

3.4 webpack的打包发布

在 package.json 文件配置打包命令

"scripts":{
    "build": "webpack -p"
}

四 Vue 脚手架

4.1 Vue脚手架的基本用法

安装Vue脚手架

# 卸载之前版本
npm uninstall -g vue-cli
npm install -g @vue/cli
# 查看版本
vue -V

基于命令行构建vue项目

vue create my-project

基于ui构建vue项目

vue ui

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

06Vue的前端工程化

Vue的前端工程化

一 模块化规范

1.1模块化规范举例

1.2 babel

1.3 默认导出和默认导入

1.4 按需导出与按需导入

1.5 直接导入并执行代码

二 Webpack打包工具

2.1 webpack概述

2.2 webpack基本使用

2.3 webpack的加载器

三 Vue单文件组件

3.1 Vue单文件组件的基本用法

3.2 webpack中配置 vue 组件的加载器

3.3 在webpack中使用vue

3.4 webpack的打包发布

四 Vue 脚手架

4.1 Vue脚手架的基本用法

推荐阅读更多精彩内容

一模块化规范