1、使用npm或yarn安装stylus及其加载器。Vue项目中安装Stylus非常简单。可以通过npm或yarn来安装Stylus以及其相应的加载器stylus-loader。以下是具体步骤：
npm install stylus stylus-loader --save-dev
或者
yarn add stylus stylus-loader --dev
2、配置Webpack。在Vue CLI 3及以上版本中，默认情况下已经包含了stylus-loader的配置，您无需手动配置Webpack。只需在Vue组件中使用.styl文件即可。如果您使用的是Vue CLI 2或手动配置的Webpack项目，您需要在Webpack配置文件中添加stylus-loader。
以下是详细的步骤和解释。
一、使用NPM或YARN安装STYLUS及其加载器
首先，确保您的项目已经初始化，可以通过Vue CLI或者其他方式创建一个Vue项目。然后，在项目的根目录下，使用以下命令安装stylus和stylus-loader：
npm install stylus stylus-loader --save-dev
或者
yarn add stylus stylus-loader --dev
安装完成后，您可以在项目的package.json文件中看到stylus和stylus-loader的依赖项。
二、配置WEBPACK
如果您使用的是Vue CLI 3及以上版本，Vue CLI已经为您配置好了stylus-loader。您可以直接在.vue文件中使用Stylus语法。示例如下：
<template>
<div class="example">
Hello, Stylus!
</div>
</template>
<script>
export default {
name: 'ExampleComponent'
}
</script>
<style lang="stylus">
.example
color red
</style>
如果您使用的是Vue CLI 2或者手动配置的Webpack项目，您需要在Webpack配置文件中添加stylus-loader。以下是一个基本的Webpack配置示例：
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
stylus: 'vue-style-loader!css-loader!stylus-loader'
}
}
},
{
test: /\.styl$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
}
三、在VUE组件中使用STYLUS
在完成了以上配置后，您就可以在Vue组件中使用Stylus了。下面是一个示例：
<template>
<div class="container">
<h1>Hello World</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style lang="stylus">
.container
padding 20px
h1
color #333
</style>
在这个示例中，我们在