vue 安装

一、vue 安装
转：https://segmentfault.com/a/1190000008922234
1、按上面教程安装
2、修改npm 安装目录 npm config set prefix “D:\nodeweb”

二、Element 安装
转：https://blog.youkuaiyun.com/zhanghuiqi205/article/details/79619317
1、下载 element npm i element-ui -S
2、在main.js中引入js和css

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

三、新增页面 hello 页面
1、路由增加 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
        path: '/hello',
        name: 'Hello',
        component: Hello,
    }
  ]
})

2、componnts 增加 hello.vue
可复制 helloworld.vue

四、与服务端进行数据交互
1、cnpm install vue-resource 安装 vue-resource
2、在main.js 引入
import VueResource from ‘vue-resource’
Vue.use(VueResource);
Vue.http.options.root = ‘http://*****’;

<template>
    <div class="hello">
  <el-button style="margin-top: 12px;" @click="login">下一步</el-button>
    </div>
</template>

 <script>
 export default {
        name: 'Hello',
        data () {
            return {
          
             }
        },
        methods:{
            login:function(){
                this.$http.get('special/productlist'
                    ,{
                    })
                    .then(
                        response => {
                            console.log(response.data);
                        }
                        ,response =>{
                            this.message = '用户名或密码错误';
                        }
                    );
            }
        }
       </script>