Vue开发学习笔记
Vue开发学习笔记
使用工具与插件: vscode+VueCli3.0+element ui+axios
1.学习部分
快速入门（导航）：
组件部分目录显示有问题，附单文件组件：
vue单文件组件编写应用
数据传递部分数据的定义可以看这篇文章：
Eslint报错解决合集
element-ui自定义表格头部的两种方法
这里只推荐第二种方法
官方文档：
1.vue.js（vuelcli官网为英文，故用vue.js教程）
补充一些：
2.遇到问题与解决方法
问题1.使用element ui表单验证有的可以正常运行，有的显示表单 form undefined
原因：有的表单提交按钮不在form中
解决办法：用el-form-item标签包裹el-button放在el-form中
总结:element UI 表单验证要点：
1.表单要有ref属性（供下方验证时使用）,rules属性指定验证规则
2.submit方法中表单名字要用单引号包裹
3.数据部分定义rules（验证规则）
4.需要验证的元素要有prop元素（放在el-form-item标签中，与rules中验证规则名字对应）
5.表单操作按钮要在表单中
问题2.axios请求拦截器问题
问题3：dev模式下可用图片打包完之后路径错误
原因：在使用本地图片的时候dev模式下显示正常的图片打包完之后请求的图片路径变为绝对路径，请求路径错误
解决方法：修改build文件夹中webpack配置
1.引用本地图片有问题
修改build文件夹中webpack.prod.conf.js文件
output: {
//增加这行
publicPath:'./',
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
2.element ui图标显示不正常
修改build文件夹中utils.js文件
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
//增加这行
publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
总结：webpackage打包需要自己配置基地址
问题参考文章：
