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'
如果发现有时引入的样式显示异常,那可能就是全局的