【Vue】前端工程化(简介)

最新推荐文章于 2024-05-28 10:52:48 发布

Composition55555

最新推荐文章于 2024-05-28 10:52:48 发布

阅读量345

点赞数

文章标签： vue javascript js elementui vue-cli3

本文链接：https://blog.csdn.net/weixin_41619240/article/details/110875196

版权

【笔记】2020入门笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

Vue

五、工程化

01.模块化规范

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

（1）浏览器端

（2）服务器端

CommonJS：

modele.exports

require("...")
ES6模块化
- 是浏览器端与服务器端通用的模块化开发规范
- 定义：
  - 每个JS文件都是一个独立的模块
  - 导入模块使用import关键字
  - 暴露模块使用export关键字

02.ES6模块化

（1）在`node.js`中使用

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"
        }
    }]
];
modele.exports = { presets };
运行命令以执行代码：npx babel-node index.js

（2）默认导出与默认导入

默认导出：export default

默认导入：import 名称 from "模块标识符"

// demo.js 导出模块，只能有一个，如果没有导出任何数据，则蓦然导出为空对象
let a = 123;
function func(){
    console.log(123);
}
export default {
    a,
    func
}

// 导入模块
import demo from "./demo.js";

（3）按需导出与按需导入

按需导出：export let s1 = 10

按需导入：import {s1} from "模块标识符"

// demo.js,按需导出，可以有多个
export let s1 = "abc";
export function func(){
    console.log("abc");
}

import {s1, func} from "./demo.js"

（4）直接导入并执行

只需要执行模块内部代码，并不需要得到模块暴露的成员

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

import "./demo.js";

03.webpack

webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持，以及代码压缩混淆、处理JS兼容问题、性能优化等强大的功能，提高了开发效率和项目的可维护性

（1）基本使用

初始化：npm init -y
源代码目录：src
首页：./src/index.html

（2）安装和配置

安装webpack包：npm install webpack webpack-cli -D
创建配置文件：webpack.config.js

初始化配置：

module.exports = {
    // mode 用来指定构建模式
    // development:开发模式；production:上线模式
    mode: "development";
}

在package.json配置文件中的scripts节点下新增dev脚本
```
"scripts": {
    "dev": "webpack"
}
```
在终端运行命令，启动webpack进行项目打包：npm run dev

（3）配置打包的入口和出口

默认约定：
- 打包的入口文件：./src/index.js
- 打包的输出文件：./dist/mian.js

自定义

在webpack.config.js中进行配置

const path = require("path");
module.exports = {
    // 打包入口文件的路径
    entry: path.join(__dirname, "./src/index.js"),
    // 
    output: {
        // 输出文件的存放路径
        path: path.join(__dirnamem "./dist"),
        // 输出文件的名称
        filename: "bundle.js"
    }
}

（4）配置自动打包

安装自动打包工具：npm install webpack-dev-server -D
修改package.json文件中的scripts的dev命令
```
"scripts": {
    "dev": "webpack-dev-server"
}
```
webpack-dev-server会启动一个自动打包的http服务器；

打包生成的输出文件，默认放置在项目根目录中，而且是虚拟的、不可见的
将./src/index.html中的script脚本的引用路径修改为打包后的文件：./bundle.js（这是自定义后的文件）
运行命令重新打包：npm run dev
访问地址查看：http://localhost:8080

（5）生成预览页面

安装预览页面插件：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数组是webpack打包期间会用到的一些插件列表
    plugins: [ htmlPlugin ]
}

（6）配置自动打包相关参数

修改package.json文件中的scripts的dev命令
```
"scripts": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
```
--open：打包完成后自动打开浏览器页面

--host：配置IP地址

--port：配置端口

（7）加载器

通过loader打包非JS模块

实际开发过程中，webpack默认只能打包处理JS模块，其它非JS模块需要调用loader加载器才可以正常打包

loader加载器可以协助webpack打包处理特定的文件模块

（i）打包`CSS`文件

安装处理CSS文件的loader：npm install style-loader css-loader -D
添加规则到webpack.config.js文件中，新增module -> rules
```
module: {
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }
    ]
}
```
test：表示匹配的文件类型

use：表示对应要调用的loader
- 这个数组中指定的loader顺序是固定的
- 多个loader的调用顺序是——从后往前调用（后一个loader的处理结果交给前一个loader进行处理）

（ii）打包`less`文件

安装处理LESS文件的loader：npm install less-loader less -D

前面已经安装了style-loader、css-loader

添加规则到webpack.config.js文件中，新增module -> rules

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

（iii）打包scss文件

安装处理SCSS文件的loader：npm install sass-loader node-sass -D

前面已经安装了style-loader、css-loader

添加规则到webpack.config.js文件中，新增module -> rules

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

（iv）自动添加兼容前缀

安装插件：npm install postcss-loader autoprefixer -D

创建配置文件postcss.config.js

const autoprefixer = require("autoprefixer");
module.exports = {
    plugin: [autoprefixer]
}

更新webpack.config.js文件配置

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

（v）打包图片和字体文件

安装插件：npm install url-loader file-loader -D

更新webpack.config.js文件配置

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

?之后是loader的参数项

limit用来指定图片的大小，单位是字节（byte）,只有小于limit大小的图片，才会被转为base64图片

（vi）打包处理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.config.js

module.exports = {
    presets: ["@babel/preset-env"],
    plugin: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

更新webpack.config.js文件配置

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

exclude为排除项，表示babel-loader不需要处理node_module中的JS文件

04.Vue单文件

（1）问题

全局定义的组件必须保证组件的名称不重复
字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\
不支持CSS意味着当HTML和 JavaScript组件化时，CSS明显被遗漏
没有构建步骤限制，只能使用HTML和ES5 JavaScript而不能使用预处理器（如：Babel）

（2）基本用法

// 
<template>
	<!-- 模板内容 -->
</template>
<script>
	// 业务逻辑
    export default {
        data: function() {
            return {};
        },
        methods: {
            
        }
    }
</script>
<style scoped>
	/* 样式区域，scoped 防止组件之间的样式冲突 */
</style>

webpack中配置VUE组件的加载器

安装插件：npm install vue-loader vue-template-compiler -D

配置webpack.config.js文件

const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
	module: {
		rules: [
            {
         		test: /\.vue$/,
            	loader: "vue-loader"
         	}
		]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

webpack中使用VUE

安装vue：npm install vue -s
导入vue：import Vue from "vue"
创建 Vue 实例，指定挂载区域

通过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文件配置打包命令

"scripts": {
    "build": "webpack -p",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000"
}

05.Vue脚手架

VUE脚手架用于快速生成VUE项目基础架构
安装脚手架：npm install -g @vue/cli
创建VUE项目
- 基于交互式命令行的方式：vue create my-vue-project
  
  上下箭头切换，单击空格选择，回车确认
  
  Babel、Router、Vuex、CSS Pro-processors、Linter/Formatter
- 基于图形化界面的方式：vue ui
结构分析
- node_modules：依赖包目录
- public：静态资源目录
- src：组件源码目录
  - assets：包含样式表、图片等资源的目录
  - components：组件目录
  - views：视图组件目录
  - App.vue：项目根组件，承载项目中的所有组件
  - main.js：项目打包入口文件
  - router.js：路由文件
- babel.config.js：Babel配置文件
- .eslintrc.js：语法相关配置文件
- .gitignore：Git的忽略文件
- package.json：包管理文件
- postcss.config.js：配置前缀文件

脚手架自定义配置

通过package.json配置项目

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

port：端口

open：自动打开浏览器

通过单独的配置文件vue.config.js

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

06.Element-UI

桌面端组件库
安装
- 基于命令行方式手动安装
  - 安装：npm install element-ui -s
  - 导入：
```
// 导入组件库
import ElementUI from "element-ui";
// 导入组件相关样式
import "element-ui/lib/theme-chalk/index.css";
// 配置Vue插件
Vue.use(ElementUI);
```
- 基于图形化界面自动安装
  - 打开图形化界面：运行命令：vue ui
  - 安装插件：vue-cli-plugin-element