vue2中使用less簡(jiǎn)易教程

更新時(shí)間：2018年03月27日 14:21:11 投稿：mrr

這篇文章主要介紹了vue2中使用less簡(jiǎn)易教程，由于不需要手動(dòng)配置webpack，所以vue中使用less是非常簡(jiǎn)單的，只需要安裝less，less-loadder就ok了

首先，說(shuō)明一點(diǎn)，如果是使用npm init webpack 項(xiàng)目名的方式創(chuàng)建的項(xiàng)目,無(wú)需手動(dòng)配置webpack

所以再vue中使用less就非常簡(jiǎn)單了，只需要安裝less, less-loader就行了

步驟

npm install less less-loader --save //將less和less-loader安裝到開(kāi)發(fā)依賴(lài)
npm run dev

如果安裝成功那么就可以再vue組件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

補(bǔ)充：

vue中如何使用less

http://element.eleme.io/ //

elementUI是基于vue2

vue中使用less

首先vue開(kāi)發(fā)環(huán)境已經(jīng)安裝成功

當(dāng)所有東西都準(zhǔn)備好之后：

第一步：

安裝less依賴(lài)，npm install less less-loader --save

第二步：

修改webpack.config.js文件，配置loader加載依賴(lài)，讓其支持外部的less,在原來(lái)的代碼上添加

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

現(xiàn)在基本上已經(jīng)安裝完成了，然后在使用的時(shí)候在style標(biāo)簽里加上lang=”less”里面就可以寫(xiě)less的代碼了(style標(biāo)簽里加上 scoped 為只在此作用域有效)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less" rel="external nofollow" >
<script src="文件路徑/less.js" type="text/javascript"></script>
)

您可能感興趣的文章:

vue
less

相關(guān)文章

如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長(zhǎng)
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長(zhǎng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解
這篇文章主要為大家介紹了vue3自定義指令實(shí)現(xiàn)按鈕防抖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個(gè)完整的移動(dòng)webApp項(xiàng)目的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue 2.0入門(mén)基礎(chǔ)知識(shí)之內(nèi)部指令詳解
這篇文章主要介紹了Vue 2.0入門(mén)基礎(chǔ)知識(shí)之內(nèi)部指令知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2017-10-10
詳解Vue.js動(dòng)態(tài)綁定class
Vue.js的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它允許我們?cè)谄胀?HTML 模板中使用特殊的語(yǔ)法將 DOM “綁定”到底層數(shù)據(jù)。被綁定的DOM 將與數(shù)據(jù)保持同步，每當(dāng)數(shù)據(jù)有改動(dòng)，相應(yīng)的DOM視圖也會(huì)更新。基于這種特性，通過(guò)vue.js動(dòng)態(tài)綁定class就變得非常簡(jiǎn)單。一起來(lái)看下吧
2016-12-12
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令
Vue.js每天必學(xué)之指令系統(tǒng)與自定義指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue Router去掉url中默認(rèn)的錨點(diǎn)#
vue-router默認(rèn)hash模式——使用URL的hash來(lái)模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了Vue Router去掉url中默認(rèn)的錨點(diǎn)#,需要的朋友可以參考下
2018-08-08
Vue 自定義標(biāo)簽的src屬性不能使用相對(duì)路徑的解決
這篇文章主要介紹了Vue 自定義標(biāo)簽的src屬性不能使用相對(duì)路徑的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue3實(shí)現(xiàn)封裝時(shí)間計(jì)算-日期倒計(jì)時(shí)組件-還有XX天&第XX天
這篇文章主要介紹了vue3實(shí)現(xiàn)封裝時(shí)間計(jì)算-日期倒計(jì)時(shí)組件-還有XX天&第XX天,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03