超好看,拿来即用的后端开发框架
https://github.com/PanJiaChen/vue-element-admin
https://panjiachen.github.io/vue-element-admin/#/table/tree-table
http://webapplayers.com/inspinia_admin-v2.8/dashboard_5.html
手机登陆模板界面
https://colorlib.com/wp/html5-and-css3-login-forms/
mint-ui 实例
https://github.com/Panda-Hope/vue-qqmusic
https://github.com/ssshooter/img-vuer 图片展示
http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/home 图片上传
http://www.17sucai.com/pins/22602.html html5手机上传多张图片
欢迎加群学习:
860416262
1、下拉选择框
<el-form-item label="权限状态" prop="reMark">
<el-select v-model="form.status" clearable placeholder="请选择">
<el-option value="1" label="操作方法"></el-option>
<el-option value="2" label="地址"></el-option>
</el-select>
</el-form-item>
2、:model和v-model的区别
:model是v-bind:model的缩写
3、Element表单验证
http://www.cnblogs.com/lantuoxie/p/9305353.html
4、校验
levelType: [
{ required: true, message: '必填', trigger: 'blur'},
{type:'number',message: '必须是数字',trigger: 'change'}
],
5、element 数字验证
<el-form-item
label="年龄"
prop="age"
:rules="[
{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'} //如果有trigger: 'blur',需要去掉。
]">
<el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
</el-form-item>
6、post 请求
this.axios({
method: 'post',
url: '/admin/config/createOrUpdateAdminAction',
data: this.form
}).then(response => {//以后必须按照这种写法function (response)这种局限性太大
alert('chengong!');
// ref.resetFields();
this.$refs[formName].resetFields();
})
注:如果用function (response) 的写法,运行this.$refs[formName].resetFields();就会报错说:refs 未定义
第二次踩坑:refs 未定义是因为this不是指向Vue这个实例了,
chooseImage() {
let that = this //注意这里的写法
that.images.serverId = [];//清空serverid集合
wx.chooseImage({
count: 9, // 默认9
sizeType: ['compressed'], // 压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) { //没用=>导致的一直获取不到this的实例,那是因为使用函数之后,this的实例改变了
$('.wxChooseImages ').remove();
var localIds = res.localIds;
if (localIds != "") {
for (var i = 0; i < localIds.length; i++) {
var imgDivStr = '<div class="bankPage wxChooseImages multiselect"><img src="' + localIds[i] + '" class="pageImg" /></div>';
$(".chooseImage").before(imgDivStr);
}
}
// debugger;
that.images.localId = res.localIds;
that.uploadImage(res.localIds); 没有使用=》导致一直说函数未定义
}
});
},
7、element 树结构从后端获取数据渲染(我这里手动写多一层数据)
treeData: [{
id: 0,
name: '顶级分类',
adminActions:[],
}],
defaultProps: {
children: 'adminActions',
label: 'name'
}
//获取权限列表
getPermission(){
this.axios({
method: 'get',
url: '/admin/config/getAdminActoinGroupByParentId',
}).then(response => {
this.treeData[0].adminActions = response.data.content;
})
},
8、报错
但是当你新建一个vue项目时,需要重新安装stylus,否则报错:
This dependency was not found:
* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue
解决方法:
npm install stylus-loader css-loader style-loader --save-dev
npm install sass-loader node-sass --save(自己测试到这里就行了,其他大佬还说在试下下面那个)
npm install vue-style-loader --save-dev
9、console.log(typeof this.form.mobile);打印变量类型
10、如果使用的是别人的代码,发现布局不完美,但是又发现不了是哪个div出现问题,这时候就只能在附近的div中一个一个点击,看看是哪一个div出现问题了。
11、当然有一些就是基础知识的问题了:
display: flex;
justify-content: space-around;
由于看不懂导致出现的问题
12、vue修改样式不成功的问题<!-- Add "scoped" attribute to limit CSS to this component only -->
答:英语差的原因
<style scoped>style样式中加了scoped就限制了单前样式只会在这个组件中生效,而不会覆盖其他的css样式,英语不好,怪自己咯,说明在上面,自己都不看,-。-
13、vue是可以直接使用80 端口的,除非被占用,才会在运行的时候使用81端口,而vue 的dev不能被外网映射,但是微信网页授权却能获取到code
14、微信浏览器可以使用 debugx5.qq.com 开启vconsole 控制器查看调试信息
总结:一直郁闷为什么手机的浏览器一直不能发送axios请求,原来是我请求的地址出错了,才回导致这个问题,使用了控制台查看报错一下就解决问题了。
注意:微信的这个控制台还有点小bug,我还卸载了微信重装才好的。估计是我哪里设置不好导致的。用vue的热部署,更新代码之后不要刷新页面,控制台就不会被关闭,可以实时的查看请求
15、前后端分离的请求后端接口,千万不要使用localhost,否则,在手机端调试的时候,等哭吧
16、在vue的method中的function方法中,是可以使用jquery的ajax的
//从微信服务器保存到七牛云服务器
uploadToQiniu(staffid, serverIds) {
$.ajax({
type: "post",
url: "/admin/weixinToken/wechatJsSDKUploadToQiniu",
dataType: "json",
async: false,
data: {
staffId: staffid,
mediaIds: serverIds,
sessionid: "sadas",
type: $("#CredentialsEnum_OLDUS").val()
},
success: function (data) {
},
error: function (xhr, status, error) {
}
});
},