1.注册全局组件(是一个单vue页面组成的一个组件,而不是现拼的template结构)

结构:

代码:main.js

import UserList from './components/UserList'
Vue.component('user-list', UserList)

2. 让头像不压缩的填充展示

img{

  display: block;

}

3. 背景图引入路径错误问题:

如图,结构如下,怎么核对检查,路径和文件名都是没错的,

但是不清楚为什么就是找不到图片还报错

后来才想到,我的sass文件是引入在app.vue中的,所以路径不对

改完后果然ok了:

4.sass公用样式

第一种:

.公用样式{...}

.div{

  @extend .公用样式;

}

第二种:

@mixin .公用样式(参数){

  ...

  @content;

};

.div{

  @include .公用样式(参数){

    自己的单独样式

  }

};

vue经验 - 实战疑点总结的更多相关文章

  1. webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  2. vue.js实战——购物车练习(包含全选功能)

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  3. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  4. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  5. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  6. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  7. vue前端实战注意事项

    1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...

  8. vue项目实战

    本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...

  9. Vue.js 实战教程(附demo)

    在实战之前,你需要对vuejs的基础语法有一定的了解,可以通过以下几个途径进行学习: vue.js官方文档:https://cn.vuejs.org/v2/guide/index.html vue.j ...

随机推荐

  1. Android Notification和权限机制探讨

    近期为了在部门内做一次小型的技术分享.深入了解了一下Notification的实现原理.以及android的权限机制.在此做个记录.文章可能比較长,没耐心的话就直接看题纲吧. 先看一下以下两张图 图一 ...

  2. ELK filter过滤器来收集Nginx日志

    前面已经有ELK-Redis的安装,此处只讲在不改变日志格式的情况下收集Nginx日志. 1.Nginx端的日志格式设置如下: log_format access '$remote_addr - $r ...

  3. 错误 未能找到类型或命名空间名称"xxxxxx"的真正原因

    今天又被这问题撞上了,结果神奇般的解决了 谷歌了很久都没有找到真正有用的解决方案,所以在这儿写下,让更多的人看到 最根本的原因其实就是引用的问题,引用错了,然后VS在这上面提示又不够智能,所以大家被坑 ...

  4. php 判定pc端與移動端

    1.親測有效 2.上代買 //判斷移動端,pc端 /*移动端判断*/ public static function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移 ...

  5. RTC教程

    Tutorial: Get started with Rational Team Concert Getting Started with Jazz Source Control RTC入门教程及冲突 ...

  6. Python学习(五)——列表操作全透析

    列表是以类的形式实现的. "创建"列表实际上是将一个类实例化. 因此,列表有多种方法能够操作. Python列表操作的函数和方法 列表操作包括下面函数: 1.cmp(list1, ...

  7. IOS_多线程

    苹果的Cocoa框架支持的多线程机制有三中NSThread.GCD.NSOperation. NSThread:是官方推荐的也是最主要的线程创建方式,可是须要开发这自己去管理线程的生命周期比如线程同步 ...

  8. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  9. JSON.stringify报cyclic object value错误

    这是一个典型的循环引用的错误,一个对象里引用自己就会立刻得到这个错误: obj = { x:555, y: "hi" }; obj.myself = obj; try{ json ...

  10. VCL 中的 Windows API 函数(2): ActivateKeyboardLayout

    ActivateKeyboardLayout 分别在 Controls.DBGrids.Grids 单元用到, 基本都是如下语句: ActivateKeyboardLayout(Screen.Defa ...