1.建立專案

1.1初始化專案

會自動建立專案檔案

其中webpack-simple是模板，另外一個常用的是webpack

vue init webpack-simple demo

1.2安裝package.json裡面的所有依賴模組

cnpm install

1.3專案下，命令列輸入

npm run dev

可以看到demo頁面

2.模組安裝和使用

2.1vue-router模組化

-S表示 生產環境的需要，--save  寫入dependencies

-D 開發需要 --save-d 寫入devDependencies

cnpm install vue-router -S
 

①編輯main.js首先引入vue-router

import引入module裡面的內容，直接加在引號裡

載入元件，要使用'./目錄'

import VueRouter from 'vue-router'

②使用vue-router的全域性方法

Vue.use(VueRouter)

③在src目錄下建立components檔案，裡面建立元件Home和News元件，只需要寫template部分進行展示

④在src目錄下建立配路由router.config.js

import Home from './components/Home.vue'
import News from './components/News.vue'
export default{
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/news',
      component:News
    }
  ]
}
 

⑤編輯App.vue 

這部分是用來展示看見的內容

<keep-alive>是Vue的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM。

 <h3>
      <router-link to="/home">主頁</router-link>
      <router-link to="/news">新聞</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
 

⑥繼續編輯main.js路由註冊

import routerConfig from './router.config.js'

import Vue from 'vue'
import VueRouter from 'vue-router'  /*後面的名字固定*/
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'

/*使用vue-router,要使用vue-router全域性方法*/
Vue.use(VueRouter);
/*axios好的辦法應該是全域性引入後，使用Vue.use('axios'),然後在每個元件中都可以使用*/
Vue.prototype.$http=axios;  /*習慣叫$http*/
//建立路由例項
const router=new VueRouter(routerConfig);
new Vue({
  el: '#app',
  render: h => h(App),
  /*注入路由*/
  router
});

⑦npm run dev可以看到效果

⑧獲取路由引數$route更進一步，可以檢視vue路由變化的值，可以在例項掛載的時候輸出this.$route  也可以偵聽這個值的變化

  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function (newValue,oldValue) {
      console.log("新的路由是："+oldValue.path)
    }
  }

2.2axios的模組化

①安裝

cnpm install axios -S

axios不是一個成熟的外掛，不能使用Vue.use來使用

②使用的兩種方式

方式1：在每個元件中引入axios,每個元件都要引用

引用的位置是元件裡的scripts部分的開頭

import axios from 'axios'

然後就是普通的，在模板template裡面，用按鈕點選事件

<button @click="send">click</button>

 methods:{
    send:function () {
      axios.get('https://api.github.com/users/tangyang8942')
        .then(resp=>{
          console.log(resp.data);
        }).catch(err=>{
        console.log(err);
      });
    }
  }

方式2：全域性引入axios,在main.js,在使用Vue的全域性方法新增axios,其實就是在vue的原型上加一個方法

不能使用Vue.use使用全域性，這是axios需要改進的地方

首先全域性引入

然後在Vue的原型上新增方法，等於是加個一個全域性的方法

Vue.prototype.axios=Axios;

所以使用的時候要用this.axios

 methods:{
    send:function () {
      this.axios.get('https://api.github.com/users/tangyang8942')
        .then(resp=>{
          console.log(resp.data);
        }).catch(err=>{
        console.log(err);
      });
    }
  }

一般都會寫成Vue.prototype.$http=axios;

使用的時候就是this.$http

2.3為自定義元件新增事件

①自定義一個button元件，myButton

②在需要的元件中的script裡面匯入，比如App.vue

③在的components裡面註冊，即在App.vue 下的scripts部分

④然後在<template>裡面展示

即會把元件展示出來

⑤繫結方法的時候，一把思路是是直接繫結方法@click='send',但經過測試並不能用，預設繫結不了

方法：加個修飾符.native  @click.native='send'