Skip to content

D
dashboard
Commit ef37de3e authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

定义stylus变量配置

parent c4ee3ed0
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 37 deletions
.babelrc
View file @ ef37de3e
...@@ -9,5 +9,12 @@ ...@@ -9,5 +9,12 @@
}], }],
"stage-2" "stage-2"
], ],
"plugins": ["transform-vue-jsx", "transform-runtime"] "plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "view-design",
"libraryDirectory": "src/components"
}]
]
} }
build/utils.js
View file @ ef37de3e
...@@ -54,6 +54,19 @@ exports.cssLoaders = function (options) { ...@@ -54,6 +54,19 @@ exports.cssLoaders = function (options) {
} }
} }
/**
* 下面的stylus配置便于可全局使用stylus定义的变量
*/
const stylusOptions = {
import: [
path.join(__dirname, '../src/assets/css/variables.styl')
],
path: [
path.join(__dirname, '../src/assets'),
path.join(__dirname, '../')
]
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html // https://vue-loader.vuejs.org/en/configurations/extract-css.html
return { return {
css: generateLoaders(), css: generateLoaders(),
...@@ -61,8 +74,8 @@ exports.cssLoaders = function (options) { ...@@ -61,8 +74,8 @@ exports.cssLoaders = function (options) {
less: generateLoaders('less'), less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }), sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'), scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'), stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus') styl: generateLoaders('stylus', stylusOptions)
} }
} }
......
build/webpack.base.conf.js
View file @ ef37de3e
...@@ -74,6 +74,14 @@ module.exports = { ...@@ -74,6 +74,14 @@ module.exports = {
limit: 10000, limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
} }
},
{
test: /\.styl(us)?$/,
use: [
'vue-style-loader',
'css-loader',
'stylus-loader'
]
} }
] ]
}, },
......
package-lock.json
View file @ ef37de3e
...@@ -60,6 +60,34 @@ ...@@ -60,6 +60,34 @@
"@babel/types": "7.0.0-beta.44" "@babel/types": "7.0.0-beta.44"
} }
}, },
"@babel/helper-module-imports": {
"version": "7.7.0",
"resolved": "https://registry.npm.taobao.org/@babel/helper-module-imports/download/@babel/helper-module-imports-7.7.0.tgz",
"integrity": "sha1-mcCViJRm5fe21m2Y3/xYuq9CZU0=",
"dev": true,
"requires": {
"@babel/types": "^7.7.0"
},
"dependencies": {
"@babel/types": {
"version": "7.7.1",
"resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.7.1.tgz?cache=0&sync_timestamp=1572962723042&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.7.1.tgz",
"integrity": "sha1-iwjqNo8rr/I2YTUSz2cQnnYoWCc=",
"dev": true,
"requires": {
"esutils": "^2.0.2",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0"
}
},
"to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/to-fast-properties/download/to-fast-properties-2.0.0.tgz",
"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
"dev": true
}
}
},
"@babel/helper-split-export-declaration": { "@babel/helper-split-export-declaration": {
"version": "7.0.0-beta.44", "version": "7.0.0-beta.44",
"resolved": "https://registry.npm.taobao.org/@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.0.0-beta.44.tgz?cache=0&sync_timestamp=1572951228921&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-split-export-declaration%2Fdownload%2F%40babel%2Fhelper-split-export-declaration-7.0.0-beta.44.tgz", "resolved": "https://registry.npm.taobao.org/@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.0.0-beta.44.tgz?cache=0&sync_timestamp=1572951228921&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-split-export-declaration%2Fdownload%2F%40babel%2Fhelper-split-export-declaration-7.0.0-beta.44.tgz",
...@@ -80,6 +108,23 @@ ...@@ -80,6 +108,23 @@
"js-tokens": "^3.0.0" "js-tokens": "^3.0.0"
} }
}, },
"@babel/runtime": {
"version": "7.7.1",
"resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.7.1.tgz?cache=0&sync_timestamp=1572961675709&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.7.1.tgz",
"integrity": "sha1-siNJe7+8u7OBFmc5BN68cUcMpSg=",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.2"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.13.3",
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.3.tgz",
"integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U=",
"dev": true
}
}
},
"@babel/template": { "@babel/template": {
"version": "7.0.0-beta.44", "version": "7.0.0-beta.44",
"resolved": "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.0.0-beta.44.tgz", "resolved": "https://registry.npm.taobao.org/@babel/template/download/@babel/template-7.0.0-beta.44.tgz",
...@@ -446,6 +491,11 @@ ...@@ -446,6 +491,11 @@
"integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=", "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
"dev": true "dev": true
}, },
"async-validator": {
"version": "1.12.2",
"resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.12.2.tgz?cache=0&sync_timestamp=1572855103502&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.12.2.tgz",
"integrity": "sha1-vq5nHnF00pOLe0tp0vt+cit/1yw="
},
"atob": { "atob": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz", "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
...@@ -780,6 +830,16 @@ ...@@ -780,6 +830,16 @@
"babel-runtime": "^6.22.0" "babel-runtime": "^6.22.0"
} }
}, },
"babel-plugin-import": {
"version": "1.12.2",
"resolved": "https://registry.npm.taobao.org/babel-plugin-import/download/babel-plugin-import-1.12.2.tgz?cache=0&sync_timestamp=1569211766587&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-plugin-import%2Fdownload%2Fbabel-plugin-import-1.12.2.tgz",
"integrity": "sha1-u44R2rrmj7/0SEyOK8LbHghihqg=",
"dev": true,
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/runtime": "^7.0.0"
}
},
"babel-plugin-syntax-async-functions": { "babel-plugin-syntax-async-functions": {
"version": "6.13.0", "version": "6.13.0",
"resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz", "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-async-functions/download/babel-plugin-syntax-async-functions-6.13.0.tgz",
...@@ -1416,6 +1476,11 @@ ...@@ -1416,6 +1476,11 @@
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
"dev": true "dev": true
}, },
"batch-processor": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/batch-processor/download/batch-processor-1.0.0.tgz",
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
},
"bfj-node4": { "bfj-node4": {
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npm.taobao.org/bfj-node4/download/bfj-node4-5.3.1.tgz", "resolved": "https://registry.npm.taobao.org/bfj-node4/download/bfj-node4-5.3.1.tgz",
...@@ -2362,6 +2427,18 @@ ...@@ -2362,6 +2427,18 @@
"randomfill": "^1.0.3" "randomfill": "^1.0.3"
} }
}, },
"css": {
"version": "2.2.4",
"resolved": "https://registry.npm.taobao.org/css/download/css-2.2.4.tgz",
"integrity": "sha1-xkZ1XHOXHyu6amAeLPL9cbEpiSk=",
"dev": true,
"requires": {
"inherits": "^2.0.3",
"source-map": "^0.6.1",
"source-map-resolve": "^0.5.2",
"urix": "^0.1.0"
}
},
"css-color-names": { "css-color-names": {
"version": "0.0.4", "version": "0.0.4",
"resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz", "resolved": "https://registry.npm.taobao.org/css-color-names/download/css-color-names-0.0.4.tgz",
...@@ -2484,6 +2561,15 @@ ...@@ -2484,6 +2561,15 @@
} }
} }
}, },
"css-parse": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/css-parse/download/css-parse-2.0.0.tgz",
"integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
"dev": true,
"requires": {
"css": "^2.0.0"
}
},
"css-select": { "css-select": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/css-select/download/css-select-1.2.0.tgz", "resolved": "https://registry.npm.taobao.org/css-select/download/css-select-1.2.0.tgz",
...@@ -3289,6 +3375,11 @@ ...@@ -3289,6 +3375,11 @@
"integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
"dev": true "dev": true
}, },
"deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-2.2.1.tgz",
"integrity": "sha1-XT/yKgHAD2RUBaL7wX0HeKGAEXA="
},
"define-properties": { "define-properties": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz", "resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
...@@ -3590,6 +3681,14 @@ ...@@ -3590,6 +3681,14 @@
"integrity": "sha1-SbR9lh+BQxFhdML3D7/uOqv0MBU=", "integrity": "sha1-SbR9lh+BQxFhdML3D7/uOqv0MBU=",
"dev": true "dev": true
}, },
"element-resize-detector": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/element-resize-detector/download/element-resize-detector-1.2.0.tgz",
"integrity": "sha1-YzRP1vTl7P9vAY0Cfheygf1Pozg=",
"requires": {
"batch-processor": "1.0.0"
}
},
"elliptic": { "elliptic": {
"version": "6.5.1", "version": "6.5.1",
"resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.1.tgz", "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.1.tgz",
...@@ -6112,6 +6211,11 @@ ...@@ -6112,6 +6211,11 @@
"integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=", "integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
"dev": true "dev": true
}, },
"js-calendar": {
"version": "1.2.3",
"resolved": "https://registry.npm.taobao.org/js-calendar/download/js-calendar-1.2.3.tgz",
"integrity": "sha1-pYOwZEtOaVujlPNE0QPbzHp6fT4="
},
"js-tokens": { "js-tokens": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz", "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-3.0.2.tgz",
...@@ -6356,12 +6460,23 @@ ...@@ -6356,12 +6460,23 @@
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
"dev": true "dev": true
}, },
"lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz",
"integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
"dev": true
},
"lodash.memoize": { "lodash.memoize": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz", "resolved": "https://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true "dev": true
}, },
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"lodash.uniq": { "lodash.uniq": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz", "resolved": "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz",
...@@ -7477,6 +7592,11 @@ ...@@ -7477,6 +7592,11 @@
"integrity": "sha1-KYuJ34uTsCIdv0Ia0rGx6iP8Z3c=", "integrity": "sha1-KYuJ34uTsCIdv0Ia0rGx6iP8Z3c=",
"dev": true "dev": true
}, },
"popper.js": {
"version": "1.16.0",
"resolved": "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.0.tgz",
"integrity": "sha1-LhgWvLuqUY6mwuFaRm9Mucbi+7M="
},
"portfinder": { "portfinder": {
"version": "1.0.25", "version": "1.0.25",
"resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.25.tgz", "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.25.tgz",
...@@ -11259,6 +11379,56 @@ ...@@ -11259,6 +11379,56 @@
} }
} }
}, },
"stylus": {
"version": "0.54.7",
"resolved": "https://registry.npm.taobao.org/stylus/download/stylus-0.54.7.tgz?cache=0&sync_timestamp=1566387923919&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstylus%2Fdownload%2Fstylus-0.54.7.tgz",
"integrity": "sha1-xs5Hk5Ze5Ti86+UPMVN7/ATYjNI=",
"dev": true,
"requires": {
"css-parse": "~2.0.0",
"debug": "~3.1.0",
"glob": "^7.1.3",
"mkdirp": "~0.5.x",
"safer-buffer": "^2.1.2",
"sax": "~1.2.4",
"semver": "^6.0.0",
"source-map": "^0.7.3"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"dev": true,
"requires": {
"ms": "2.0.0"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1565627380363&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true
},
"source-map": {
"version": "0.7.3",
"resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.7.3.tgz",
"integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
"dev": true
}
}
},
"stylus-loader": {
"version": "3.0.2",
"resolved": "https://registry.npm.taobao.org/stylus-loader/download/stylus-loader-3.0.2.tgz",
"integrity": "sha1-J6cGQgsFo44DjnyssVNXjUUFE8Y=",
"dev": true,
"requires": {
"loader-utils": "^1.0.2",
"lodash.clonedeep": "^4.5.0",
"when": "~3.6.x"
}
},
"supports-color": { "supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz", "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
...@@ -11352,6 +11522,11 @@ ...@@ -11352,6 +11522,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true "dev": true
}, },
"tinycolor2": {
"version": "1.4.1",
"resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz",
"integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
},
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz", "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
...@@ -11794,6 +11969,11 @@ ...@@ -11794,6 +11969,11 @@
"integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=", "integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=",
"dev": true "dev": true
}, },
"v-click-outside-x": {
"version": "3.7.1",
"resolved": "https://registry.npm.taobao.org/v-click-outside-x/download/v-click-outside-x-3.7.1.tgz",
"integrity": "sha1-qgPqoOQeRMtSB9z4bC2fDdZAhME="
},
"validate-npm-package-license": { "validate-npm-package-license": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz", "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
...@@ -11816,6 +11996,21 @@ ...@@ -11816,6 +11996,21 @@
"integrity": "sha1-pkZ3gavTZiF8BQ+CAuflDMnu+MA=", "integrity": "sha1-pkZ3gavTZiF8BQ+CAuflDMnu+MA=",
"dev": true "dev": true
}, },
"view-design": {
"version": "4.0.2",
"resolved": "https://registry.npm.taobao.org/view-design/download/view-design-4.0.2.tgz",
"integrity": "sha1-mDRQ+0/QpWZC3BPrx+WFwKrmT8g=",
"requires": {
"async-validator": "^1.10.0",
"deepmerge": "^2.2.1",
"element-resize-detector": "^1.2.0",
"js-calendar": "^1.2.3",
"lodash.throttle": "^4.1.1",
"popper.js": "^1.14.6",
"tinycolor2": "^1.4.1",
"v-click-outside-x": "^3.7.1"
}
},
"vm-browserify": { "vm-browserify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870776965&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz", "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870776965&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz",
...@@ -12401,6 +12596,12 @@ ...@@ -12401,6 +12596,12 @@
"integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=", "integrity": "sha1-XS/yKXcAPsaHpLhwc9+7rBRszyk=",
"dev": true "dev": true
}, },
"when": {
"version": "3.6.4",
"resolved": "https://registry.npm.taobao.org/when/download/when-3.6.4.tgz",
"integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=",
"dev": true
},
"whet.extend": { "whet.extend": {
"version": "0.9.9", "version": "0.9.9",
"resolved": "https://registry.npm.taobao.org/whet.extend/download/whet.extend-0.9.9.tgz", "resolved": "https://registry.npm.taobao.org/whet.extend/download/whet.extend-0.9.9.tgz",
......
package.json
View file @ ef37de3e
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"countup.js": "^2.0.4", "countup.js": "^2.0.4",
"echarts": "^4.4.0", "echarts": "^4.4.0",
"view-design": "^4.0.2",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-countup-v2": "^4.0.0", "vue-countup-v2": "^4.0.0",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
...@@ -24,6 +25,7 @@ ...@@ -24,6 +25,7 @@
"babel-eslint": "^8.2.1", "babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1", "babel-loader": "^7.1.1",
"babel-plugin-import": "^1.12.2",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
...@@ -50,6 +52,8 @@ ...@@ -50,6 +52,8 @@
"rimraf": "^2.6.0", "rimraf": "^2.6.0",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.6", "shelljs": "^0.7.6",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^1.1.1", "uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8", "url-loader": "^0.5.8",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
......
src/App.vue
View file @ ef37de3e
...@@ -10,27 +10,25 @@ export default { ...@@ -10,27 +10,25 @@ export default {
} }
</script> </script>
<style> <style lang="stylus">
@font-face { @import './assets/css/variables.styl'
font-family: DIN;
src: url(./assets/font/DIN-Medium.otf); @font-face
} font-family DIN
@font-face { src url(./assets/font/DIN-Medium.otf)
font-family: Microsoft YaHei UI; @font-face
src: url(./assets/font/Microsoft-YaHei-UI-Bold.ttf); font-family Microsoft YaHei UI
} src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf)
html, body { html, body
width: 100%; width 100%
height: 100%; height 100%
user-select: none; user-select none
} #app
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif; */ /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
font-family: DIN, Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif; font-family DIN, Microsoft YaHei UI, 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased; -webkit-font-smoothing antialiased
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing grayscale
width: 100%; width 100%
height: 100%; height 100%
color: #2c3e50; color $fontColor
}
</style> </style>
src/components/HelloWorld.vue
View file @ ef37de3e
...@@ -95,19 +95,20 @@ export default { ...@@ -95,19 +95,20 @@ export default {
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style lang="stylus" scoped>
h1, h2 { $red = gold
font-weight: normal; h1, h2
} font-weight normal
ul { color $red
list-style-type: none; ul
padding: 0; list-style-type none
} padding 0
li { li {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
a { a {
color: #42b983; color: $red;
} }
</style> </style>
src/main.js
View file @ ef37de3e
...@@ -4,8 +4,11 @@ import 'babel-polyfill' ...@@ -4,8 +4,11 @@ import 'babel-polyfill'
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import {Button} from 'view-design'
import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.component('Button', Button)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
......
src/router/index.js
View file @ ef37de3e
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' import Main from '@/views/main'
Vue.use(Router) Vue.use(Router)
...@@ -8,8 +8,8 @@ export default new Router({ ...@@ -8,8 +8,8 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'HelloWorld', name: 'main',
component: HelloWorld component: Main
} }
] ]
}) })
src/views/main.vue 0 → 100644
View file @ ef37de3e
<template>
<div class="main-container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</template>
<script>
export default {
name: 'Main',
}
</script>
<style lang="stylus" scoped>
.main-container
background $fontColor
width 100%
height 100%
display grid
grid-template-areas \
'box1 box1 box1'\
'box2 box3 box4'\
'box5 box3 box4'\
'box6 box6 box6'
grid-template-rows 1fr 3fr 3fr 1fr
grid-gap 10px
padding 10px
.box1
background red
grid-area box1
.box2
background blue
grid-area box2
.box3
background gold
grid-area box3
.box4
background green
grid-area box4
.box5
background gray
grid-area box5
.box6
background #fff
grid-area box6
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment