首页 前端知识 Vue3 vite搭建基础架构(10)--- 使用less和vite-plugin-vue-setup-extend

Vue3 vite搭建基础架构(10)--- 使用less和vite-plugin-vue-setup-extend

2024-05-07 13:05:16 前端知识 前端哥 151 157 我要收藏

Vue3+vite搭建基础架构(10)--- 使用less和vite-plugin-vue-setup-extend

  • 说明
  • 官方文档
  • 安装less
  • 测试less表达式
  • 安装vite-plugin-vue-setup-extend

说明

这里记录下自己在Vue3+vite的项目使用less来写样式以及使用vite-plugin-vue-setup-extend直接定义组件name,不使用ts语法,方便以后直接使用。这里承接自己的博客Vue3+vite搭建基础架构(9)— 使用vite-plugin-svg-icons这篇博客,在该博客项目的基础上增加使用less和vite-plugin-vue-setup-extend。

官方文档

less官方文档:https://less.bootcss.com/usage/

安装less

命令如下,-D表示该依赖添加在package.json里面的devDependencies。

npm install less -D

在webstorm里面的Terminal输入npm install less -D命令安装该依赖。执行完如下:
在这里插入图片描述
package.json会增加less版本号
在这里插入图片描述
在vite.config.js里面添加less配置,支持表达式计算。根据实际项目需要引用即可。
在这里插入图片描述
vite.config.js代码如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入path用于写别名配置,自带无须安装
import path from 'path'
//使用svg-icons插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 注册所有的svg文件生成svg雪碧图
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], //svg图片存放的目录
      symbolId: "icon-[name]", // symbol的id
      inject: "body-last", // 插入的位置
      customDomId: "__svg__icons__dom__" // svg的id
    })
  ],
  resolve: {
    //别名配置
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    //引入文件的时候,可以忽略掉以下文件后缀
    extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
  },
  css:{
    //预处理器配置项
    preprocessorOptions:{
      less:{
        //支持直接使用表达式 width: 100px - 20px;得到值为width:80px;
        math: "always"
      }
    }
  }
})

测试less表达式

在views下home文件下的index.vue修改svg标签样式,如下:
在这里插入图片描述
浏览器结果如下,发现width的宽度变为80px,说明使用成功。
在这里插入图片描述

安装vite-plugin-vue-setup-extend

命令如下,-D表示该依赖添加在package.json里面的devDependencies。

npm install vite-plugin-vue-setup-extend -D

在webstorm里面的Terminal输入vite-plugin-vue-setup-extend -D命令安装该依赖。执行完如下:
在这里插入图片描述
package.json会增加vite-plugin-vue-setup-extend版本号
在这里插入图片描述
在vite.config.js添加如下代码:
在这里插入图片描述
vite.config.js代码如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入path用于写别名配置,自带无须安装
import path from 'path'
//使用svg-icons插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//使用vite-plugin-vue-setup-extend
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 注册所有的svg文件生成svg雪碧图
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], //svg图片存放的目录
      symbolId: "icon-[name]", // symbol的id
      inject: "body-last", // 插入的位置
      customDomId: "__svg__icons__dom__" // svg的id
    }),
    VueSetupExtend()
  ],
  resolve: {
    //别名配置
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
    //引入文件的时候,可以忽略掉以下文件后缀
    extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
  },
  css:{
    //预处理器配置项
    preprocessorOptions:{
      less:{
        //支持直接使用表达式 width: 100px - 20px;得到值为width:80px;
        math: "always"
      }
    }
  }
})

未使用前需要2个script标签,示例:
在这里插入图片描述
添加依赖后,直接使用即可,示例:
在这里插入图片描述
到这里项目所需要的基础依赖都已全部安装完毕,后面不在写依赖安装及测试,会直接写菜单栏和Tab页功能联动。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7374.html
标签
less
评论
发布的文章

Pycharm创建json文件类型

2024-05-12 00:05:50

C#Post请求,带json参数。

2024-05-12 00:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!