在vue 中使用Stylus
Vue 使用
2023-09-11 14:22:49 时间
概述
什么是Stylus
- Stylus是一个CSS预处理器。
什么是CSS预处理器
- 关于CSS预处理器,推荐先行阅读这篇文章:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
现在你应该对CSS预处理器有个大概的认识了,总的来说,CSS预处理器为CSS提供了更多的更加灵活的可编程性,是不是很棒!
选型
- 那么在SaaS,Less和Stylus中,为什么选择后者呢?因为Stylus是来源于Node.js社区,与js关系密切,所以基于Vue.js的开发,我们选择使用Stylus。
配置Stylus环境
安装
- 命令行中打
cnpm install stylus
在让编辑器支持Stylus
编辑器选型
对于编辑器的选择之前一直没有单独说过,这里稍微提一下,对于写Vue或者前端代码,这里推荐的有三个编辑器
- WebStorm
- VSCode
- Sublime Text
对于电脑配置较高的内存较大的,推荐使用WebStorm,这个编辑器很智能也很庞大,对于电脑配置稍低的,推荐使用后面两个。
另外,在编辑代码时,当时用后两种编辑器时,很依赖各种各样的插件
当你觉得使用的时候很不爽的时候
就去网上搜相应的插件
比如我需要Vue高亮语法的插件,就去搜索安装Vue插件
那么对于Stylus,我们也只需要安装Stylus的插件就可以了。
关于安装插件,这里有几个连接
- Sublime Text插件安装方法和常用插件
- Sublime Text写Vue
然后具体的不多说,大家可以百度谷歌
在编辑器安装支持Stylus
- 这个就是在编辑器安装Stylus高亮插件,sublime直接在搜索安装Stylus,WebStorm不需要单独安装插件,新建Stylus文件是,只需要New->stylesheet->stylus即可
PS.Stylus的拓展名是
.styl
初次使用
初始化项目
vue init webpack stylus
cd stylus
cnpm install
cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev
cnpm run dev
使用Stylus
在.vue
文件中使用
引入单独的.styl
文件
在写css之前,我新建了几个div
- 新建
.styl
文件
- 编写Stylus
- 引入文件
- 查看效果
你要做的
- 配置好环境,保证能正常使用Stylus
- 学习Stylus的基础语法
- 在开发中使用Stylus的便捷特性
参考教程
相关文章
- 【Vue】Vue中的data数据包含html标签元素的解决方法
- vue/react框架中关于组件信息通信引发的面试题
- vue 常见操作 及 ionic 实战回顾
- 08Vue - Vue实例(实例生命周期)
- vue项目中使用CDN引入
- Vue之axios基础使用
- vue遍历使用过滤
- vue版本更新index.html缓存
- vue---axios的封装
- Vue 动态粒子特效(vue-particles)
- 【Vue】描述项目中两个功能模块的业务(一点见解)
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue-cli脚手架之webpack.base.conf.js
- Vue高亮输入 (Vue Highlightable Input)使用,node-interval-tree区间树,可编辑div光标前移解决方案,中文输入时将拼音同时带入输入框问题修复
- 使用Vue3学习Vue的基础知识
- VUE的mixin混入解析
- Vue实战第1章:学习和使用vue-router
- 原有vue项目接入typescript
- Vue学习第24天——Vuex开发者工具的使用
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
- Vue知识点汇总
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
- 第一次使用Vue
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Vue-列表过滤