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>