发表于： 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,就可以了。
返回列表
评论