Vue CLI3 如何支持less的方法示例
本文介紹了Vue CLI3 如何支持less的方法示例,分享給大家,具體如下:
安裝方式:
npm install less less-loader --save
或者
cnpm install less less-loader --save
大家在編寫(xiě) .vue 文件的 style 的時(shí)候多會(huì)選擇采用預(yù)編譯
樣式來(lái)加速開(kāi)發(fā)效率
<style lang="less"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; .img { border: 1px solid red; } } </style>
這里我們提一下,如何在新版 Vue CLI 中增加對(duì) less
的支持
其實(shí)很簡(jiǎn)單:需要在 package.json 中定義依賴(lài):
"devDependencies": { "less": "^3.0.4", "less-loader": "^4.1.0" }
然后安裝對(duì)應(yīng)的依賴(lài)即可,是不是比之前版本的腳手架省去了很多配置
當(dāng)然在使用 vue create
創(chuàng)建新項(xiàng)目的時(shí)候,也是可以在命令行直接選擇的:
再里面可以選擇:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue 組件 全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)
下面小編就為大家分享一篇vue 組件 全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue實(shí)現(xiàn)當(dāng)訪(fǎng)問(wèn)的路由不存在時(shí)跳轉(zhuǎn)到404頁(yè)面的方法詳解
在 Vue3 中,可以使用 Vue Router 實(shí)現(xiàn)跳轉(zhuǎn)到 404 頁(yè)面,即當(dāng)用戶(hù)訪(fǎng)問(wèn)一個(gè)不存在路由時(shí),系統(tǒng)會(huì)默認(rèn)跳轉(zhuǎn)到 404 頁(yè)面,本文給大家介紹了一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-12-12詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件,本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實(shí)現(xiàn)el dialog拖拽功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Vue.js實(shí)現(xiàn)文章評(píng)論和回復(fù)評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)文章評(píng)論和回復(fù)評(píng)論功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式
這篇文章主要介紹了vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue?element-ui的el-input-number默認(rèn)值設(shè)置為空方法
這篇文章主要給大家介紹了關(guān)于vue?element-ui的el-input-number默認(rèn)值設(shè)置為空的相關(guān)資料,el-input-number組件是Element?UI非常常用的一個(gè)數(shù)字輸入框組件,它提供了默認(rèn)值設(shè)置的選項(xiàng),需要的朋友可以參考下2023-08-08啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細(xì)的解決方法,并通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10