轻轻松松上手vue、vue-router、axios、express

轻轻松松上手vue、vue-router、axios、express

写在前面

vue是一个很优秀的库，但是你可能只是想在个别页面用到vue，并不是把vue作为技术栈来使用，或者你是一个初学者，想迅速的入门vue，那这篇文章可能是对你有帮助的

本篇文章不打算用webpack、不打算用vue-cli脚手架等工具，只教你如果通过简单的引入对应js文件来使用vue和vue常用组件

本文要实现的效果

用express返回一段数据，用axios请求这段数据，然后用vue渲染出来，用vue-router切换页面

代码解释

首先在用express返回一个食物列表，然后在vue的mounted方法获取到数据，在注册3个组件，用vue-router进行切换，并把获取到的数据传入到home这个组件中去.本文把vue、vue-router、axios、express用最简单的方式结合在一起，大家能搞懂他们的基本用法就好。

demo地址

vue

基础阅读

vue其实没什么好写的，因为都被大家写透了，所以列了几篇文章给大家看一下，有兴趣就跟着练一练。

第一个是vue官网，只需要先看一下它的基础部分，第二个是你可以把它当做是官网的重复，看一遍只当复习了，第三个是几个简单vue小例子，有兴趣就做一做，没兴趣也要至少也要把代码过一遍，当然如果觉得一切都是so easy就不用看啦。

1. vue官网

2. 我从未见过如此简洁易懂的Vue教程

3. vue快速入门的三个小实例

用vue实现一个列表，并增加收藏功能

express

搭建简单的服务器环境

在这里使用express，是为了演示axios的用法，为了足够简单，这里只是用express返回一段数据并把根目录直接设置成静态文件目录即可

const express = require('express')
const app = express()
app.use(express.static(__dirname))
const foodlist = [{ name: '香菇青菜', isSelect: false }, { name: '冬瓜排骨', isSelect: false }, { name: '青椒肉丝', isSelect: false }, { name: '爆炒虾仁', isSelect: false }, { name: '红烧茄子', isSelect: false }]
app.get('/foodlist', function(req, res) {
    res.send(foodlist)
})
app.listen(8000)

http://localhost:8000/index.html 会正常显示index.html

http://localhost:8000/foodlist 会返回foodlist这个数组

axios

用vue中使用axios

通过http://localhost:8000/index.html ,这个时候网页中的数据已经是通过axios请求到服务器数据了

vue-router

资料

1. 为了更好的理解前端路由的存在，你需要看这篇文章：前端：你要懂的单页面应用和多页面应用

2. 这篇文章可以让你快速入门vue-router vue-router 60分钟快速入门

直接看代码

    
    
    
    
    
    



    

        

            主页
            收藏
            我的