npm
npm install
npm run dev
npm run build
npm run build --report
1、安装依赖
全局使用scss
npm install sass-loader node-sass vue-style-loader --save-dev
npm install -g node-sass
全局使用jade
npm install pug pug-loader pug-filters --save-dev
npm install jade jade-loader --save-dev
2、在webpack.base.config.js中
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
},
3、.vue中
<template lang="jade"></template>
<style lang="scss"></style>
@include Bg();
@for $i from 1 through 6 {
> li:nth-child(#{$i}){
@include Bg("sc_" + $i + ".png", rem2px(160), rem2px(35));
background-size: 100%;
}
}
单个:
@extend %flex;
多个:
@extend %flex,%aitems;
- @extend %flex ===> display:flex
- @extend %aitems ===> align-items: center;
- @extend %jcontent ===> justify-content: center;
- @extend %fdr ===> flex-direction: row;
- @extend %fdc ===> flex-direction: column;
- @extend %fr ===> flex-wrap:wrap;
- @extend %faj ===> display:flex; align-items:center; justify-content:center;
{
//表示打开新的无标题文档(仅打开一个空工作区)。
"workbench.startupEditor": "newUntitledFile",
// 以像素为单位控制字号。
"editor.fontSize": 16,
// 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
"editor.mouseWheelZoom": true,
// 控制工作台中的树控件是否支持水平滚动。
"workbench.tree.horizontalScrolling": true,
// 指定工作台中使用的颜色主题。
"workbench.colorTheme": "Default High Contrast",
"prettier.tabWidth": 2,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vsicons.presets.hideFolders": true,
"editor.detectIndentation": true,
"workbench.iconTheme": "vscode-icons",
"javascript.format.insertSpaceAfterCommaDelimiter": false,
"vsicons.projectDetection.disableDetect": true,
"explorer.confirmDelete": false,
"window.zoomLevel": 1,
"vetur.validation.template": false,
"explorer.confirmDragAndDrop": false,
// 指定建议小部件中的代码片段的位置
"editor.snippetSuggestions": "top",
// 控制粘贴上的格式是打开还是关闭
"editor.formatOnPaste": true
//删除所有空行
//ctrl+h 正则 ^\s*(?=\r?$)\n
//删除所有注释
//^[ \t]*//[^\n]*\n
}
- Auto Close Tag
- Auto Rename Tag
- Beautify
- Color Highlight
- Document This
- IntelliSense for CSS class name
- Vetur
- vscode-icons
- Hungry Delete
- JSON.parse(res.data);
- JSON.stringify(res.data);
- 获取键值对数量 localStorage.length
- 读取 localStorage.getItem('name'), localStorage.key(i)
- 添加/修改 localStorage.setItem('name','xuanyuan')
- 删除对应键值 localStorage.removeItem('name')
- 删除所有数据 localStorage.clear()
@/assets/js/utils.js
import {setCookie,getCookie,clearCookie} from '../../assets/js/utils';
setCookie("key","val",time)
getCookie("key")
clearCookie("key")
.list {margin-top: calc(60px / 3 - 5px);}
li:nth-child(3n+2){
margin: 0px 10px;
}
npm install qrcodejs2 --save
import QRCode from "qrcodejs2";
<div id="ios"></div>
qrcode() {
let qrcode2 = new QRCode("ios", {
width: 106,
height: 106, // 高度
text: "https://www.pgyer.com/mjn2" // 二维码内容
});
}
npm i vue-gemini-scrollbar --save
import Vue from 'vue'
import GeminiScrollbar from 'vue-gemini-scrollbar'
Vue.use(GeminiScrollbar)
<GeminiScrollbar class="my-scroll-bar" style="height:100px;width:100px;">
content...
</GeminiScrollbar>
请求拦截器自动加入loading,同时加入config配置项,接口调用不用调取config配置头信息
手动调用
this.$loader.show();
手动关闭
this.$loader.hide();
this.$pop.show({title:'温馨提示',content:'已经到底啦',content1:String(this.seasonId),content2:String(Number(this.seasonId)+1),number:3});