摘要：
新建项目 使用pnpm 进行安装 pnpm create vue@latest 在根目录下创建pnpm-workerspace.yaml文件 packages: - 'components/**' 此处，components为根目录中的components文件夹，他是独立于我们项目的一个组件库，不包 阅读全文
摘要：
重点 使用reactive构造响应式的对象存储颜色，使用gsap.to操作响应式对象实现颜色渐变 代码 let toTimeLine: Tween let overTimeLine: Tween type Color = {value: string} type Tween = gsap.core. 阅读全文
摘要：
安装 npm install vue-i18n@9 或 yarn add vue-i18n@9 初始化国际化信息 为了方便管理我们新建一个lang文件夹作为专门的国际化专用，并在lang文件夹下新建zh跟en两个文件夹。 // ./lang/zh/index.ts export default { 阅读全文
摘要：
定义scss 定义一个scss文件，注意，这里的文件名要以module.scss结尾，不然会出现读写错误的问题。 $background-color_hover: #e4e8ec; $background-color_chosed: #f44343; :export { bgc_hover: $ba 阅读全文
摘要：
配置 这个也就是配置全局scss的过程，在vite.config.ts的defineConfig中添加属性，其中additionalData为scss中引入文件的书写方式： // scss全局变量的配置 css: { preprocessorOptions: { scss: { javascript 阅读全文
摘要：
安装插件 这里使用yarn来安装vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons 文件配置 在vite.config.ts中进行文件配置，首先是引入插件，其次是在plugins中添加配置 iconDirs中存放的就是图标文件地址数组，这里的 阅读全文
摘要：
引言 当我们在网页应用中使用图片资源时，会发现打包后的资源就直接存在于目录之下。若我们想要对图片进行处理的话，就要进行相应的操作。 处理图片资源 我们在webpack.config.js中的loader处添加图片资源的处理的loader，但是这个loader在webpack中时内置的，无需下载，例子 阅读全文
摘要：
引言 因为webpack默认只能解析js资源，当我们要处理css等资源时，无法进行处理，所以我们就要通过loaderloader来载入加载器来对相应的资源做特定的解析。 报错案例 例如：我们直接在js中引入css文件再次编译时，会报错。 index.css .box1{ width: 100px; 阅读全文
摘要：
什么是webpack 简单地说就是要一个web的打包工具，将项目所需要的资源进行打包处理。 安装webpack 很简单，首先是初始化一个node.js的项目 npm init 之后就是安装webpack以及webpack-cli npm i webpack webpack-cli D 初试打包 我们 阅读全文
