【Vue系列五】—Vue学习历程的知识分享！

news/2024/9/23 8:10:15/

前言

本篇文章讲述前端工程化从模块化到如今的脚手架的发展，以及Webpack、Vue脚手架的详解！

一、模块化

模块化就是把单独的功能封装到模块（文件）中，模块之间相互隔离，但可以通过特定的接口公开内部成员，也可以依赖别的模块

传统开发问题存在命名冲突和文件依赖关系不明确

浏览器模块化方案

  • AMD        ==>require.js
  • CMD        ==>sea.js

服务器模块化方案

CommonJS

  • 模块分为单文件模块与包

  • 模块成员导出：module.exports 和 exports

  • 模块成员导入：require

ES6模块化方案

浏览器和服务器通用的方案

  • 每个 JS 文件都是一个独立的模块

  • 导入模块成员使用 import 关键字

  • 暴露模块成员使用 export 关键字

默认导出与导入
  • export   default{ }
  • import  xxx  from 'xxx'

  • 一个模块中 export default 只允许使用一次！

  • 没有导出的话，import 会得到一个空对象

按需导出与导入
javascript">// 按需导出可以写多次
export function say() {console.log('say ~~~');
}// 默认导出只能写一次
// ...
export default {a,c,show
};import m1, {say} from './m1';

直接导入模块会执行其中的代码

二、Webpack

前端项目构建工具（打包工具）

当前web开发面临的困境

  • 文件依赖关系错中复杂

  • 静态资源请求效率低

  • 模块化支持不友好

  • 浏览器对高级 JS 兼容程度低

  • etc...

基本使用

  1. 初始化包管理配置文件         npm init
  2. 新建src源文件目录
  3. 新建src/index.html首页
  4. 初始化首页基本结构

配置Webpack

  1. 安装webpack相关的包         npm i webpack webpack-cli-D
  2. 项目根目录创建webpack.config.js配置文件
  3. 在配置文件中，初始化基本配置
  4. package.json中配置scripts
  5. 使用npm run dev 打包项目

入口和出口

  • 默认入口为 src/index.js

  • 默认出口为 dist/main.js

javascript">const path = require('path');module.exports = {entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},mode: 'development'
};

自动打包功能

  • 安装
javascript">npm i webpack-dev-server -D
  • 修改package.json中的script
javascript">{"scripts": {"dev": "webpack-dev-server"}
}
  • 将index.html中的JS路径修改为/bundle.js
  • 访问本地路径

配置devServer

javascript">module.exports = {devServer: {open: true,host: '127.0.0.1',port: 8888}
};

生成预览页面

  • 安装
npm i html-webpack-plugin -D
  • 配置webpack.config.js
javascript">const HtmlWebpackPlugin = require('html-webpack-plugin');const htmlPlugin = new HtmlWebpackPlugin({template: './src/index.html', // 指定用到的模板文件filename: 'index.html' // 在内存中生成文件的名称
});
  • 删除index.html文件中引入的js文件

三、webpack处理样式

处理css

  • 安装
npm i style-loader css-loader -D
  • 配置modules下的rules
javascript">module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};
  • 使用

处理less

  • 安装
javascript">npm i less-loader less -D
  • 配置modules下的rules
javascript">module.exports = {module: {rules: [{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
};

处理sass

  •  安装
javascript">npm i sass-loader node-sass -D
  • 配置modules下的rules
javascript">module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']}]}
};

处理css前缀

  • 安装

javascript">npm i postcss-loader autoprefixer -D

  • 配置 postcss.config.js

项目根目录新建文件：postcss.config.js

javascript">const autoprefixer = require('autoprefixer');module.exports = {plugins: [autoprefixer]
};

  • 修改webpack.config.js中modules下的css的rules

javascript">module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader', 'postcss-loader']},]}
};

  • package.json中做支持情况的配置

  • 测试

处理图片和字体

  • 安装
npm i url-loader file-loader -D
  • 配置modules下的rules
javascript">// 单位是字节(1kb = 1024byte)，小于 limit 大小的图片会被转为 base64
// 右键图片属性可以查看图片的字节大小
module.exports = {module: {rules: [{test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=16940'}]}
};

四、webpack处理JS的语法

  • 安装

babel 转换器相关的包

cnpm i babel-loader @babel/core -D
cnpm i @babel/runtime -S

babel 语法插件相关的包

cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  • 配置根目录的babel.config.js
javascript">module.exports = {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
};
  • 配置modules下的rules
javascript">module.exports = {module: {rules: [{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/}]}
};

五、单文件组件

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

问题

  • 全局定义的组件必须保证组件的名称不重复

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

  • 不支持 CSS 意味着当 HTML 和 JS 组件化时，CSS 明显被遗漏

  • 没有构建步骤限制，只能使用 HTML 和 ES5 JS，而不能使用预处理器（Babel）

解决方案

Vue 提供了一个解决方案，使用 Vue 单文件组件

  • template

  • script

  • style

集成Vue

  • 安装
javascript">npm i vue-loader vue-template-compiler -D
  • 配置modules下的rules和plugins
javascript">const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {module: {rules: [{test: /\.vue$/,loader: 'vue-loader'}]},plugins: [new VueLoaderPlugin()]
};

 使用Vue

  • 安装
  • 引入Vue框架
  • 创建Vue实例对象，并制定要控制的el区域
  • 通过render函数渲染App根组件

六、Vue脚手架

可以用来快速生成 Vue 项目的基础架构

  • 安装
npm install -g @vue/cli
  • 创建项目
javascript">1.    基于交互式命令行
vue create my-project
2.    基于图形化界面
vue  ui
3.    基于旧版本，创建旧版本vue项目
npm install -g @vue/cli-initvue init webpack my-project
  • 配置

七、Element-UI

一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库

入口：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库icon-default.png?t=O83Ahttps://element.eleme.cn/2.13/#/zh-CN

  • 安装
npm i element-ui -S
  • 导入相关资源
javascript">import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
  • 看文档使用

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！


http://www.ppmy.cn/news/1529225.html

相关文章

Vue2学习笔记(03关于VueComponent)

Vue2学习笔记(03关于VueComponent)

1.school组件本质是一个名为Vuecomponent的构造函数&#xff0c;且不是程序员定义的&#xff0c;是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>&#xff0c;Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new Vuecompo…
阅读更多...
算法打卡：第十一章 图论part04

算法打卡：第十一章 图论part04

今日收获&#xff1a;字符串接龙&#xff0c;有向图的完全可达性&#xff0c;岛屿的周长 1. 字符串接龙 题目链接&#xff1a;110. 字符串接龙 (kamacoder.com) 思路&#xff1a;广度优先遍历适合解决两个点之间的最短路径问题&#xff0c;通常使用队列模拟一圈圈遍历。 &a…
阅读更多...
数据库(mysql)常用命令

数据库(mysql)常用命令

一.常见的数据库端口号 Mysql默认端口:3306 oracle 默认端口:1521 Sql server 默认端口:1433 注:Mysql采用 的是C/S(客户端/服务器端)架构 二.sql 语法基础 服务器,数据库,数据表,记录,字段之间的关系: 一台Mysql服务器可以管理多个数据库 一个数据库可以存在多张二维表…
阅读更多...
技术美术百人计划 | 《4.1 Bloom算法》笔记

技术美术百人计划 | 《4.1 Bloom算法》笔记

1. Bloom算法介绍 1.1. Bloom效果 实际拍摄照片与游戏画面Bloom效果对比&#xff0c;Bloom模拟了真实世界图片的效果 Bloom流程图 1.2. 前置知识&#xff1a;HDR和LDR&#xff0c;高斯模糊 1.2.1. HDR和LDR LDR颜色范围太少&#xff0c;精度不够&#xff0c;往往会存在颜色精…
阅读更多...
前端入门：HTML+CSS

前端入门：HTML+CSS

引言&#xff1a; 前端三大件&#xff1a;HTML、CSS、JS&#xff0c;每一个部分都很重要&#xff0c;我听过比较形象的比喻就是HTML&#xff08;HYPER TEXT MARKUP LANGUAGE&#xff09;相当于骨架&#xff0c;而CSS就是装饰渲染&#xff0c;JS则是动作功能实现。 之前的文章…
阅读更多...
实验报告1--Spring Boot自定义异常处理

实验报告1--Spring Boot自定义异常处理

实验报告1-Spring Boot自定义异常处理&#xff08;1&#xff09; 实验报告1-Spring Boot自定义异常处理&#xff08;2&#xff09; 资源下载 一、实现思路 实现根据员工id删除员工对象的功能。 要求&#xff1a;1、处理Exception异常。 2、处理自定义的MyException异常。 …
阅读更多...
常见项目场景题1（数据量很大时如何去重，实现超时处理）

常见项目场景题1（数据量很大时如何去重，实现超时处理）

数据很多&#xff0c;限制内存&#xff0c;如何去重 对于大数据量去重的场景&#xff0c;我们可以考虑使用位图(Bitmap) Bitmap 是使用二进制来表示某个元素是否存在的数组。用0和1来表示存在与不存在 使用Bitmap的话&#xff0c;一个数字占用1bit&#xff0c;大大减少内存消耗…
阅读更多...
Python | Leetcode Python题解之第429题N叉树的层序遍历

Python | Leetcode Python题解之第429题N叉树的层序遍历

题目&#xff1a; 题解&#xff1a; class Solution:def levelOrder(self, root: Node) -> List[List[int]]:if not root:return []ans list()q deque([root])while q:cnt len(q)level list()for _ in range(cnt):cur q.popleft()level.append(cur.val)for child in c…
阅读更多...
最新文章

Copyright @ 2022~2023