vue-cli 第三方相关

Posted 2020-09-25

安装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

一、安装 node>6.0

    npm i element-ui -S

二、main.js中引入

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

三、引入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
    })