在Vue.js中使用Stylus預解決器

  • 時間:2018-10-04 23:18 作者:im程序猿 來源:im程序猿 閱讀:197
  • 掃一掃,手機訪問
摘要:概述什么是StylusStylus是一個CSS預解決器。什么是CSS預解決器關于CSS預解決器,推薦先行閱讀這篇文章:為您詳細比較三個 CSS 預解決器(框架):Sass、LESS 和 Stylus 現在你應該對CSS預解決器有個大概的認識了,總的來說,CSS預解決器為CSS提供了更多的更加靈活的可

概述


什么是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
在Vue.js中使用Stylus預解決器

image.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
在Vue.js中使用Stylus預解決器

image.png

  • cnpm run dev

使用Stylus

在.vue文件中使用

在Vue.js中使用Stylus預解決器

image.png

引入單獨的.styl文件

在寫css之前,我新建了幾個div

在Vue.js中使用Stylus預解決器

  • 新建.styl文件
在Vue.js中使用Stylus預解決器

image.png

  • 編寫Stylus
在Vue.js中使用Stylus預解決器

image.png

  • 引入文件
在Vue.js中使用Stylus預解決器

image.png

  • 查看效果
在Vue.js中使用Stylus預解決器

參考鏈接:https://www.jianshu.com/p/94bd258f7e99

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】淘碼庫,據消息稱已被調查。淘碼庫源碼網,已經無法訪問!(2020-01-14 04:13)
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图