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

Posted 2021-02-10 andy-lehhaxm

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>