使用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-26
    8.獲取下拉列表數據，調用後臺接口

---

以下是回答 ↓↓

問題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-獲取下拉列表數據，調用後臺接口：

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