如何在vue項目中使用sass並設置元素樣式

2020-12-11 IT軟體專家

工具

GitnpmHBuilder瀏覽器技術

vueelementJavaScriptsassCSS3 在創建vue框架項目時，可以使用CSS3定義元素樣式；還可以使用sass動態變量定義元素樣式。如果直接使用sass，啟動項目會出現報錯。那麼，如何在vue項目中使用sass？下面利用實例說明：

1、打開HBuilderX開發工具，新建項目，選擇普通項目；然後輸入項目名稱wmk，選擇vue模板，接著點擊創建按鈕

新建項目，選擇vue模板

2、在項目中src/components文件夾下，新建vue文件，輸入文件名稱，點擊創建

新建vue文件，點擊創建按鈕

3、進入到項目的根目錄，滑鼠右鍵選擇Git，輸入命令：npm i element-ui -S，安裝element

npm i element-ui -S，安裝element

4、打開項目中的main.js文件，導入element相關的模塊和樣式文件，然後使用Vue.use(ElementUI)

導入Element模塊以及樣式文件

5、在已新建的vue文件，利用Element進行頁面布局，插入一個輸入框和一個按鈕，綁定按鈕點擊事件

頁面布局，插入一個輸入框和一個按鈕

6、在script標籤中，data對象中定義變量stuNo並初始化，methods對象中定義新增方法

定義變量並初始化，定義新增方法

7、接著，在style標籤中，添加一個lang屬性，值為scss；然後使用sass中的方式定義變量font-color和font-size，在元素中使用

定義變量，並設置元素樣式

8、打開App.vue文件，導入Cut組件，然後在界面中引用

導入Cut組件，然後在界面中引用

9、使用HBuilderX工具內置命令運行，結果出現了報錯；由錯誤提示可知，缺少sass-loader模塊

由錯誤提示可知，缺少sass-loader模塊

10、在Git命令窗口，輸入npm install sass-loader --save-dev，安裝sass-loader

安裝sass-loader

11、安裝sass-loader成功後，啟動項目還是報錯；查閱相關資料，還缺少 node-sass

錯誤提示，缺少node-sass

12、接著在Git命令窗口，輸入npm install node-sass --save-dev命令，安裝node-sass

安裝node-sass

13、再次啟動項目，啟動成功

再次啟動項目，啟動成功

14、按照項目啟動成功後的項目訪問路徑，打開瀏覽器，訪問界面並查看界面效果

打開瀏覽器，訪問界面並查看界面效果

15、檢查界面發現，樣式沒有起到作用；修改定義樣式，並設置對應的元素類

修改定義樣式，並設置對應的元素類

16、再次刷新瀏覽器，查看界面效果，可以發現元素樣式起到作用了

刷新瀏覽器，查看界面效果

相關焦點

  • 如何創建vue項目並使用element框架中的el-select
    使用命令vue init webpack wmn命令：vue init webpack wmnvue init webpack wmn3、項目安裝完畢，切換路徑，使用命令cd wmn命令：cd wmncd wmn4、進入項目根目錄，安裝相關依賴，使用命令npm install 或 cnpm install命令：npm install 或 cnpm install
  • 在vue項目中使用vuex實現狀態管理的案例
    說明：其實如果項目不是很龐大很複雜，沒有涉及到很多狀態值需要被很多頁面或組件共用；或者某個頁面或組件的行為會對其他頁面或組件造成依賴性的影響。並不需要使用vuex。vuex的使用與否在實際開發中應該視項目情況而定。準備工作：a.在vue項目中安裝vuex: npm install vuex -S。b.了解下vuex的五個屬性。
  • 如何在Vue3框架中使用Element Plus
    那麼，Vue3框架如何使用Element Plus？下面利用實例說明：操作步驟：1、打開電腦硬碟，新建一個文件夾aam，打開文件夾並打開Git命令窗口；輸入命令npm install -g @vue/cli
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    等等，太多了，那我們如何在這繁雜的框架中選擇一個合適的呢？FaceBook，社區比較多，而且還可以跨平臺運行，React-Native可以實現一次編寫，安卓、蘋果、web通殺；但是學習也需要一段時間，而且後期維護也不容易；其他的我們就不一一介紹了，最後來看看今天的重頭戲Vue;三、Vue，值得我們驕傲的是，國人發明的，一款漸進式框架，能與現有項目無縫融合，也就是說現有項目可以逐步更新替換使用vue；使用她能讓我們無需過多的分神去處理數據怎麼展示同步
  • Vue.js深入學習
    v-model :實現表單元素和Model中數據的雙向數據綁定，只能用在表單元素中類樣式：使用v-bind 數組數組中使用三元表達式,:class="['thin','italic',{'active:false'}]"對象 :class={red:true,thin:true,italic:false}:style={color
  • Vue.js 教程:構建一個特斯拉汽車餘電計算器
    App.vue 是應用程式的入口組件。圖下方是 App.vue 組件。列表 1項目入口點Vue 應用程式在 main.js 中啟動。在 main.js 中，你首先需要創建一個新的「root Vue 實例」。如下所示：1. 導入 Vue：從「vue」導入 Vue。
  • 什麼是VUE?VUE與JS的對比
    我們需要一個UI元素和屬性相互綁定的方法 2. 我們需要監視屬性和UI元素的變化 3.概念vue是一個構建用戶界面的框架(庫),它的目標是通過儘可能簡單的api實現響應的數據綁定和組合的視圖集合 vue自身不是一個全能框架的核心是只關注視圖層,因此它非常容易學習，非常容易與其它庫或已有項目整合 vue在與相關工具和支持庫一起使用時, 也能完美地驅動複雜的單頁應用
  • a標籤 href vue專題及常見問題 - CSDN
    此處的將a的標籤href實現綁定：href同時對路徑進一步轉化拼接以上這篇vue.js 實現a標籤href裡添加參數就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。時間： 2019-11-10公司要做一個類似今日頭條的項目,用前後端分離的方式做成HTML5頁面,先在微信中運行,領導說想看看效果怎麼樣.今日頭條頭部的導航是可以滾動和添加類別的,我們這個項目也是一樣.所以在導航這個地方就需要在點擊不同分類的同時,樣式也是跟著變的,我在網上搜索了一下,發現了下面的代碼,簡潔清淅,不過具體網址忘記了
  • vue高級進階系列——用typescript玩轉vue和vuex
    說的簡單點就是對vue的狀態進行統一管理，如下圖介紹了其管理模式：最簡單的使用方法長這樣的：// 如果在模塊化構建系統中，請確保在開頭調用了 Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment
  • table vue插槽的使用 - CSDN
    1、插槽內容　　vue實現了一套內容分發的api，將 slot 元素作為承載內容分發的出口。　　插槽內可以包含任何模板代碼，包括html，以及其他組件。　　如果組件內沒有一個 slot 元素，那麼該組件起始標籤和結束標籤之間的任何內容都會被拋棄。
  • word中如何快速設置標題、生成目錄?這些樣式功能必不可少
    在word中，「樣式」佔據了開始選項卡幾乎三分之一空間，比字體和段落佔據的空間都要大，加上放在這麼明顯的地方，「樣式」功能的重要性不言而喻。但是大部分人看到「樣式」後可能只知道是用來添加標題級次的。但是添加標題級次有什麼用呢？如何有效使用樣式中的功能？本文就和小編一起來看看吧。
  • ref vue 獲取文本專題及常見問題 - CSDN
    ref的官網介紹https://cn.vuejs.org/v2/api/#ref需求在普通的js操作中，一般都是直接操作dom元素，但是對於Vue.js框架來說，一般是不允許直接操作dom元素的。那麼其實Vue.js框架提供了ref獲取dom元素，以及組件引用。
  • Vue全家桶之什麼是Vuex
    試想一下，如果在一個項目開發中頻繁的使用組件傳參的方式來同步data中的值，一旦項目變得很龐大，管理和維護這些值將是相當棘手的工作。為此，Vue為這些被多個組件頻繁使用的值提供了一個統一管理的工具——VueX。也就是說如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理數據狀態，Vuex 將會成為自然而然的選擇。為什麼使用Vuex ？
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於vue,react,angular等框架的項目,碧如vue生態的elementUI, ant-design-vue, iView等成熟的UI框架
  • 5分鐘帶你入門vuex(vue狀態管理)
    如果你之前使用過vue.js，你一定知道在vue中各個組件之間傳值的痛苦，在vue中我們可以使用vuex來保存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新，那麼接下來我們就來學習一下vuex是如何修改狀態值的：我們新建一個vue項目（這裡由於我們是講解vuex，所以對於vue項目的創建我們不會講解太詳細）；在命令行輸入 vue init
  • 如何在uni-app項目中使用數據緩存方法
    uni-appJavaScriptCSS3在使用uni-app進行微信小程序開發過程中，如果不同界面中需要登錄用戶的信息，這時就需要用到數據緩存。如何設置緩存、獲取緩存、刪除緩存和清空緩存？下面利用具體的實例來說明：1、在uni-app項目中，新建cookie頁面，並在頁面插入設置緩存按鈕，綁定點擊事件setCookie
  • 如何寫一個vue組件專題及常見問題 - CSDN
    如何使用vue寫一個組件庫新建vue項目使用vue-cli初始化一個項目：vue init webpack VueComponentcd VueComponentnpm installnpm run dev以上就新建好了一個vue項目項目目錄首先，定義好目錄，經過觀察大多數的組件庫，基本是這樣的目錄
  • 如何將Element Plus無序列表項轉換樹節點
    工具HBuilderXGitnpm瀏覽器技術Vue3Element PlusJavaScript 在使用Vue3.0和Element Plus UI搭建的框架項目，使用Element Plus的Tree控制項，並將無序列表的子項轉換成Tree的根節點；點擊無序列表項
  • Vuex你從沒使用過的優化方案!
    本文轉載自【微信公眾號：前端人，ID:FrontendPeople】經微信公眾號授權轉載，如需轉載與原文作者聯繫在本篇文章我們將重點關注代碼拆分我們的狀態管理 - Vuex模塊的優化在我們進一步了解如何懶加載Vuex模塊之前，您需要注意一件重要的事情。