发表于: 2020-07-30 22:35:08

0 2321


今天完成的事情:今天写了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,就可以了。


返回列表 返回列表
评论

    分享到