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

06Vue的前端工程化

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脚手架的基本用法

相关阅读更多精彩内容

友情链接更多精彩内容

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脚手架的基本用法

相关阅读更多精彩内容

友情链接更多精彩内容

一模块化规范