vue根据response_Vue基础环境搭建笔记

node和npm安装配置

查看 node 版本
node -v
查看 npm 版本
npm -v

安装vue-cli并初始化vue项目

1全局安装vue-cli

npm install -g vue-cli

-g 表示全局安装

2初始化vue项目

vue init webpack vue-demo（项目名称）

3安装配置elementUI

npm i element-ui -S

配置方式一(完整引入)

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

vuex安装配置

根目录运行

npm install vuex -S

配置

在src/main.js配置vuex

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

axios安装配置

根目录运行

npm install axios -S

配置

在src/main.js配置 axios

导入 axios 并在　new Vue()中配置

import axios from '../node_modules/axios'

Vue.prototype.$axios = axios;
new Vue({
  el: '#app',
  router,
  store,
  axios,
  components: { App },
  template: '<App/>'
})

简单使用

.then 里是后台返回结果
 .catch 里是网络错误或后台服务器出bug等等


get方式
this.$axios.get('/user', {
      数据
  })
  .then(function (response) {
  })
  .catch(function (error) {
  });

post方式
this.$axios.post('/user' , {
  params: {
    数据对象(此处根据情况)
  }
})
  .then(function (response) {
  })
  .catch(function (error) {
  });

vue 中配置跨域访问后台

proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:18080', // 后台访问地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

配置后可直接在npm run dev 时直接访问后台地址

前缀比真实后台是多了个 /api ,就是

this.$axios.post('/api/login/login', user)
	.then(function (response) {
	})
	.catch(function (error) {
	});