Vue項目中如何使用Element-UI以及如何使用sass

Vue項目中如何使用Element-UI以及如何使用sass

當咱們在開發Vue項目的時候一般會選擇Element-UI做爲咱們的UI框架,其官方中文文檔地址是http://element.eleme.io/#/zh-CN.(我在一次跟朋友聊天中得知他們公司前端在使用Element-UI),我在工做中一直在使用Extjs6.0前端框架,做爲一個老牌重框架,它自帶UI組件,須要什麼組件拿來用就好.好比說一個日期插件,找到它的xtype,編寫好配置項就行了.由於它的官方文檔中也給出了一個較爲完整的基礎模板(ionic也如此),特別適合後臺管理系統.我也想固然的認爲Element-UI也會有自帶的默認模板.查文檔,上網搜也沒有發現.想要搭建一個Vue加Element-UI的項目就得從零開始.假定咱們已經有一個npm安裝的Vue基本項目了,那麼咱們須要在咱們的項目中安裝Element-UI,終端進入項目目錄,而後輸入如下命令,參數--save代表在你發佈項目的時候也須要依賴此npm包

$ npm install element-ui --save
安裝完畢之後,咱們的項目的package.json的dependencies字段就會多出element-ui這一項和其相應的版本

咱們須要的依賴已經安裝完畢,接下來就是在項目中註冊應用它.在項目的main.js下,須要import element-UI,

在main.js中進行配置引用,以下 ：
import ElementUI from 'element-ui' 引入整個組件
import 'element-ui/lib/theme-default/index.css' 引入import一個css文件,
import 'font-awesome/css/font-awesome.min.css' 引入font-awsome字體

Vue.use(ElementUI)

在Vue中使用element-ui,Vue.use(ElementUI),如今就能夠在項目中使用element-ui了

至此,就能夠在項目中引用element-ui的組件啦.引用element-ui之後,咱們固然要使用sass,接下里咱們須要在項目中安裝sass-loader以及node-sass,由於sass是在開發過程當中所依賴的npm包,因此安裝它們時須要添加--save-dev參數

$npm install sass-loader --save-dev
$npm install node-sass --save-dev

安裝成功之後咱們在package.json中就能夠看到依賴項,
在項目中的component裏style標籤中添加lang="scss"屬性就可使用scss語法了.

<style lang="scss" scoped>
</style>