使用vue&ant-design搭建项目遇到的问题

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

---

以下是回答 ↓↓

问题1-搭建vue项目

环境搭建node-淘宝镜像-webpack-vue-cli- vue -V

• 在你要创建的位置按住shift+鼠标右键，在此处打开命令窗口，创建项目指令
• vue init webpack project(项目名)
• 运行项目
• npm run dev
• 打开浏览器8080端口

问题2-页面构成及视图等

• App.vue 上主要写页面/系统中固定好的一部分，如导航栏等
• mian.js 上主要写引入的文件，包括引入的UI组件等
• index.js 上是生成的路由，具体的子组件也需要在这里import

页面的每一个组件都是如下结构

<template>
	<div></div>
</template>

导航的链接方式，使用router-link

<router-link to="./index">首页</router-link>

子组件显示视图

<router-view></router-view>

问题3-如何引入jquery

（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）在具体的页面中引入

<p class="a"></p>

import $ from 'jquery'
$(function(){
    $('.a').click(function(){
        alert('JQ引入测试');
    });
});

问题4-引入ant-designUI

引入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

问题5-路由按需加载

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),
        }
      ]
    }
  ]
})

问题6-Eslint检查

遍历div用到v-for循环时，出现了Eslint检查，必须使用v-bind绑定key值，可在设置中关闭检查

setting中将vetur.validation.template 改为false

问题7-v-for遍历一个div

<div v-for="i in arr">
	{{i.name}}
</div>

如果遇到其中有某UI自身属性要设置时，则需要将属性变为绑定值、
具体语法是在其前面加：冒号

<div v-bind:title = "title">hello</div>
//此处的title绑定下面的属性时，要用v-bind指令，js表达式
data:{
    title:"this is the title"
}
简写为：<div :title = "title">hello</div>

应用：
<a-card-meta :title="i.name" :description="i.type">
   <a-avatar
      slot="avatar"
      src="pic1.png"
    />
  </a-card-meta>

问题8-多级路由的写法

在写路由时，多级路由可不加/

 {
    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时要写路径

<router-link  to="/list/list_activity">活动列表</router-link>

问题9-列表详情页带参数跳转

<a-list-item slot="renderItem" slot-scope="item, index" style="padding-left:15px;">
   <a-list-item-meta description="list" >
     <a slot="title" href="#"  @click="routerTo(item.id,item.text,item.title)">{{item.title}}</a>
     <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
   </a-list-item-meta>
 </a-list-item>

  methods: {
    routerTo(id, text, title) {
      this.$router.push({
        name: `list_activity_detail`,
        params: {
          id: id,
          content: text,
          title: title
        }
      });
    }
  }

• 以上方法不妥之处在于一次性将所有数据通过路由传递会影响效率
• 方法一：只传递id，在具体的详情页面通过id去匹配数据再进行渲染（可参考：https://blog.youkuaiyun.com/qq_16844671/article/details/80019823）
• 方法二：仍使用此种方法，可尝试缓存，keepAlive

问题10-获取下拉列表数据，调用后台接口：

<a-form-item
   v-bind="twoColumnFormItemLayout"			//绑定栅格为两列显示
   label="民族"					     		//label名称
   has-feedback>							//用于给输入框添加反馈图标
   <a-select 
  		showSearch							//提供输入检索匹配 
        v-decorator="[						//验证
         'select',
         {rules: [{ required: true, message: '请选择民族！' }]}]" 
         			placeholder="请选择民族！" 
         			mode="multiple">       //表示多选
      <a-select-option v-for="n in nation" >{{n.nation}}</a-select-option>
      //绑定数据源，value属性绑定
   </a-select>
</a-form-item>

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;
	       })
	}
}

问题11-$ajax-get请求验证表单唯一性

<a-form-item v-bind="formItemLayout" style="height:24px;">
    <span slot="label"> 电话号码 </span>
    <a-input v-decorator="[ 
    'telephone',{rules: [
    { required: true, message: '请输入电话号码!', whitespace: true,  },
    {validator: validateTelephone,}
    ]},
    ]" 
    placeholder="请输入电话号码" />
</a-form-item>

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();
       }
   })
},

问题12-表单中label的写法&&去掉modal页脚

（1）<span slot="label"> 用户名 </span>
（2）<a-form-item v-bind="formItemLayout" label="用户名">

去掉modal页脚

<a-modal v-model="visible" title="请填写注册信息" :footer="null" >

问题13-父子组件之间传值

prop向下传递，事件向上传递
即父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息

子组件向父组件传值

-login.vue
<input class="form-control" type="text" v-model="username" placeholder="输入用户名">
<input class="form-control" type="text" v-model="age" placeholder="输入年龄">

 data:function(){
    return {
      username:"",
      age:""
    }
  },
  methods: {
    formSubmit:function(e){
       this.$emit("formValue",this.username,this.age);
       e.preventDefault();		//阻止默认事件
    }
  }
-App.vue
<login v-on:formValue="getValue"></login>		//绑定事件

父组件向子组件传值

-App.vue
data:function(){
   return{
     info:""
   }
 },
-login.vue

{{info}}

props:[
	"info"
]

问题14.省市区三级联动

使用ant-design所提供的 a-cascader

引入全国省市区的js文件
文件需做以下修改

const = “...”
export default address;

在所需要的页面上引入时

 <a-form-item  v-bind="placeLayout"   label="工作地" >
    <a-cascader  :options="address" @change="onChange" 
    :fieldNames="{label:'name',value:'code',children:'children'}"  
    v-decorator="[
       'workplace',
        {
           rules: [{ type: 'array', required: true, message: '请输入工作地!' }],
        }]" placeholder="请选择省/市/区" />
 </a-form-item>

<script>
import address  from '../js/address.js';
computed:{
     address(){
        return address;
     }
  },
</script>

问题15-proxyTable配置接口代理

在使用vue-cli构建的项目中
目录：config>index.js

 proxyTable: {
   		 '/apis': {  
       			target: 'http://******:8082', //源地址
       			changeOrigin: true, //改变源
      			 pathRewrite: {
       			 '^/apis': '' //路径重写
          				}
       			 },
   		 '/api': {  
			    target: 'http://*******:8081', //源地址
			    changeOrigin: true, //改变源
			    pathRewrite: {
			      '^/api': '' //路径重写
			       }
    			 },
 			 },

问题16-ant Table自定义表格数据格式

（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属性，压根不生效啊₌

问题17-提交数据$ajax 报415 Unsupported Media Type

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("提交成功");
                     })
                  }
               });
			 },

问题18.vue-cli 如何引入自定义组件

隔了好久的一更~~~哈哈哈
写了几个月的vue，发现一直都是在用单页面$route跳转，竟然没用过组件，哎哈哈

自定义一个组件
header.vue
<template>
  <div>
   这是你自己写的一个header，组件复用
  </div>
</template>

<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
    }
  }
}
</script>

<style scoped>
</style>

这是你要把组件引入的地方（import/组件定义/components引入）
home.vue
<template>
	<div>
	  	<home-header></home-header>
	</div>
</template>
<script>
import HomeHeader from './header.vue'
export default {
  name: 'Home',
  data () {
    return {
    }
  },
  components:{ HomeHeader }
}
</script>

问题19-WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor

引入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}}