- 博客(19)
- 收藏
- 关注
RSS订阅原创 grid 布局基本使用
效果如下图所示：第一个子元素竖列占了两个格子。1 / 3 可以理解为 元素竖向的 范围，从第1 个格子开始算，到第2个格子结束。效果如下图所示：第一个子元素一行占了两个格子。1 / 3 可以理解为元素横向的范围，从第1 个格子开始算，到第2个格子结束。复合属性等于 grid-row-gap 和 grid-column-gap之和。整体内容的垂直对齐方式，把所有网格作为一个整体。设置子元素的排序，默认是从左到右,横向显示。子元素水平垂直方向对齐的复合属性。子元素的水平方向对齐方式。子元素垂直方向对齐方式。
2024-08-28 15:05:57
298
原创 scss预处理器的基本使用（二）
两个携带单位的不能相乘，10px * 10px 会出现报错。文件命名，如果以 _ 开头，最终不会生成 css 文件。@mixin 定义名字为 block 代码块。@include 引入 block代码块。小于等于 ( <= / lte)大于等于 (>= / gte)小于 (< / lt)public.scss 文件。大于 (> / gt)index.scss 文件。
2023-04-10 11:08:46
284
原创 vuex的安装和基本使用（Mhua）
组件中读取数据：$store.getters.total。创建文件：/src/store/index.js。在main.js中创建vm时传入store配置项。类似于组件中的 computed 功能。
2022-08-24 18:56:37
341
原创 vite的基本使用（Mhua）
vite在客户端的环境变量校验前缀默认值是 VITE_，所以我们设置的环境变量只有以 VITE_ 开头的，调用 import.meta.env 才能获取到相关变量。vite内置 dotenv库， 利用 dotenv 库可读取 .env .env.development .env.production配置文件中的环境变量。注意：在开发环境中，.env文件和.env.development中存在同名变量时，后者文件会覆盖前者文件中的变量。1、vite在读取到main.js中引用到index.css文件。...
2022-08-17 23:07:46
2524
1
原创 九、webpack的基本使用，entry，template，tree-shaking，全局变量，this指向。（Mhua）
用于精简打包的代码，在 js 文件中，如果引入其它模块但是未使用的代码，将不打包进去。多模板文件配置：打包后会生成两个 html 文件，并且可以指定引入的js模块。webpack.config.js 配置 optimization 属性。webpack.config.js 配置文件的。修改webpack.config.js配置文件。，指定打包后文件输出 路径。...
2022-08-08 22:16:21
318
原创 八、webpack的基本使用，集成 postcss，typescript。（Mhua）
兼容低版本浏览器，webpack 会生成兼容语句。在 webpack.config.js 配置 css loader。安装 postcss-nested 插件，实现 css 嵌套用法。开启css模块化，修改webpack.config.js配置文件。在 app.js 使用 css 时需要当成模块来使用。修改 postcss.config.js 文件配置。新建 postcss.config.js 文件。在 package.json 中 加上 配置。安装 css 处理 loader。...
2022-08-08 21:58:53
224
原创 七、webpack的基本使用，source-map，dev-server，eslint（Mhua）
开发环境中：推荐使用 cheap-module-source-map，它可以单独生成一个文件，且只记录行数，同时对babel解析的混杂进来后，也不会导致代码行数的识别问题。1、通过 bundle 和 sourcemap 文件可以编译源码，也就是说线上有sourcemap 文件的话，增加暴露源码的风险。eslint 配置是和webpack无关的，但是在工程化开发环境中，是不可缺少的。在 webpack.config.js 配置 开发服务器。新建 webpack.config.js。...
2022-08-06 10:20:35
248
原创 六、webpack的基本使用，路径，压缩，缓存，拆分配置文件（Mhua）
在根目录新建 config 目录，新建 webpack.config.dev.js, webpack.config.prod.js 文件。配置 webpack.config.js，配置 publicPath 值。webpack.config.comm.js：公共文件配置。webpack.config.dev.js： 开发文件配置。webpack.config.prod.js：生成文件配置。webpack.config.prod.js 生成环境配置。webpack.config.dev.js 开发环境配置。.
2022-08-05 22:49:05
505
原创 五、webpack的基本使用，防止重复，入口文件，懒加载，预获取/预加载（Mhua）
页面展示一个按钮，并且点击按钮后，才会加载 math.build.js 文件。rel=“prefetch” 这里使用 prefetch 预加载，当我们首页内容加载完毕，在网络空闲的时候，才会加载 link 对应的文件。并且 index.html 文件，增加了 link 标签，链接到 math.build.js 文件。打开 dist 下的 app.html 文件, 三份 js 文件都引入到 app.html里面了。结果：生成了三份 js 文件。在webpack.config.js 文件，配置 entry。.
2022-08-05 22:48:08
1228
原创 四、webpack的基本使用，处理字体文件，CSV，XML文件（Mhua）
如JSON文件，CSV，TSV，XML。类似于：webpack 对 JSON 支持 实际上是内置的，也就是 import Data from “./data.json” 默认是正常的。但是要导入 CSV TSV XML ，需要使用 csv-loader、xml-loader。在 webpack.config.js 配置 module 参数。在 webpack.config.js 配置 module 参数。在js文件中就可以正常使用 xml 和 csv 文件了。webpack 处理字体文件配置。...
2022-08-04 22:03:45
478
原创 三、webpack的基本使用，loader，css文件处理（Mhua）
style-loader插件默认是将 样式 加载到 html文件的 head标签之前，mini-css-extract-plugin插件能够将所有css放到。开始打包，控制台出现报错信息，这是因为没有在 webpack.config.js文件进行配置。在 webpack.config.js 配置 css-loader 处理 css 文件。在入口文件 index.js 引入 style.css 文件。在入口文件index.js，导入style.less文件。配置webpack.config.js文件。...
2022-08-04 21:05:23
544
原创 二、webpack的基本使用，资源类型（Mhua）
在resource，inline类型之间自动选择，根据资源大小来区分，默认资源大小是以 8kb 为分界线。通过 asset/inline 设置，把对应资源文件 生成 dataUrl （base64格式）通过 asset/resource 设置，打包后，生成一个单独文件，并导出 url 路径。webpack提供了 四种 资源类型来加载除了 js以外的资源文件，如：图片。打包后，图片变成了 base64 格式。...
2022-08-04 20:57:16
135
原创 一、webpack的基本使用，安装，体验（Mhua）
-entry：指定入口文件--mode：指定模式 production 生产环境 development 开发环境。
2022-08-04 20:55:39
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人