vue-cli 第三方相關

安裝Vue環境

1. 全局安裝vue-cli腳手架

    cnpm install -g vue-cli

2 選擇一個文件夾，初始化vue項目

    vue init webpack 英文項目名

3 安裝相關依賴，進入項目目錄執行

    cnpm install

4 運行

    npm run dev

---

異步處理 vue-axios

1 安裝

    npm install --save axios vue-axios

2 在main.js中添加以下代碼

    import Vue from 'vue'
    import axios from 'axios'
    import VueAxios from 'vue-axios'

    Vue.axios({
        method: 'get',
        url: url,
    }).then(res => {
        console.log(res.data);
    })

---

跨域請求配置

1 設置config/index.js

    dev: {
      env: require('./dev.env'),
      port: 8080,
      autoOpenBrowser: true,
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      //跨域
      proxyTable: {
          //請求路徑以api開頭的，轉發到 target地址去請求
          '/api': {
              target: 'https://api.douban.com/',
              changeOrigin: true,
              //將路徑中的/api 替換成 /
              pathRewrite: {
                '^/api': '/'
              }
            }
      }
  }

2 在組件中請求豆瓣數據實例

    getData() {
        //api開頭的都會由代理服務器轉發到 http3://api.douban.com的域名去請求，由於在config/index.js中已經配置了
        let url = '/api/v2/movie/in_theaters';
        Vue.axios({
            method: 'get',
            url: url,
            //豆瓣的數據獲取接口須要傳遞header，而且Content-Type不能指定爲json，不然請求不到數據
            headers: {
                'Content-Type': 'application/text'
            }
        }).then(res => {
            console.log(res.data);
        })
    }

---

ElementUi

1、安裝 node>6.0

    npm i element-ui -S

2、main.js中引入

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

3、引入element的相應模塊，直接使用

---

vue-router 前端路由

1 安裝

    cnpm install vue-router -D

2 在 main.js中引入

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

3 定義路由 main.js

    const routes = [
        {
            path:'/',
            component:Todos
        },
        {
            path:'/todo/:id',
            component:Todo
        }
    ];

    const router = new VueRouter({routes})

4 將定義好的路由規則，放入根組件 app中

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