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启动项目yarnyarn dev此时项目已经启动,但是我们想用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清晰。
更多推荐
已为社区贡献4条内容
所有评论(0)