关于vue.js:Vue基础前端工程化一

5次阅读

共计 8324 个字符，预计需要花费 21 分钟才能阅读完成。

传统开发模式的次要问题

命名抵触
文件依赖

通过模块化解决上述问题

模块化就是把独自的一个性能封装到一个模块（文件）中，模块之间互相隔离，然而能够通过特定的接口公开外部成员，也能够依赖别的模块
模块化开发的益处：不便代码的重用，从而晋升开发效率，并且不便前期的保护

AMD(Asynchronous Module Definition, 异步模块定义)
代表产品为：Require.js
CMD(Common Module Definition, 通用模块定义)
代表产品为：Sea.js

CommonJS

模块分为单文件模块与包
模块成员导出：module.exports 和 exports
模块成员导入：require(‘ 模块标识符 ’)

在 ES6 模块化标准诞生之前，Javascript 社区曾经尝试并提出了 AMD、CMD、CommonJS 等模块化标准。

然而，这些社区提出的模块化规范，还是存在肯定的差异性与局限性、并不是浏览器与服务器通用的模块化规范，例如：

AMD 和 CMD 实用于浏览器端的 Javascript 模块化
CommonJS 实用于服务器端的 Javascript 模块化

因而，ES6 语法标准中，在语言层面上定义了 ES6 模块化标准，是浏览器端与服务器端通用的模块化开发标准。

ES6 模块化标准中定义：
每个 js 文件都是一个独立的模块
导入模块成员应用 import 关键字
裸露模块成员应用 export 关键字

1.Node.js 中通过 babel 体验 ES6 模块化

① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
② npm install --save @babel/polyfill
③ 我的项目跟目录创立文件 babel.config.js
④ 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 执行代码

1. 默认导出与默认导入

默认导出语法 export default 默认导出的成员
默认导入语法 import 接管名称 from ‘ 模块标识符 ’

// 以后文件模块为 m1.js
// 定义公有成员 a 和 c
let a = 10
let c = 20
// 外界拜访不到变量 d , 因为它没有被裸露进来
let d = 30
function show() {}
// 将本模块中的公有成员裸露进来，供其它模块应用
export default {
    a,
    c,
    show
}

// 导入模块成员
 import m1 from './m1.js'
 console.log(m1)
 // 打印输出的后果为：// {a: 10, c: 20, show: [Function: show] }

留神：每个模块中，只容许应用惟一的一次 export default，否则会报错！

2. 按需导出与按需导入

按需导出语法 export let s1 = 10
按需导入语法 import {s1} from ‘ 模块标识符 ’

// 以后文件模块为 m1.js
// 向外按需导出变量 s1
export let s1 = 'aaa' 
// 向外按需导出变量 s2
export let s2 = 'ccc'
// 向外按需导出办法 say
export function say = function() {}

// 导入模块成员
//as 示意重命名
 import {s1, s2 as ss2, say} from './m1.js'
 console.log(s1) // 打印输出 aaa
 console.log(ss2) // 打印输出 ccc
 console.log(say) // 打印输出 [Function: say]

留神：每个模块中，能够应用屡次按需导出

3. 间接导入并执行模块代码

有时候，咱们只想单纯执行某个模块中的代码，并不需要失去模块中向外裸露的成员，此时，能够间接导入并执行模块代码。

// 以后文件模块为 m2.js
// 在以后模块中执行一个 for 循环操作
for(let i = 0; i < 3; i++) {console.log(i)
}

// 间接导入并执行模块代码
 import './m2.js'

文件依赖关系盘根错节
动态资源申请效率低
模块化反对不敌对
浏览器对高级 Javascript 个性兼容水平较低
etc…

webpack 是一个风行的前端我的项目构建工具（打包工具），能够解决以后 web 开发中所面临的窘境。
webpack 提供了敌对的模块化反对，以及代码压缩混同、解决 js 兼容问题、性能优化等弱小的性能，从而让程序员把
工作的重心放到具体的性能实现上，进步了开发效率和我的项目的可维护性。

目前绝大多数企业中的前端我的项目，都是基于 webpack 进行打包构建的。

1. 创立列表隔行变色我的项目

① 新建我的项目空白目录，并运行 npm init –y 命令，初始化包治理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页, 在我的项目目录中创立 js 文件夹，并在文件夹中创立 index.js 文件
④ 初始化首页根本的构造
⑤ 运行 npm install jquery –S 命令，装置 jQuery
⑥ 通过模块化的模式，实现列表隔行变色成果

关上 index.js 文件，编写代码导入 jQuery 并实现性能：

import $ from "jquery";
$(function(){$("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

留神：此时我的项目运行会有谬误，因为 import $ from "jquery"; 这句代码属于 ES6 的新语法代码，在浏览器中可能会存在兼容性问题
所以咱们须要 webpack 来帮忙咱们解决这个问题。

2. 在我的项目中装置和配置 webpack

① 运行 npm install webpack webpack-cli –D 命令，装置 webpack 相干的包
② 在我的项目根目录中，创立名为 webpack.config.js 的 webpack 配置文件
③ 在 webpack 的配置文件中，初始化如下根本配置：

module.exports = {mode: 'development' // mode 用来指定构建模式}

④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

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

⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行我的项目打包。

3. 配置打包的入口与进口

webpack 的 4.x 版本中默认约定：
打包的入口文件为 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' // 输入文件的名称
    }
}

4. 配置 webpack 的主动打包性能

① 运行 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 地址(它指定的地址)，查看主动打包成果

留神：
webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输入文件(buldle.js)，默认放到了我的项目根目录中，而且是虚构的、看不见的

此时在终端中运行 npm run dev 命令呈现了谬误
Error: Cannot find module ‘webpack-cli/bin/config-yargs’

把 webpack-cli 版本升高后解决了问题
npm i webpack-cli@3.3.12 -D

// 应用的配置
"devDependencies": {
"webpack": "^5.35.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}

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

6. 配置主动打包相干的参数

// package.json 中的配置
 // --open 打包实现后主动关上浏览器页面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8088"},

1. 通过 loader 打包非 js 模块

在理论开发过程中，webpack 默认只能打包解决以 .js 后缀名结尾的模块，其余非 .js 后缀名结尾的模块，webpack 默认解决不了，须要调用 loader 加载器才能够失常打包，否则会报错！

loader 加载器能够帮助 webpack 打包解决特定的文件模块，比方：

less-loader 能够打包解决 .less 相干的文件
sass-loader 能够打包解决 .scss 相干的文件
url-loader 能够打包解决 css 中与 url 门路相干的文件

2. loader 的调用过程

2.4 webpack 中加载器的根本应用

CSS
LESS
SCSS
PostCSS
JavaScript
Image/Font
Vue

1. 打包解决 css 文件

① 运行 npm i style-loader css-loader -D 命令，装置解决 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，增加 loader 规定如下：

// 所有第三方文件模块的匹配规定
 module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}

其中，test 示意匹配的文件类型，use 示意对应要调用的 loader
留神：
use 数组中指定的 loader 程序是固定的
多个 loader 的调用程序是：从后往前调用

2. 打包解决 less 文件

① 运行 npm i less-loader less -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，增加 loader 规定如下：

// 所有第三方文件模块的匹配规定
 module: {
    rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

3. 打包解决 scss 文件

① 运行 npm i sass-loader node-sass -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，增加 loader 规定如下：

// 所有第三方文件模块的匹配规定
 module: {
    rules: [{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
    ]
}

4. 配置 postCSS 主动增加 css 的兼容前缀

① 运行 npm i 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'] }
    ]
}

5. 打包样式表中的图片和字体文件

① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，增加 loader 规定如下：

module: {
    rules: [{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940'}
    ]
}

其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte), 只有小于 limit 大小的图片，才会被转为 base64 图片

6. 打包解决 js 文件中的高级语法

① 装置 babel 转换器相干的包：npm i babel-loader @babel/core @babel/runtime -D
② 装置 babel 语法插件相干的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
③ 在我的项目根目录中，创立 babel 配置文件 babel.config.js 并初始化根本配置如下：

module.exports = {presets: [ '@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties’]
}

④ 在 webpack.config.js 的 module -> rules 数组中，增加 loader 规定如下：

// exclude 为排除项，示意 babel-loader 不须要解决 node_modules 中的 js 文件
 {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

3.1 传统组件的问题和解决方案

1. 问题

全局定义的组件必须保障组件的名称不反复
字符串模板不足语法高亮，在 HTML 有多行的时候，须要用到俊俏的 \
不反对 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 显著被脱漏
没有构建步骤限度，只能应用 HTML 和 ES5 JavaScript, 而不能应用预处理器（如：Babel）

2. 解决方案
针对传统组件的问题，Vue 提供了一个解决方案 —— 应用 Vue 单文件组件。

3.2 Vue 单文件组件的根本用法

单文件组件的组成构造

template 组件的模板区域
script 业务逻辑区域
style 款式区域

<template>
 <!-- 这里用于定义 Vue 组件的模板内容 -->
 </template>
 <script>
 // 这里用于定义 Vue 组件的业务逻辑
 export default {data: () {return {} }, // 公有数据
 methods: {} // 处理函数
 // ... 其它业务逻辑
 }
 </script>
 <style scoped>
 /* 这里用于定义组件的款式 */
 </style>

补充：装置 Vetur 插件能够使得.vue 文件中的代码高亮(vscode)

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

① 运行 npm i vue-loader vue-template-compiler -D 命令
② 在 webpack.config.js 配置文件中，增加 vue-loader 的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    module: {
    rules: [
        // ... 其它规定
        {test: /\.vue$/, loader: 'vue-loader'}
    ]
    },
    plugins: [
        // ... 其它插件
        new VueLoaderPlugin() // 请确保引入这个插件！]
}

3.4 在 webpack 我的项目中应用 vue

① 运行 npm i vue –S 装置 vue
② 在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
③ 创立 vue 的实例对象，并指定要管制的 el 区域
④ 通过 render 函数渲染 App 根组件

//App.vue
<template>
    <div>
        <h1> 测试 </h1>
    </div>
    
</template>

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

</script>

<style scoped>
h1 {color:aquamarine;}

</style>

//index.js
import Vue from 'vue';
// 导入根组件
import App from './components/App.vue';

const vm = new Vue({
    el: '#app',
    render: h => h(App)

})

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./index.js"></script> -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <script src="/bundle.js"></script>
</head>

<body>
    <ul>
        <li> 第 1 </li>
        <li> 第 2 </li>
        <li> 第 3 </li>
    </ul>

    <div id="box"></div>

    <!-- 将要要被 vue 管制的区域 -->
    <div id="app"></div>
</body>

</html>

3.5 webpack 打包公布

上线之前须要通过 webpack 将利用进行整体打包，能够通过 package.json 文件配置打包命令:

// 在 package.json 文件中配置 webpack 打包命令
// 该命令默认加载我的项目根目录中的 webpack.config.js 配置文件
"scripts": {
    // 用于打包的命令
    "build": "webpack -p",
}

在我的项目打包之前，能够将 dist 目录删除，生成全新的 dist 目录

正文完

vue.js

发表至： vue.js

2021-04-23

0

关于vue.js:Vue学习笔记三

关于vue.js:vue组件略佳操作

关于vue.js:Vue学习笔记四

关于vue.js:将eldatepicker从开始时间后限制可选范围为6个月

关于golang:聊聊dbsync的jobs

关于vue.js:Vue基础前端工程化一

1. 模块化相干标准

1.1 模块化概述

1.2 浏览器端模块化标准

1.3 服务器端模块化标准

1.4 大一统的模块化标准 – ES6 模块化

1.Node.js 中通过 babel 体验 ES6 模块化

1.5 ES6 模块化的根本语法

1. 默认导出与默认导入

2. 按需导出与按需导入

3. 间接导入并执行模块代码

2. webpack

2.1 以后 Web 开发面临的窘境

2.1 webpack 概述

2.2 webpack 的根本应用

1. 创立列表隔行变色我的项目

2. 在我的项目中装置和配置 webpack

3. 配置打包的入口与进口

4. 配置 webpack 的主动打包性能

5. 配置 html-webpack-plugin 生成预览页面

6. 配置主动打包相干的参数

2.3 webpack 中的加载器

1. 通过 loader 打包非 js 模块

2. loader 的调用过程

2.4 webpack 中加载器的根本应用

3. Vue 单文件组件

3.1 传统组件的问题和解决方案

3.2 Vue 单文件组件的根本用法

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

3.4 在 webpack 我的项目中应用 vue

3.5 webpack 打包公布

站内搜索

关于vue.js:Vue基础前端工程化一

1. 模块化相干标准

1.1 模块化概述

1.2 浏览器端模块化标准

1.3 服务器端模块化标准

1.4 大一统的模块化标准 – ES6 模块化

1.Node.js 中通过 babel 体验 ES6 模块化

1.5 ES6 模块化的根本语法

1. 默认导出 与 默认导入

2. 按需导出 与 按需导入

3. 间接导入并执行模块代码

2. webpack

2.1 以后 Web 开发面临的窘境

2.1 webpack 概述

2.2 webpack 的根本应用

1. 创立列表隔行变色我的项目

2. 在我的项目中装置和配置 webpack

3. 配置打包的入口与进口

4. 配置 webpack 的主动打包性能

5. 配置 html-webpack-plugin 生成预览页面

6. 配置主动打包相干的参数

2.3 webpack 中的加载器

1. 通过 loader 打包非 js 模块

2. loader 的调用过程

2.4 webpack 中加载器的根本应用

3. Vue 单文件组件

3.1 传统组件的问题和解决方案

3.2 Vue 单文件组件的根本用法

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

3.4 在 webpack 我的项目中应用 vue

3.5 webpack 打包公布

站内搜索

1. 默认导出与默认导入

2. 按需导出与按需导入