Vue3+vite搭建基础架构（10）--- 使用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
1

在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"
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

测试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
1

在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"
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

未使用前需要2个script标签，示例：

添加依赖后，直接使用即可，示例：

到这里项目所需要的基础依赖都已全部安装完毕，后面不在写依赖安装及测试，会直接写菜单栏和Tab页功能联动。