在项目中导入element以及sass、stylus等方便开发的工具以及UI框架

(1)如何在vue项目中导入elementUI框架

  elementUI是饿了么团队开发出来基于vue的前端UI框架,其底层原理和bookstrap相似

  安装 npm install element-ui -S

  在package.json中检查是否已经装上element

  在main.js中:import ElementUI from 'element-ui'

        import 'element-ui/lib/theme-chalk/index.css'

        Vue.use(ElementUI)

(2)如何在vue项目中使用sass预编译

   安装sass:npm install --save-dev sass-loader

       //sass-loader依赖于node-sass

         npm install --save-dev node-sass

   配置:在build文件夹下的webpack.base.conf.js的rules里面添加配置

      {

         test: /\.sass$/,

           loaders: ['style', 'css', 'sass']

       }

   在APP.vue中修改style标签

      <style lang="scss">

vue入坑教程(二)在vue项目中如何导入element以及sass的更多相关文章

  1. Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  2. 《Asp.Net Core3 + Vue3入坑教程》-Net Core项目搭建与Swagger配置步骤

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程仅适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 教程后 ...

  3. Vue入坑教程(一)——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

  4. vue入坑教程(一)

    1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...

  5. vue入坑教程(三)vue父子组件之间互相调用方法以及互相传递数据

    1.父组件调用子组件的方法 父组件: <template> <div> <button v-on:click="clickParent">点击& ...

  6. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  7. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  8. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  9. Vue2.0史上最全入坑教程(下)—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

随机推荐

  1. openinstall渠道统计工具介绍

    大家好,今天给大家介绍一下如何使用openinstall 来实现APP 渠道统计,做运营推广的朋友应该对渠道统计并不陌生,之前一般都是让技术的同事打渠道包方式进行渠道统计,而且只有安卓才能打渠道包.o ...

  2. JMeter(7) 优化判断返回类型和返回值

    之前判断接口类型和返回值用beanshell,可见JMeter(5)-JMeter之BeanShell使用 优化点 接口测试里面对返回字段的类型验证和值验证为基本需求,将方法导成jar文件,导入之后方 ...

  3. Web 加入favicon

    一.点击    制作自己的favicon图标; 二.在网页head中加入: <link rel="shortcut icon" href="favicon.ico& ...

  4. HDU-1498-50years,50colors(最大匹配, 枚举)

    链接:https://vjudge.net/problem/HDU-1498#author=634579757 题意: 撞气球游戏,一个n*n的矩阵中,有不同颜色的气球,气球的颜色最多50种(从1到5 ...

  5. Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D

    Arpa has found a list containing n numbers. He calls a list bad if and only if it is not empty and g ...

  6. (转)Centos7安装配置NFS服务和挂载

    Centos7安装配置NFS服务和挂载 原文:https://www.u22e.com/601.html NFS简介 NFS(Network File System)即网络文件系统,是FreeBSD支 ...

  7. Spark Mllib里决策树回归分析使用.rootMeanSquaredError方法计算出以RMSE来评估模型的准确率(图文详解)

    不多说,直接上干货! Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率和决策树多元分类使用.precision方法以precision来评估模型 ...

  8. 30个提高Web程序执行效率的好经验

    尽量避免使用DOM.当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用.使用设置innerHTML的方法来替换document.createElement/append ...

  9. 【转】"超时时间已到。在操作完成之前超时时间已过或服务器未响应"的解决方法

    方法有以下三种: 1.原因应该在数据访问有问题,可以把连接时间设置长些,在数据库连接字符串,加上Connect Timeout=18000,单位毫秒 2,在web.config中加上以下语句: < ...

  10. java获取服务器一些信息的方法

    request.getServletContext().getRealPath("/") 获取项目所在服务器的全路径,如:D:\Program Files\apache-tomca ...