使用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之类即可