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>
转载于:https://www.cnblogs.com/andy-lehhaxm/p/10412795.html
- 点赞
- 收藏
- 分享
- 文章举报
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
- 如何在vue项目中使用递归组件配合Element-ui布局侧边栏
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
- 使用vue-ui来创建项目并安装vue-cli-plugin-element插件
- vue+axios+element-ui实战(一)--使用Vue CLI 搭建项目
- 使用 vue-cli + element-ui 快速搭建项目
- 如何新建一个Vue项目并导入element-ui的模板
- webpack搭建的vue-cli项目如何使用sass?
- vue项目中引入element-ui时,如何更改主题色
- 在vue项目中使用element-ui的Upload上传组件
- 在vue项目中使用element-ui的Upload上传组件
- 目前最新jquery-ui-1.12.1的使用以及如何添加到自己的项目中去
- 如何在vue项目中使用sass(scss)
- 在vue项目中使用element-ui的Upload上传组件的示例
- vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
- 关于Vue项目,如何按需引入Element-UI的MessageBox弹框
- vue中使用Element-UI----如何修改环形进度条尺寸
- vue中如何使用Element-UI
- vue项目搭建配置sass、element-ui、vux、axios、服务器代理