vue的前端工程化笔记1:模块化相关规范、webpack、Vue 单文件组件、Vue 脚手架、Element-UI 的基本使用

it2023-02-27 80

1、模块化相关规范

1.1 模块化概述

传统开发模式的主要问题

①命名冲突 ②文件依赖

通过模块化解决上述问题

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

1.2 浏览器端模块化规范

1.3 服务器端模块化规范

1.4 大一统的模块化规范 – ES6模块化

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

1.5 ES6 模块化的基本语法

1. 默认导出与默认导入 **

注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

2. 按需导出与按需导入 **

注意：每个模块中，可以使用多次按需导出

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

2、webpack

2.1 当前 Web 开发面临的困境

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 中加载器的基本使用

1. 打包处理 css 文件

2. 打包处理 less 文件

3. 打包处理 scss 文件

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

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

6. 打包处理 js 文件中的高级语法

3、Vue 单文件组件

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

1. 问题

2. 解决方案

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

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

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

3.4 在 webpack 项目中使用 vue

3.5 webpack 打包发布

4、Vue 脚手架

4.1 Vue 脚手架的基本用法

// 1. 基于交互式命令行的方式，创建新版 vue 项目 vue create my-project // 2. 基于图形化界面的方式，创建新版 vue 项目 vue ui // 3. 基于 2.x 的旧模板，创建旧版 vue 项目 npm install -g @vue/cli-init vue init webpack my-project