2019-04-09
1.搭建vue项目
2. 页面构成及视图等
3. 如何引入jquery
2019-04-10
4.引入ant-designUI
5.路由按需加载
6.Eslint检查
2019-04-11
7.v-for遍历一个div
2019-04-15
8.多级路由的写法
9.列表详情页带参数跳转
…待整理
2019-04-26
10.获取下拉列表数据,调用后台接口
2019-04-28
11.ajax-get请求验证表单唯一性
12.表单中label的写法&&去掉modal页脚
2019-05-05
13.父子组件之间传值
2019-05-07
14.省市区三级联动
2019-05-15
15.proxyTable配置接口代理
2019-05-16
16.ant Table自定义表格数据格式
17.提交数据$ajax 报415 Unsupported Media Type
2019-06-14
18.vue-cli 如何引入自定义组件
19.WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor
以下是回答 ↓↓
环境搭建node-淘宝镜像-webpack-vue-cli- vue -V
页面的每一个组件都是如下结构
导航的链接方式,使用router-link
首页
子组件显示视图
(1)npm install jquery --save-dev
(2)在webpack.base.conf.js文件中引入以下
var webpack=require('webpack');
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
(3)在具体的页面中引入
import $ from 'jquery'
$(function(){
$('.a').click(function(){
alert('JQ引入测试');
});
});
引入ant-design(参考:https://vue.ant.design/docs/vue/getting-started-cn/)
npm i --save ant-design-vue
可以考虑UI组件按需加载,也可以引入整个css
(1)UI组件按需加载
在main.js中引入
import { Button } from 'ant-design-vue';
Vue.use(Button);
(2)全局加载UI样式
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
如果发现有时引入的样式显示异常,那可能就是全局的样式影响到了,检查一下当前页面style scoped之类即可
**推荐路径自动补全插件
Path Intellisense
export default new Router({
routes : [
{
path:'/',name:'index',component:resolve => require(['../components/index.vue'],resolve),
children:[
{
path:'/user',name:'user',component:resolve => require(['../components/user.vue'],resolve),
}
]
}
]
})
遍历div用到v-for循环时,出现了Eslint检查,必须使用v-bind绑定key值,可在设置中关闭检查
setting中将vetur.validation.template 改为false
{{i.name}}
如果遇到其中有某UI自身属性要设置时,则需要将属性变为绑定值、
具体语法是在其前面加:冒号
hello
//此处的title绑定下面的属性时,要用v-bind指令,js表达式
data:{
title:"this is the title"
}
简写为:hello
应用:
在写路由时,多级路由可不加/
{
path:'/list',name:'list',component:resolve => require(['../components/list.vue'],resolve),
children:[
{
path:'list_news',name:'list_news',component:resolve => require(['../components/list_news.vue'],resolve),
},
{
path:'list_activity',name:'list_activity',component:resolve => require(['../components/list_activity.vue'],resolve),
}
]
}
具体的点击router-link时要写路径
活动列表
{{item.title}}
methods: {
routerTo(id, text, title) {
this.$router.push({
name: `list_activity_detail`,
params: {
id: id,
content: text,
title: title
}
});
}
}
//用于给输入框添加反馈图标
//表示多选
{{n.nation}}
//绑定数据源,value属性绑定
const nation = [];
export default {
data () {
return {
nation,
twoColumnFormItemLayout: {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
},
},
mounted () {
//查询民族
this.$ajax.get('http://..../queryNation').then( res => {
this.nation = res.data;
})
}
}
电话号码
validateTelephone(rule,value,callback){
this.$ajax.get('http://..../CheckTelephone',{params:{ telephone:value} }).then( res => {
console.log(res.data);
if(res.data.data == 1){
callback('您输入的电话号码已存在!');
return
}
else{
callback();
}
})
},
(1) 用户名
(2)
去掉modal页脚
prop向下传递,事件向上传递
即父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息
-login.vue
data:function(){
return {
username:"",
age:""
}
},
methods: {
formSubmit:function(e){
this.$emit("formValue",this.username,this.age);
e.preventDefault(); //阻止默认事件
}
}
-App.vue
//绑定事件
-App.vue
data:function(){
return{
info:""
}
},
-login.vue
{{info}}
props:[
"info"
]
使用ant-design所提供的 a-cascader
引入全国省市区的js文件
文件需做以下修改
const = “...”
export default address;
在所需要的页面上引入时
在使用vue-cli构建的项目中
目录:config>index.js
proxyTable: {
'/apis': {
target: 'http://******:8082', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/apis': '' //路径重写
}
},
'/api': {
target: 'http://*******:8081', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/api': '' //路径重写
}
},
},
(1)实现序号列自增
(2)使用自带moment组件时,需要转换时间格式显示
//需要引入moment
import moment from 'moment';
const timeFormat= (val) => {
return val ? moment(val).format('YYYY-MM-DD'):''
}
const columns = [
{
title: '序号',
customRender:(text,record,index)=>`${index+1}`,
},
{
title: '活动开始时间',
dataIndex: 'activitystarttime',
key: 'activitystarttime',
customRender:timeFormat,
}, {
title: '活动结束时间',
dataIndex: 'activityendtime',
key: 'activityendtime',
customRender:formatterTime,
}, {
title: '操作',
key: 'operation',
scopedSlots: { customRender: 'operation' },
}];
**这里使用的是customRender属性,不知道为什么看到网上好多都给的是render属性,压根不生效啊=
415-Unsupported Media Type 不被支持的媒体类型
这里描述的是后台所接收的类型为json格式,而穷前台使用form直接提交时,格式为x-www-form-urlencoded格式
此时就需要先把数据转成json格式,再修改请求头即可。
handleSubmit (e) {
e.preventDefault();
this.form.validateFields((err, values) => {
values = JSON.stringify(values); //转为json
if (!err) {
this.$ajax.post('/apis/...',values ,{
emulateJSON:true,
headers: {
'Content-Type': 'application/json;charset=UTF-8' //修改headers
}
}).then( res => {
console.log("提交成功");
})
}
});
},
隔了好久的一更~~~哈哈哈
写了几个月的vue,发现一直都是在用单页面$route跳转,竟然没用过组件,哎哈哈
自定义一个组件
header.vue
这是你自己写的一个header,组件复用
这是你要把组件引入的地方(import/组件定义/components引入)
home.vue
引入vuex
npm install vuex --save
引起该问题的原因就是在创建实例时 写成了小写 new Vuex.store (错误写法),应该Store为大写
//新建store文件夹>新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex);
//创建vuex实例,此处Store一定要为大写
const store = new Vuex.Store({
state:{
count:1
}
})
//导出store
export default store
然后就可以直接在页面中引入了
{{this.$store.state.count}}