06-Vue提高之前端工程化

最新推荐文章于 2024-08-21 22:17:11 发布

彤彤的小跟班

最新推荐文章于 2024-08-21 22:17:11 发布

阅读量290

点赞数

分类专栏：前端相关技术文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45583303/article/details/118340661

版权

前端相关技术专栏收录该内容

11 篇文章 2 订阅

订阅专栏

文章目录

01.模块化相关规范

1.1.模块化概述

传统开发模式的主要问题：

① 命名冲突
② 文件依赖

通过模块化解决上述问题：

模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护

模块化的分类：

浏览器端的模块化
服务器端的模块化
ES6模块化

1.2.浏览器端的模块化(过时)（了解）

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

1.3.服务器端的模块化（了解）

服务器端的模块化规范是使用CommonJS规范：

使用require引入其他模块或者包
使用exports或者module.exports导出模块成员
一个文件就是一个模块，都拥有独立的作用域

1.4.大一统的模块化规范—ES6模块化（重点）

在 ES6 模块化规范诞生之前， Javascript 社区已经尝试并提出了 AMD、 CMD、 CommonJS 等模块化规范，但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

AMD 和 CMD 适用于浏览器端的 Javascript 模块化
CommonJS 适用于服务器端的 Javascript 模块化
因此， ES6 语法规范中，在语言层面上定义了 ES6 模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中定义：

1).每一个js文件都是独立的模块
2).导入模块成员使用import关键字
3).暴露模块成员使用export关键字

1.5.小结

推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。
ES6模块化是浏览器端和服务器端通用的规范.

02.ES6模块化的基本语法

2.1.默认导入/导出

默认导出语法：export default{}

export default {
        成员A,
        成员B,
        .......
    }

// 当前文件模块为 m1.js
// 定义私有成员变量 a 和 c，外界访问不到私有成员变量 a 和 c  ,因为它没有被暴露出去
let a = 10
let c = 20
//同样也访问不了成员show()函数
function show() {}

// 将本模块中的私有成员暴露出去，供其它模块使用
export default {
	a,
	c,
	show
	}

默认导入语法：import 接收名称 from ‘模块标识符’

import m1 from './m1.js'

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

注意：

在一个模块中，使用export default向外暴露默认成员只能使用一次，千万不要写多个export default。
如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 。

2.2.按需导入/导出

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

//在一个模块中的成员
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }

注意：

被导入的模块必须把成员暴露出来，其他模块才能导入，或者按需导入。
按需导出的模块可以使用多次按需导出。

import { num,fn as printFn ,myName } from "./test.js"
//同时导入，其他模块默认导出的成员  以及按需导入的成员
import test,{ num,fn as printFn ,myName } from "./test.js"

注意：

一个模块中导入另外一个模块，既可以按需导入，也可以默认导入。
一个模块既可以按需导出，也可以默认导出。

2.3.直接导入并执行代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员(或者模块没有向外暴露任何成员)，此时可以直接导入并执行模块代码

import "./test2.js";

03.webpack（了解）

后面我们使用Vue脚手架创建Vue项目，里面会内嵌webpack，非常简单。

vue-cli是脚手架工具体作用就是用配置好的模板快速搭建一个webpack项目工程，省去自己配置webpack配置文件的基本内容

做个类比吧

就好像我们使用IDEA的快创建工具可以创建出来一个maven管理的项目一样，使用vue-cli可以快速创建出一个weebpack管理的项目

注意：

使用vue-cli创建webpack项目之前要先安装webpack，具体的如何快速创建一个vue项目可以参考这篇文章：https://blog.csdn.net/weixin_45583303/article/details/111354653

3.1.当前 Web 开发面临的困境

当前 Web 开发面临的困境

文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级 Javascript 特性兼容程度较低
etc

3.2.webpack 概述

webpack是一个流行的前端项目构建工具，类比Maven，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性
目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

3.3.webpack的基本使用

使用webpack之前必须要先安装NodeJs
要先在前端项目中安装webpack打包工具，才能使用

npm install webpack -D

npm install webpack-cli -D

提前预知

下面的内容都是手动搭建webpack管理的项目的过程，目的是为了更加深入的了解webpack打包工具的使用，做到知其然知其所以然，如果不想看可以跳过。
后面会使用vue脚手架快速创建一个基于webpack管理的vue项目

项目目录结构
项目代码地址：

链接：https://pan.baidu.com/s/1ID1RtXU6bibZaoouMg0Xxg
提取码：qzuc

3.3.1.设置webpack的打包入口/出口：webpack.config.js

在webpack 4.x中

会将 src/index.js 作为默认的打包入口js文件
会将 dist/main.js 作为默认的打包输出js文件
如果不想使用默认的入口/出口js文件，我们在 webpack.config.js 设置入口/出口的js文件，如下：

使用脚手架创建的webpack管理的项目中vue.config.js等同于webpack.config.js

开发者一般不需要再去知道 webpack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack。

手动创建一个webpack.config.js文件，文件中的内容如下：

const path = require("path");
module.exports = {
    //development开发模式，生产模式（代码压缩）production
   mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"res.js"
    }
}

3.3.2.设置webpack的自动打包：package.json

当我们更改了js文件的代码，要想运行前端项目就需要重新进行打包：npm run dev，那么每次修改过之后都要重新执行命令打包，这是一个非常繁琐的事情，自动打包可以解决这样繁琐的操作。

注意：

package.json文件中的scripts节点写的脚本，可以同过npm run 脚本名称来执行

后面要讲到的这个打包命令：npm run dev 就是通过dev执行里面对应的脚本文件(自动打包功能)：webpack-dev-server

实现自动打包功能的步骤如下：

前提：在项目中安装依赖：npm install webpack webpack-cli -D

A.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D

B.修改package.json中的dev指令如下：
 "scripts":{
	 "dev":"webpack-dev-server"
 	}
 	
C.在终端运行命令进行打包：npm run dev

D.打开网址查看效果：http://localhost:8080

注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中

我们常用的：

我们可以使用ctrl+s来自动打包并运行

补充：

在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：

默认打开："dev": "webpack-dev-server --open"
默认打开并指定IP地址和端口号："dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

3.3.3.webpack中的加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包。

loader加载器包含：

A).css-loader,style-loader
B).less-loader
C).sass-loader
D).postcss-loader
E).url-loader:打包处理css中与url路径有关的文件
F).babel-loader:处理高级js语法的加载器

注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

A.安装style-loader,css-loader来处理样式文件
    1).安装包
        npm install style-loader css-loader -D
    2).配置规则：更改`webpack.config.js`的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader，user数组中指定的loader顺序是固定的
                    use:['style-loader','css-loader']
                }
            ]
        }
    }
    
B.安装less,less-loader处理less文件
    1).安装包
        npm install less-loader less -D
    2).配置规则：更改`webpack.config.js`的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader，user数组中指定的loader顺序是固定的
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
    
C.安装sass-loader,node-sass处理less文件
    1).安装包
        npm install sass-loader node-sass -D
    2).配置规则：更改`webpack.config.js`的module中的rules数组
    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

    补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
    https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
1).安装包
    npm install postcss-loader autoprefixer -D
2).在项目根目录创建并配置`postcss.config.js`文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
3).配置规则：更改`webpack.config.js`的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

E.打包样式表中的图片以及字体文件
在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
使用url-loader和file-loader来处理打包图片文件以及字体文件
1).安装包
    npm install url-loader file-loader -D
2).配置规则：更改`webpack.config.js`的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
1).安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
2).安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3).在项目根目录创建并配置`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数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },
			{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}

04.Vue单文件组件

4.1.传统组件的缺陷的解决方法

缺陷

1、全局定义的组件不能重名

2、字符串模板缺乏语法高亮，在html有多行的时候，需要用到丑陋的\

3、不支持css(当html和js组件化时，css没有参与其中)

4、没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：

1，使用Vue单文件组件，每个单文件组件的后缀名都是.vue

2、每一个Vue单文件组件都由三部分组成

1).template组件组成的模板区域
2).script组成的业务逻辑区域
3).style样式区域

代码如下：

<template>
    <!--这里定义Vue组件的模板内容-->
</template>

<script>
 	<!--这里定义Vue组件的业务逻辑-->
    <!--js代码区-->
    export default{
		data:(){return{}},//私有数据
        methods:{},//处理函数
        //.....其他业务逻辑
	}
</script>

<style scoped>
 	<!-- 样式代码区域-->
</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

4.2.webpack中配置vue组件的加载器

配置.vue文件的加载器

A.安装vue组件的加载器
    npm install vue-loader vue-template-compiler -D

B.配置规则：更改webpack.config.js的module中的rules数组
    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    module.exports = {
        ......
        plugins:[ htmlPlugin, vuePlugin  ],
        module : {
            rules:[
                ...//其他规则
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",         
                }
                  ]
    		}
		}

05.在webpack中使用vue(了解)

我们以后使用Vue脚手架创建项目，这些都是给配置好的。
上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue，并使用vue来引用vue单文件组件。

A.安装Vue
npm install vue  -S

B.在index.js中引入vue：import Vue from "vue"

C.创建Vue实例对象并指定el，最后使用render函数指定要渲染单文件组件
    const vm = new Vue({
        el:"#app",
        render:h=>h(app)
    })

06.使用webpack打包发布项目(了解)

在项目上线之前，我们需要将整个项目打包并发布。

A.配置package.json
    "scripts":{
        "dev":"webpack-dev-server",
        "build":"webpack -p"
    }
    
B.在项目打包之前，可以将dist目录删除，生成全新的dist目录

07.Vue脚手架(重要)

Vue脚手架可以快速生成Vue项目基础的架构，不用像前面那样麻烦的手动创建。

使用脚手架创建项目之后，我们就可以只关心代码如何编写，不需要关心项目如何创建的。

提醒：项目如何创建的最好还是要了解的。

注意：如果前面的了解内容没有看直接跳过了，那么在使用vue脚手架之前要先安装vue，具体可以参考：https://blog.csdn.net/weixin_45583303/article/details/111354653

7.1.Vue脚手架的安装

安装

npm install -g  vue-cli

7.2.使用脚手架创建项目

参考：https://blog.csdn.net/weixin_45583303/article/details/111354653

7.3.Vue脚手架生成的项目结构

node_modules：依赖包目录
public：静态资源目录
src：源码目录
src/assets：资源目录
src/components：组件目录
src/views：视图组件目录
src/App.vue：根组件
src/main.js：入口js
src/router.js：路由js
babel.config.js：babel配置文件

08.Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]

package.json主要用来管理包的配置信息，主要为了方便维护，推荐使用将vue脚手架相关配置，单独定义到vue.config.js中。

"vue":{
	"devServer":{
	"port":"9990",
	"open":true
	}
}

B.通过单独的配置文件进行配置，在项目根目录创建vue.config.js

module.exports = {
	devServer:{
	port:8888,               
	open:true
	}
}

C.配置Vue项目中config/index.js文件

module.exports = {
  dev: {
    host: 'localhost', 
    port: 8080,
    }
 }

09.Element-UI的基本使用(要会用)

Element-UI:一套基于2.0的桌面端组件库

官网地址：http://element-cn.eleme.io/#/zh-CN

A.安装：

npm install element-ui -S

B.导入使用：

import ElementUI from “element-ui”;
import “element-ui/lib/theme-chalk/index.css”;
Vue.use(ElementUI)

彤彤的小跟班

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
06-Vue提高之前端工程化

文章目录01.模块化相关规范1.1.模块化概述1.2.浏览器端的模块化(过时)（了解）1.3.服务器端的模块化（了解）1.4.大一统的模块化规范—ES6模块化（重点）1.5.小结02.ES6模块化的基本语法2.1.默认导入/导出2.2.按需导入/导出2.3.直接导入并执行代码03.webpack（了解）3.1.当前 Web 开发面临的困境3.2.webpack 概述3.3.webpack的基本使用3.3.1.设置webpack的打包入口/出口：webpack.config.js3.3.2.设置webpack
复制链接

扫一扫