@2x 、@3x 的png小图片，拆分成单个。webpack在编译它们的时候会生成base64，这样一个图片请求都没有。同时也保证不同的dpr下使用相对应的图片。
将svg图片，通过icomoon.io生成iconfont。步骤：左上角
Import Icons--->Generate Font--->Preferences--->Download。使用时只需要将fonts文件夹和样式引入即可。谷歌浏览器插件JSON Viewer可以友好地格式化网页的JSON数据。
mock数据
const sellData = require('../data.json')
const seller = sellData.seller
const goods = sellData.goods
const ratings = sellData.ratings
before(app) {
app.get('/api/seller', function(req, res){
res.json({
errno: 0,
data: seller
})
});
app.get('/api/goods', function(req, res){
res.json({
errno: 0,
data: goods
})
});
app.get('/api/ratings', function(req, res){
res.json({
errno: 0,
data: ratings
})
});
}
修改.eslintrc.js后，需要手动重启项目，才能生效。
在webpack3里，要运行scss文件，只需
npm i -D node-sass sass-loader。编辑vue模板。文件夹下右键 --->
new--->edit file templates。flex经典布局。
.tab{
display: flex;
.tab-item{
flex: 1;
}
}
vue-loader下
postcss插件，搞定css兼容性问题。main.js里
new Vue({
components：{App},
template:'- vue-router
router文件夹里的index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes = [{
path: '/',
redirect: '/goods'
}, {
path: '/goods',
component: goods
}, {
path: '/ratings',
component: ratings
}, {
path: '/seller',
component: seller
}];
export default new Router({
linkActiveClass: 'active',
routes
});
main.js
import router from './router';
new Vue({router})
App.vue
商品
评论
商家
WebStorm快捷键
control+G选中下一个相同的字符串；control+command+G选中所有相同的字符串。设置路径的别名
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': path.resolve(__dirname, '../src'),
'common': path.resolve(__dirname, '../src/common'),
'components': path.resolve(__dirname, '../src/components')
}
}
- 如何用手机测试页面？
step1：保证手机和电脑在同一个局域网。
step2：通过ifconfig查找主机ip。
step3：修改config文件下index.js。
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: '192.168.1.122', // can be overwritten
}
}
step4：npm run dev。
step5：在手机上输入http://192.168.1.122:8080即可在手机上看效果了。
- 实现真正的1px的边框 border
问题
解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px;
解决
利用媒体查询和min-device-pixel-ratio 实现解决办法.
scss代码如下:
@mixin border-bottom-1px($color){
positon: relative;
&:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px solid $color;
content: ' ';
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
- 在用
@import 'common/scss/index.scss';时，要注意样式文件中路径造成的加载错误。
例如：Vue.app。
这样引入会造成路径出错，报错如下。
ERROR Failed to compile with 4 errors 13:37:55
These relative modules were not found:
* ../fonts/sell-icon.eot?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.svg?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.ttf?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
* ../fonts/sell-icon.woff?moblv1 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
我的解决方案是在 index.scss 里面不引入 mixin.scss 。在 main.js 里面 import "common/scss/mixin.scss" ，即可解决。