发表于: 2020-07-30 22:35:08
0 2318
今天完成的事情:今天写了vue的一些简单的小技巧
明天计划的事情:继续后续的学习
遇到的问题:实际操作不多还是需要更多的练习
收获:
一、 js适配经验:
我们在写代码的时候,很有可能写到这种代码:
[1,2,3,4,5].includes(1)
或者是使用promise
等es6的方法,但是我们的需求是在Android4.4上面完美运行。这样就会出现includes is not undefied
等错误提示。如果看了我之前谈到webpack的文章就会疑问:我们之前不是用了babel
插件用来转成es5了呢?我当时也疑问了好久,直到我在webpack里面找到一个插件,具体的使用方法:
import "babel-polyfill"
import es6Promise from 'es6-promise'
es6Promise.polyfill()
require('es6-promise').polyfill()
// webpack配置文件处
entry: {
app: ['babel-polyfill', './src/main.js']
},
自定义目录
在写代码的时候,很多时候都存在这种情况 :
import component1 from "../../../../component"
import component2 from "../../../../../component"
这种代码是新手很可能出现的,如果一旦出现一个层级目录出问题了,或者是文件的位置被转移过了就会出问题。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: ['babel-polyfill', './src/main.js']
},
output: {},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components'),
'pages': resolve('src/pages')
}
},
module: {
},
node: {
},
plugins: [],
}
在resolve->alias里面可以配置绝对相对路径,在使用的时候
import component1 from "pages/component"
import component2 from "pages/component"
路由懒加载
我看官方文档里面定义路由的时候都有两步:
import Vue from 'vue'
import Router from 'vue-router'
import xxx from 'xxx'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
component: xxx,
}
]
做大型项目的时候 很可能定义很多很多个路由,那样页面就会写的特别多。此时懒加载就会解决这个问题
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
component: () => import("xxx")
}
]
})
样式污染和样式覆盖的问题
在我们新建vue的时候,经常会看到scoped
<style scoped>
</style>
如果我们去掉scoped
的时候会发现,在本vue项目内定义的css属性会影响到其他vue页面的css属性。这个就很坑了。所以,我们在使用的时候一定要用scoped
<style scoped>
.custom-dialog
.el-dialog__header
padding 0
.el-dialog__body
padding 0
</style>
如果此时我们加上scoped
标签的话,我们发现并没有效果,发现去掉scoped
才会起作用。
mock、mock
很多情况下,后台还没有搭建完成之前。可能前端没办法进行数据的接入。这种情况可能是一个大问题,这样会严重拖慢项目开发,此时就需要mock
首先在webpack.dev.conf.js里面配置express,别问我为什么要在dev里面配置
const express = require('express')
const app = express()
const appData = require('../static/data/user.json')
const apiRouter = express.Router()
app.use('/api',apiRouter)
然后将接口通过devServer
发布出去:
before(app) {
app.get('/api/user',(req, res) => {
res.json({
data: appData
})
})
}
使用的时候就直接打开http://localhost:8080/api/user,就可以了。
评论