vue3项目中如何使用less来写样式

首先安装vue3项目可以使用create-vite-app来初始化vue3项目

npm install -g create-vite-app

安装完成后使用如下命令初始化项目名为vite-demo项目

create-vite-app vite-demo

之后进入到项目中

cd vite-demo

执行yarn进行初始化，执行yarn dev启动项目

yarn
yarn dev

此时项目已经启动，但是我们想用less预编译工具进行写样式，此时可以先停掉项目，执行如下命令进行安装less和less-loader

yarn add less less-loader

此时校验是否安装成功

lessc -v

显示上图类似的东西就是安装成功了，此时启动项目yarn dev你会发现报如下错误

根据提示less和less-loader要放在package.json文件里的devDependencies里，此时我们去看一下package.json文件发现less和less-loader是在dependencies里的

我们将less和less-loader写进devDependencies里，再运行就可以了。

或者yarn add less less-loader --dev也可以

重新运行yarn dev，没有报错，就可以直接在项目中使用了，不用在main.js引入，引入反而会报错。

改写vue初始化项目时候的HelloWorld.vue如下：

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <h6>{{list.names}}</h6><input type="text" v-model="list.names" @keyup.enter="addList">
  <ul>
    <li v-for="item in list.dataList" :key="item.id">{{item.name}}-{{item.id}}</li>
  </ul>
  <h6>合计： {{total}}条</h6>
</template>

<script>
import { reactive, ref, computed } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const count = ref(1);
    const list = reactive({
      dataList: [{ name: "功夫熊猫", actived: false, id:0 }, { name: "神龙大侠", atived: false, id:1 }],
      names: '',
    });
    let total=computed(()=>list.dataList.length);
    function addList(){
      list.dataList.push({name: `${list.names}`, actived: false, id: list.dataList.length});
      list.names='';
    }
    return { count, list, addList, total };
  },
};
</script>
<style lang="less">
  @import './index.less';
</style>

同级目录下写一个index.less文件

ul{
  list-style: none;
  li{
    background-color: purple;
    border-bottom: 1px solid #ccc;
    line-height: 60px;
    color: #fff;
    font-size: 20px;
  }
}

目录结构

运行结果：

vue3中使用less起作用了。

vue3被称作组合api，那么怎么将柔和一个文件内容根据某个具体的功能抽离出来呢？

下面改写上面的代码：

// HelloWorld.vue文件
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <h6>{{list.names}}</h6><input type="text" v-model="list.names" @keyup.enter="addList">
  <ul>
    <li v-for="item in list.dataList" :key="item.id">{{item.name}}-{{item.id}}</li>
  </ul>
  <h6>合计： {{total}}条</h6>
</template>

<script>
import { ref } from "vue";
import useAddList from './useAddList.js';
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const count = ref(1);
    const {list, addList, total}=useAddList();
    return {list, addList, total, count}
  },
};
</script>
<style lang="less">
  @import './index.less';
</style>

// useAddList.js文件
import { reactive, computed } from "vue";

function useAddList() {
    const list = reactive({
        dataList: [
            { name: "功夫熊猫", active: false, id: 0 },
            { name: "神龙大侠", active: false, id: 1 },
        ],
        names: "",
    });
    let total = computed(() => list.dataList.length);
    function addList() {
        list.dataList.push({
            name: `${list.names}`,
            active: false,
            id: list.dataList.length,
        });
        list.names = "";
    }
    return { list, addList, total };
}

export default useAddList;

新的目录结构

看似和mixin实现功能一样，但是，数据来源要比mixin清晰。

示例gitHub代码地址