在项目中导入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. linux下安装QQ等EXE文件

    安装好linux系统后,发现linux很多自带的软件用起来很不习惯,于是去网上下载QQ等在Windows下经常使用的exe文件. 发现这些文件无法安装,在网上找了一些解决办法,须下载wine,然后才可 ...

  2. matplotlib画线(2)

    这篇随笔是matplotlib画线的补充>>> #nocl参数控制图例中有几列,>>> import numpy as np>>> import ...

  3. 洛谷P1228 地毯填补问题

    P1228 地毯填补问题 题目描述 相传在一个古老的阿拉伯国家里,有一座宫殿.宫殿里有个四四方方的格子迷宫,国王选择驸马的方法非常特殊,也非常简单:公主就站在其中一个方格子上,只要谁能用地毯将除公主站 ...

  4. Invalid YGDirection 'vertical'. should be one of: ( inherit, ltr, rtl )

    react native 路由( react-native-router-flux )跳转页面一直都报错 本项目解决方法:不是路由的问题,是跳转的页面有有问题,删除下图标记的红色即可(解决方法是排除法 ...

  5. MySQL 查询练习记录

    MySQL 查询练习记录 最近在复习mysql,在b站上找了一个感觉还不错的视频,把视频中查询练习相关的内容记录了下来,以便自己日后查阅和复习. 视频连接:https://www.bilibili.c ...

  6. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  7. Python基本的数据类型(补发)

    python基本的数据类型   一.python的基本数据类型 int => 整数,主要用来进行数学运算 str ==> 字符串 可以用来保存少量数据并进行相应操作 bool ==> ...

  8. JavaSE---悲观锁与乐观锁

    1.[悲观锁] 1.1 在数据处理的整个过程中,数据将处于锁定状态: 1.2 悲观锁的实现,依赖于数据库提供的锁机制(只有数据库提供的锁机制才能真正保证数据访问的排他性,否则,即使在系统中加锁机制,也 ...

  9. C# 连接oracle,用32位client和64位Client,可能导致结果不同

    在调用过程[pro_regentinitauth]时,有参数3-6为number类型,当我们用这样调用时,在32位client下,能正确得到输出参数3-6的结果为:1023, 但是,当我们把程序部署到 ...

  10. nodejs 实践:express 最佳实践(五) connect解析

    nodejs 实践:express 最佳实践(五) connect解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需 ...