安裝nodejs

• 官網(wǎng)：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

創(chuàng)建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')},
        //配置 關(guān)于我們 路由
        {path: '/about',/* name: 'about', */ component: () => import('./views/About.vue')}
    ]
})

2. 路由的使用
   在template標(biāo)簽中加入

    <router-link to="home">首頁</router-link>
    <router-link to="/about">關(guān)于我們</router-link>
   

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

component組件的使用

1. 在components文件夾下面具垫，新增寫組件的vue文件
2. 在使用的時候引入import TopNav from '@/components/TopNav.vue'
   這里的@是/src的寫法
3. 在export default中注冊組件components: {TopNav}
4. 在template標(biāo)簽中放入組件的標(biāo)簽<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格式的直接轉(zhuǎn)成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({    //這里是發(fā)送給后臺的數(shù)據(jù)
                      userId:this.userId,
                      token:this.token,
                })
            }).then((response) =>{          //這里使用了ES6的語法
                this.token=response;
                console.log(response)       //請求成功返回的數(shù)據(jù)
            }).catch((error) =>{
                console.log(error)       //請求失敗返回的數(shù)據(jù)
            })
        }
    }
</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>