Vue实战记录

记录,科技 2017-12-27 3 条评论 访问: 4,874 次

安装好nodejs和npm
sudo npm install express vue-cli -g
express cgi-server
vue init webpack my-project
使用vue作为前端框架,不必再手动操作dom。做到前后端分离,架构模式是通过后端的express服务器提供cgi,前端vue渲染数据。
开发环境打通
解决跨域问题。

首先在express里面写一个数据接口,比如/api/test,返回一个json对象{test: "ok"}。express服务器端口为3000
设置vue项目下面的config/index.js的proxyTable

proxyTable: {
  // proxy all requests starting with /api to port 3000
  '/api': {
    target: 'http://localhost:3000/api',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

HelloWorld.vue文件下的<template>里面创建一个按钮,<script>里面添加方法,进行ajax请求

<template>
  <div class="hello">
    <button @click="test">ajax</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      test: function () {
        this.$http.get('/api/test')
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>

main.js里设置axios库,进行ajax操作

import axios from 'axios'
Vue.prototype.$http = axios

然后node bin/www启动express服务器,端口3000

npm run dev启动vue项目的开发版,端口8080


除非注明,嗯VIEW文章均为原创,转载请以链接形式标明本文地址
本文地址:https://www.umview.com/vue

本文由 Mark 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

3 条评论

  1. 朱绪博客
    朱绪博客

    愿你被世界温柔以待,实在不行,我做你的世界。

  2. 菜鸟头头
    菜鸟头头

    我也正准备去勒戒下vue.js

    1. Mark
      Mark

      再也不用手动操作dom

添加新评论