使用场景:有适配pc端改为适配pc端和移动端,使用2套css

代码实现App.vue

created: function () {
if(document.documentElement.clientWidth > 640){
require('./style/index.scss');
this.plaform = 'pc';
}else{
require('./style/mobile.scss');
this.plaform = 'mobile'; }

注意:

为2套css分别指定不同的父class

比如说pc端 css为pc.scss  父类为 .pc    移动端 mobile.scss    父类为 .mobile

作者:smile.轉角

QQ:493177502

    

【vue】vue +element 搭建项目,要求既支持pc端又支持移动端的更多相关文章

  1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  2. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

  3. vue.js + element 搭建后台管理系统 笔记(一)

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  4. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

  5. 【vue】vue +element 搭建项目,mock模拟数据(纯干货)

    1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...

  6. 【vue】使用vue+element搭建项目,Tree树形控件使用

    1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...

  7. 【vue】vue +element 搭建项目,将js函数变成vue的函数

    demo:时间转换 1.目录 <1>在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js, <2>在prototypefns下新建文件 ...

  8. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

  9. 【vue】vue +element 搭建项目,vuex中的store使用

    概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...

随机推荐

  1. Http协议请求头、响应头、响应码

    Http部分请求头 Accept 客户机通过这个头,告诉服务器,它支持哪些数据类型 Accept-Charset 客户机通过这个头,告诉服务器,它支持的编码 Accept-Encoding 客户机通过 ...

  2. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  3. Html中的img标签 加载失败

    在Http请求时,有时会遇到img图片标签加载失败,不显示的情况: 解决方法,在重新给src属性赋值时,先将onerror事件清除掉,再赋值,这样就不会存在循环调用问题了,代码如下; <img ...

  4. 【Wyn Enterprise BI知识库】 认识多维数据建模与分析 ZT

    与业务系统类似,商业智能的基础是数据.但是,因为关注的重点不同,业务系统的数据使用方式和商业智能系统有较大差别.本文主要介绍的就是如何理解商业智能所需的多维数据模型和多维数据分析. 数据立方体 多维数 ...

  5. springboot 学习之路 7(静态页面自动生效问题)

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

  6. GitHub Flow & Git Flow 基于Git 的两种协作开发模式

    介绍基于Git 两种协作开发模式,GitHub Flow & Git Flow 对于Github 一些好用的特殊操作技巧 ,可以见GitHub 特殊操作技巧 和Git的基本操作 一 GitHu ...

  7. 堆栈的应用——用JavaScript描述数据结构

    栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把另一端称为栈底. 一.实现一个栈类Stack 基于堆栈的特性,可以用数组做线 ...

  8. html常见标签和属性

    主体 body中常见属性 属性 表格 列表 表单 其他 input字段属性 form字段属性

  9. C#-方法(八)

    方法是什么 方法是C#中将一堆代码进行进行重用的机制 他是在类中实现一种特定功能的代码块,将重复性功能提取出来定义一个新的方法 这样可以提高代码的复用性,使编写程序更加快捷迅速 方法格式 访问修饰符 ...

  10. IPv6简介

    https://segmentfault.com/a/1190000008794218 IPv6的优点 更大的地址空间 名字叫IPv6,但它的长度并不是64位,而是128位,总的地址空间大约为3.4* ...