Sass

肉联帮团队前端代码规范

China☆狼群 提交于 2020-04-28 16:25:51
前言 代码规范参考借鉴自各个团队规范,提供肉联帮前端团队规范。 基本规范 命名规范 命名分类 camelCase (驼峰式,也叫小驼峰命名, e.g. userInfo ) PascalCase (帕斯卡命名式,也叫大驼峰命名, e.g. UserInfo ) kebab-case (短横线连接式, e.g. user-info ) snake_case (下划线连接式, e.g. user_info ) 项目命名 全部采用小写方式, 以下划线分隔。 例: snake_case 目录命名 组件目录使用 PascalCase ,其他目录统一使用 kebab-case 风格 HTML命名 单数复数使用 kebab_case.js 风格 CSS命名 统一使用 snake_case.css HTML命名 统一使用 snake_case.html HTML 规范 语法标准 缩进使用 tab(2 个空格); 嵌套的节点应该缩进; 在属性上,使用双引号,不要使用单引号; 属性名全小写,用中划线(-)做分隔符; 要在自动闭合标签结尾处使用斜线; <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src= "images/image.png" alt= "Image" /> <!-- 属性名全小写

Vue+Webpack配置css-loader时报错:Module build failed: Unknown word

帅比萌擦擦* 提交于 2020-04-28 11:19:22
  使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。   配置内容如下: {   test: /\.css$/,   use: [     'css-loader',     'style-loader'   ] }   在网上找解决方案时看到一种方法,将这段配置注释掉,不会影响css代码的引入,也不会再报错,不过作者并未找到原因。但是,将该方法运用到我的代码中时没有作用,将配置注释掉后会报错:You may need an appropriate loader to handle this file type.——要求对该类型文件配置加载工具!   试了几种方法并没有效果,后来想到视频教程中提到这些工具的作用:css-loader用于读取css文件,style-loader用于处理css-loader读取的文件,这里有没有依赖关系之类的,需要按照一定的顺序配置,于是将顺序调换了一下,配置如下: {   test: /\.css$/,   use: [ 'style-loader',     'css-loader'   ] }   这样处理后,打包构建时没有报错了

vue 中安装使用sass 报错遇到的问题整理

非 Y 不嫁゛ 提交于 2020-04-28 06:29:56
不出错的情况下,正常安装: 1. 安装包: npm install node-sass --save-dev npm install sass-loader --save-dev (sass-loader依赖于node-sass) 2. 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loaders: [ 'style', 'css', 'sass'] } 3. 在APP.vue中修改style标签 < style lang= "scss"> 4. 启动npm run dev 如果一切顺利,恭喜你,如果没成功,别慌 出错情况: a. 在第一步安装sass-loader和node-sass时报错,我装了很多次,sass-loader没问题,主要是node-sass装不上,可能是网络原因无法下载,可以使用淘宝镜像来安装: $ npm install -g cnpm --registry=https: //registry.npm.taobao.org (安装淘宝镜像) $ cnpm install node-sass --save (使用淘宝镜像安装node-sass) OK,如果没问题了的话,恭喜,可以回到2.3.4来使用sass了 b. 像我这种运气差到用淘宝镜像依然装不上的情况怎么办?不慌

uni-app——uni-ui的使用

99封情书 提交于 2020-04-28 05:25:46
uni-app——uni-ui的使用 0.2882019.06.09 22:53:34字数 186阅读 2602 1)uni-ui 是全端兼容的基于flex布局的ui库; 2)可以使用 npm 的安装使用方式,也可下载相关组件直接使用; 3)uni-ui 不支持使用 Vue.use() 的方式安装 4)uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app 项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要在项目下npm安装 node-sass 和 sass-loader 1. 初始化项目 在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行: npm init -y 2. 安装 uni-ui npm install @dcloudio/uni-ui 3. 使用 uni-ui 在 script 中引用组件: <script > import {uniCard, uniPagination} from '@dcloudio/uni-ui' // 也可使用此方式引入组件 // import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' export default { components: {

cnpm run build 报错 Node Sass could not find a binding for your current environment: OS X 64-bit wi...

寵の児 提交于 2020-04-28 05:18:38
错误: Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 9.x js项目: 1、从SVN上checkout 下来 终端打开cd 目录 svn://192.168.x.xxx/xxx/xxx/xxx/xxx/xxx/xxx-ios/ (SVN上项目目录) /Users/Datacvg/Desktop/xxx --username=xxx --password=xxx 2、安装cnpm 并且 build npm install cnpm -g - -registry= https://registry.npm.taobao.orgrg //只在第一次执行一次 之后不用在执行 cnpm install cnpm run build build成功之后会出现一个node_modules文件夹,如下图所示: 很长时间之后再次cnpm run build的之后报错 Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 9.x 如下图所示: 解决方法: 删除node_modules文件夹,重新执行cnpm install 再执行cnpm

记一次升级node版本后,运行原vue项目报错问题解决方法

南笙酒味 提交于 2020-04-28 04:43:52
今天因为想要尝试一下vue-cli3版本的脚手架,于是更新了一下node版本,结果导致原来的vue项目无法成功启动,报错信息大概类似于 “Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 10.x” 同时,命令行提示: This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to download the binding for your current environment. 看这个说明,大概意思就是说,因为我在执行了npm install指令安装好了依赖之后,环境又发生了改变(node版本变更),所以不能将当前的node环境与项目中的sass依赖建立绑定关系,需要执行“npm rebuild node-sass”来重新下载依赖。 所以,按他说的,执行命令 npm rebuild node-sass 一通下载之后,运行项目,依然报错,于是开始百度,按照其他网友的指示,再执行一次 npm update 来更新项目里的依赖包,然后,大功告成。 来源: oschina 链接:

error in ./src/views/demo/ueditor.vue Module build failed: Error: Cannot find module &apos;node-sass&apos; ...

给你一囗甜甜゛ 提交于 2020-04-27 08:04:44
npm run dev 报错,这个错误好像还遇到挺多次的,这次特地记录一下,反正错误翻译过来就是模块生成失败:错误:找不到模块“node sass” 需要堆栈:....这大概意思就是下载node-sass失败呗 我这里是这么做法就成功了 首先执行:npm install -g cnpm --registry=https://registry.npm.taobao.org 再执行:cnpm install node-sass --save 最后:npm run dev 莫名的就成功跑起来了.... 来源: oschina 链接: https://my.oschina.net/u/4377994/blog/4254689

VSCode操作

柔情痞子 提交于 2020-04-23 00:16:21
VSCode切换中文: 打开“vscode”。 按快捷键“Ctrl+Shift+P”。 在“vscode”顶部会出现一个搜索框。 输入“configure language”,然后回车。 “vscode”里面就会打开一个语言配置文件。 Auto Close Tag 自动闭合HTML标签 Auto Import import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Babel JavaScript babel插件,语法高亮 Babelrc .babelrc文件高亮提示 Beautify css /sass/scss/less css/sass/ less格式化 Better Align 对齐赋值符号和注释 Better Comments 编写更加人性化的注释 Bookmarks 添加行书签 Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号 Can I Use HTML5、CSS3、SVG的浏览器兼容性检查 Code Outline 展示代码结构树 Code Runner 运行选中代码段(支持多数语言) Code Spell checker 单词拼写检查 CodeBing 快速打开Bing并搜索,可配置搜索引擎 Color Highlight 颜色值在代码中高亮显示 Color Info 小窗口显示颜色值,rgb,hsl

Sentry实时应用错误跟踪系统在Kubernetes中私有化部署

六眼飞鱼酱① 提交于 2020-04-22 04:58:30
应用错误跟踪系统:对软件系统运行过程中产生的错误日志进行收集从而实现监控告警。 虽然软件错误❌是不可避免的,但是可以降低错误数。 提高对错误的治理能力能让错误带来的损失降到最低 ​👍🏻 。 错误日志监控在最顶层的业务层监控,有他将会帮助你打造更好的软件! 我们需要业务场景下自己发现Bug的速度快于用户报告Bug的速度,毕竟让用户报告已经晚了。 典型的这套系统的架构:错误日志(前端、后端) => 传输(HTTP)=>错误跟踪平台(收集、展示、分析、告警)。 本文不讨论哪款软件来解决这个问题,只讲Sentry这个轮子,SASS版本和私有部署版体验几乎一致 本文主要讲了 应用错误需要监控的场景案例 Sentry有哪些功能 Sentry如何在k8s中私有化部署 本文由 www.iamle.com 流水理鱼 原创,wx公众号搜索 流水理鱼 或 liushuiliyu SEO 关键字 Sentry私有化部署 Sentry helm部署 Sentry kubernets部署 k8s部署 1. 需要应用错误监控的场景案例 多年的老web项目需要https适配,因为老项目大量写死了http://所以文件修改数巨大,即便测试很仔细也不能保证完全没问题 运营发现落地页转化异常了,有访问没表单提交,找到技术,技术发现是某个JS报错,导致表单无法提交,造成推广费用的损失 上线了一个功能,由于环境差异

vue.js面试题整理

风流意气都作罢 提交于 2020-04-21 23:00:13
Vue.js面试题整理 一、什么是 MVVM ? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象(桥梁)。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别?它和其它框架( jquery )的区别是什么?哪些场景适合? mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验