如何在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入門10 vue+elementUI
    : false } } })</script></html>國際化Element組件內部替代使用中文，若希望使用其他語言，則需要進行多語言設置。注意：命令行都要使用管理員模式運行1、創建一個名為hello-vue的工程vue init webpack hello-vue
  • Vue.js以業務為中心的常見面試題
    6.active-class是哪個組件的屬性它是vue-router模塊的router-link組件的屬性7.如何定義vue-router的動態路由在靜態路由名稱前面添加冒號，如設置id動態路由參數，為路由對象的path屬性設置/:id8.如何獲取傳過來的動態參數
  • 什麼是Vue? 如何安裝和使用Vue?
    框架：是一套完整的解決方案；對項目的`侵入性`較大，項目如果需要更換框架，則需要重構整個項目。庫（插件）：提供某一個小功能，對項目的`侵入性`較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
  • Vue 項目中哪些問題戳中你的痛點?你又是如何解決的?(更新中)
    最近要求使用vue進行前後端分離開發微信公眾號，不斷摸索踩坑之後，總結出如下幾點vue項目開發中常見的問題及解決辦法。如果你是vue大佬，請忽略小弟的愚見^V^列表進入詳情頁的傳參問題。如何優雅的只在當前頁面中覆蓋ui庫中組件的樣式首先我們vue文件的樣式都是寫在<style scoped></style>標籤中的，加scoped是為了使得樣式只在當前頁面有效。
  • 深入認識 vue-cli:能做的不僅僅是初始化 vue 工程
    在全局安裝vue-cli之後，就可以通過一條命令初始化我們的vue工程：vue init <template-name> <project-name>接下來vue-cli就會按照這個 <template-name>模板內部的設置，拋出幾個問答選項。
  • 如何在vue項目中使用muse-ui並創建一個form表單提交
    Muse UI是基於vue的開源組件庫，包含了不同的控制項；可以自定義主題，實現定製化。如果在vue項目中，如何使用muse-ui？cnpm install --global vue-cli3、使用vue init命令初始化項目，創建基於webpack模板的項目vue init
  • vue中組件的使用(下)
    組件系統是vue的一個重要概念。利用它，我們可以將一個大型應用項目簡化成若干層和若干個小的組件模塊，使項目和代碼結構都更加清晰明確，同時這也對項目開發效率和維護成本提供了很有利的幫助。vue中組件的使用（上）中，小編總結了組件的分類和註冊、組件的data選項、組件的props選項的使用
  • 如何創建vue項目並使用element框架中的el-select
    cnpm install --global vue-cli2、創建一個基於webpack模板項目，使用命令vue init webpack wmnvue init webpack wmn3、項目安裝完畢，切換路徑，使用命令cd wmn命令：cd wmn
  • Vue使用swiper實現輪播圖效果
    還可以通過設置屬性的方式實現一些輪播的效果(例如:設置autoplay屬性,即可讓banner圖自動輪播.設置loop屬性,讓輪播圖輪播是否為循環輪播.)二、 在vue中swiper的使用方式1.安裝swiper在項目運行的控制臺輸入: npm install swiper vue-awesome-swiper –save進行安裝在vue中使用swiper插件，由於vue-awesome-swiper插件包的版本問題，會出現左右箭頭點擊失效以及自動播放失效的情況。
  • 在vue頁面開發時,如何修改第三方組件的默認樣式
    現在我們在開發vue應用時，有時會經常直接使用一些兼容vue的第三方組件庫。而vue組件我們都知道，在style樣式模塊中，為了實現組件樣式的模塊化，我們一般都會加上scoped，避免各個組件的樣式彼此影響。而因為scoped的作用，我們想在組建中局部修改第三方樣式，又擔心去除scoped造成組件樣式出現相互汙染。
  • 什麼是vue?在項目開發中為什麼要用vue?
    在近兩年的web及項目開發中，vue技術的使用越來越普遍，其各種資料、介紹以及使用攻略內容資料非常多，那麼vue到底什麼？在項目開發中，vue起到什麼作用？它與傳統的html+css+js+lamp開發網站項目又有什麼區別呢？
  • 實戰教學使用 Vue3 重構 Vue2 項目(萬字好文推薦)
    本文來自於 神奇的程式設計師 的分享好文，點擊閱讀原文查看作者的掘金鍊接。
  • 如何在Node.js使用Pug創建表格並設置樣式
    ，如果項目使用Pug模板引擎，想要新建一個表格，該怎麼實現？單個表格沒有加樣式屬性，如何設置表格樣式？下面利用實例說明：操作步驟：1、在已創建好的Node.js項目中，views文件夾上，滑鼠右鍵新建Pug文件；輸入文件名稱，點擊OK
  • 12 種使用 Vue 的優秀做法
    這是很有必要的，這樣Vue就可以跟蹤組件狀態，並對不同的元素有一個常量引用。在使用動畫或Vue轉換時，key 非常有用。如果沒有key ，Vue只會嘗試使DOM儘可能高效。這可能意味著v-for中的元素可能會出現亂序，或者它們的行為難以預測。如果我們對每個元素都有唯一的鍵引用，那麼我們可以更好地預測Vue應用程式將如何精確地處理DOM操作。
  • 如何在vue框架項目中使用echarts並製作柱狀圖
    cnpm install --global vue-cli2、接著使用命令：vue init webpack wanm，創建一個基於webpack模板的新項目運行項目：npm run dev4、如果要在vue框架項目中使用echarts，需要安裝echartsnpm install echarts
  • 怎麼使用vue中的實例屬性vm.$data
    那麼，這個實例屬性怎麼使用？1、打開HBuilderX工具，創建vue項目，然後在src/components新建vue文件DataAtrr.vue新建vue文件DataAtrr.vue2、使用命令npm i element-ui -S安裝Element，然後打開main.js文件，引入Element的樣式和模塊
  • 【項目推薦】Vue.js
    作者是尤雨溪,寫下這篇文章時 vue.js版本為 1.0.7 。我推薦使用 sublime text 作為編輯器，關於這個編輯器可以看我這篇文章。在 package control中安裝Vuejs SnippetsVue Syntax Highlight推薦使用 npm 管理,新建兩個文件 app.html，app.js，為了美觀使用 bootstrap，我們的頁面模板看起來是這樣:<!
  • 如何在uni-app項目中使用vue計算屬性
    工具HBuilderX微信開發者工具技術vueuni-appJavaScriptuni-app是 Vue.js 開發所有前端應用的框架，因此可以使用vue中的相關屬性，如計算屬性computed。其中，computed計算屬性是控制表達式結果的。
  • Vue的學習筆記(中篇)
    Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。上篇文章我們講述了基礎，可以戳這裡：Vue的學習筆記（上篇）。