JE神社的搭建过程中遇到的,学到的一些东西,都很琐碎,但是毕竟是自己的第一个整站项目,所以还是做些记录吧
设备像素比
根据不同的像素比要准备不同分辨率的图片
mock数据
写路由
var appData = require('../book.json'); //require获取路径下的json文件
var book = appData.books;//json下的数据
var count = appData.count;
var apiRoutes = express.Router();//建立路由
apiRoutes.get('/book', function(req, res) {
res.json({
errno: 0,
data: book
});
});
apiRoutes.get('count', function(req, res) {
res.json({
errno: 0,
data: count
});
});
app.use('/api', apiRoutes);
针对不同分辨率优化css
@media (-webkit-min-device-pixel-ratio:1.5),(device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio:2),(device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
通过媒体查询dpr来对元素进行缩放,从而形成视觉统一.
引入第三方css/js
webpack里设置css解析,组件中import
更优解:css放入static文件夹
<style scoped>
@import '../../static/main.css';
</style>
vue-router
别忘了在index.html里写
new Vue({
router, // router这个名字不能改
store
}).$mount('#app')