在vue中使用Stylus-创新互联
概述
什么是Stylus
Stylus是一个CSS预处理器。
凌海ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！
什么是CSS预处理器
关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器为CSS提供了更多的更加灵活的可编程性，是不是很棒！
选型
那么在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。
配置Stylus环境
安装
命令行中打cnpm install stylus
p_w_picpath.png
在让编辑器支持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
p_w_picpath.png
cnpm run dev
使用Stylus
在.vue文件中使用
p_w_picpath.png
引入单独的.styl文件
在写css之前，我新建了几个div
新建.styl文件
p_w_picpath.png
编写Stylus
p_w_picpath.png
引入文件
p_w_picpath.png
查看效果
p_w_picpath.png
你要做的
配置好环境，保证能正常使用Stylus
学习Stylus的基础语法
在开发中使用Stylus的便捷特性
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页名称：在vue中使用Stylus-创新互联
转载源于：http://scyanting.com/article/dohihh.html
