安装nodejs

• 官网：https://nodejs.org/en/download/
• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack

• cnpm install webpack -g

安装vue-cli

• 安装：cnpm install --global vue-cli
• 升级到3.0：cnpm i -g @vue/cli

创建elementUI工程

https://element.eleme.cn/#/zh-CN/component/quickstart

1. vue create my-app
2. cd my-app
3. vue add element

完整引入element

在main.js中写入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue-router的配置

1. router.js文件的配置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: [
        //配置 根路由，还可以使用redirect
        {path: '/',redirect:'/home'},
        // 配置 首页 路由
        {path: '/home',name: 'home', component: () => import('./views/Home.vue')},
        //配置 关于我们 路由
        {path: '/about',/* name: 'about', */ component: () => import('./views/About.vue')}
    ]
})

2. 路由的使用
   在template标签中加入

    <router-link to="home">首页</router-link>
    <router-link to="/about">关于我们</router-link>
   

3. 我把路由出口配置在了App.vue中

component组件的使用

1. 在components文件夹下面，新增写组件的vue文件
2. 在使用的时候引入import TopNav from '@/components/TopNav.vue'
   这里的@是/src的写法
3. 在export default中注册组件components: {TopNav}
4. 在template标签中放入组件的标签<TopNav></TopNav>

vue-axios基本用法

https://www.cnblogs.com/silent007/p/8603367.html

1. 安装vue-axios：npm install vue-axios --save
2. 安装qs.js：npm install qs.js --save 能把json格式的直接转成data所需的格式（还没用到）
3. 引入

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'

Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs           //全局注册，使用方法为:this.qs

4. 开始使用

<script>
    export default{
        data(){
            return{
                userId:666,
                token:'',
            }
        },
        created(){
            this.$axios({
                method:'post',
                url:'api',
                data:this.qs.stringify({    //这里是发送给后台的数据
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //这里使用了ES6的语法
                this.token=response;
                console.log(response)       //请求成功返回的数据
            }).catch((error) =>{
                console.log(error)       //请求失败返回的数据
            })
        }
    }
</script>

v-for的使用

https://www.cnblogs.com/wangyfax/p/10073159.html

用到的方法：

<tr v-for="(book,index) in bookNames" :key=book.bid>
     <td> {{ index + "-" +book.bid + "-" + book.bookname }} </td>
</tr>