慕课网vue教程“饿了么” 数据请求,在vue-cli3 怎么写
哇我真的纠结了好久查了好多资料,话不多说上代码,
主要牵扯到webpack的 devServe配置
主要是原来是在webpack.dev.conf.js的devServer
现在是在根目录下修改vue.config.js
的devServer
module.exports = {
devServer: {
before (app) {
var appData = require('./data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})
})
// app is the express instance that the dev server uses
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
})
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}
}
}
谁知道怎么改一下这个eslint对缩进的要求吗?
一点疑问,这个是不是可以用axios做阿
不是很懂区别
相关资料网址:
vue-cli3.0官方文档
我在vue官方论坛的提问
webpack-devServer官方文档
vue2.x写法1
vue2.x写法2
vue2.x写法3
文档结构
我自己新建了一些文件夹
参见我写的这篇
router-link代替a标签
https://router.vuejs.org/zh-c...
开始页的最下面有这样一句话:
当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active,
所以你只需要在自己的STYLE文件中,写了.router-link-active的样式,列表选中后,系统就会自动去绑定这个样式
https://router.vuejs.org/zh-c...
active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
其实这个也是为了方便导航栏切换状态的,设置这个属性就可以让链接在激活时自动切换相应的样式。
本例中,在app.vue
中
<template>
<div>
<v-header/>
<div class="tab">
<div class="tab-item">
<router-link to="/goods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<router-view></router-view>
</div>
</template>
<script>
import vHeader from "@/components/header/vHeader.vue";
export default {
components: {
vHeader
}
};
</script>
<style lang="stylus">
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
.tab-item
flex: 1
text-align: center
& > a
display:block
font-size: 14px
color: rgb(77, 85, 93)
&.active
color: rgb(240, 20, 20)
</style>
其中需在router.js
中加入类似:
let router =new Router({
linkActiveClass: 'active'
});
麻烦看过觉得Ok的给个赞或者收藏,sf老是报我文章不通过审核烦死了都不想写了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。