npm install babel-polyfill --save-dev

main.js

// 放在最顶部

import 'babel-polyfill'

build/webpack.base.conf.js

module.exports = {

entry: {

app: ['babel-polyfill', './src/main.js']

}

}

4. 缓存

新版本发布之后(cnpm run build)，浏览器访问还是看到上个版本的内容

解决办法1

把服务器的文件全部删除，再上传，而不是直接覆盖

解决办法2

build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath('js/[name].[hash].js'),

chunkFilename: utils.assetsPath('js/[id].[hash].js')

},

})

5. 手机同步热更新

1. 跟电脑连同个WI-FI，查看自己本机的IP地址，打开命令行，输入ipconfig

1. 
   
2. config/index.js

1. 
   
2. 手机打开浏览器访问http://192.168.1.132:8080就可以了

6. 出现资源引用错误的解决方案

build/index.js，将'/'修改为'./'

7. 出history模式下刷新当前路由出现404的问题

需要后端进行配合,参考https://router.vuejs.org/zh/guide/essentials/history-mode.html

8. 封装自己的组件脚本

可以在组件中以this.$xxx的方式调用，而不需要引入改Js脚本

dialog.js

const dialog = (function () {

let show = function () {}

let hide = function () {}

return {

show,

hide

}

})()

export default dialog

main.js

import dialog from 'dialog.js'

Vue.prototype.$dialog = dialog

组件

this.$dialog.show()

9. 路由懒加载

解决首次加载速度慢的问题

router.js

let index = resolve => require(['@/components/index'], resolve)

routes: [

{

path: '/index',

component: index

}

]

10. 动态添加状态

组件

// 正确做法

this.$set(this, phone, '')

// 错误做法，会导致该状态无法实现双向绑定

this.data.phone = ''

11. 如何使用scss

1. 安装依赖
2. npm install sass-loader node-sass --save-dev
3. 组件中