Vue插件基础使用

vue-resource 实现 get,post,jsonp请求（现在已停止维护，推荐使用axios）

https://github.com/pagekit/vue-resource

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求.

vue-resource 的配置步骤：

• 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；

• 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件。

• Vue.http.options.root = '根域名'

  • 如果通过全局配置了请求的数据接口 根域名，则在每次单独发起http请求的时候，请求的url路径，相应以相对路径开头，前面不能带/，否则不会启用根路径做拼接。

    Vue.http.options.root = 'http://vue.studyid.io/';
    Vue.http.options.emulateJSON = true;
    this.$http.get('api/getlunbo').then();
    

• Vue.http.options.emulateJSON = 'true'

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getInfo: function () {
                this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
                    console.log(result.body);
                });
            },
            postInfo: function () {
                // 手动发动的 post请求， 默认没有表单格式，所以有些服务器处理不了
                // 通过 post 方法的第三个参数，设置提交内容的类型为普通表单数据类型
                this.$http.post('http://vue.studyit.io/api/post', {}, {emulateJSON: true}).then(function (result) {
                    console.log(result.body);
                });
            },
            jsonpInfo: function () {
                this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(function (result) {
                    console.log(result.body);
                });
            }
        }
    });
</script>

在webpack中使用vue

在webpack中配置.vue组件页面的解析

1. 运行npm i vue -S将vue安装为运行依赖；
2. 运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
3. 运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
4. 在webpack.config.js中，添加如下module规则：

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader']},
      { test: /\.vue$/, use: 'vue-loader' }
    ]
}

5. 创建App.vue组件页面：

<template>
    <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->
    <div>
        <h1>这是APP组件 - {{msg}}</h1>
        <h3>我是h3</h3>
    </div>
</template>
<script>
    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
    export default {
        data() {
            return { msg: 'OK' }
        }
    }
</script>
<style scoped>
    h1 { color: red; }
</style>

6. 创建main.js入口文件：

// 在webpack中使用Vue
// 注意：在webpack中，使用import Vue from 'vue' 导入的Vue 构造函数，功能不完整，只提供了runtime-only 的方式，并没有提供像网页中那样的使用方式
// 第一种方式
// import Vue from '../node_modules/vue/dist/vue.js';
// 创建组件与网页一样
// resolve: {
// // 设置vue被导入时候的包的路径
//    alias: {
//        'vue$': 'vue/dist/vue.js'
//    }
// }

// 第二种方式 需要在webpack.config.js配置
import Vue from 'vue';
// 创建组件需要创建vue文件
// 1.导入app组件
import login from './app.vue';
// 2.通过render函数渲染到页面
var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    // components: {
    //     'app': app
    // },
    render: function (createElements) {
        return createElements(app);
    }
});

在vue文件中使用script需要export default

在ES6中，也通过规范的形式，规定了ES6如何导入和导出模块：

• 导入模块：import 模块名称 from '模块标识符';
• 暴露（导出）成员：export default和export

注意：

1. **export default**向外暴露的成员，可以使用任意的变量来接收。
2. 在一个模块中，export default只允许向外暴露一次。
3. 在一个模块中，可以同时使用export default和export暴露成员。
4. 使用 export 向外暴露的成员，只能使用 {} 的形式来接收，这种形式叫做按需导出。
5. export 可以向外暴露多个成员，导出不一定要接收，但接受名与导出名必须一致，如果需要换个名称接收，可以使用 as 取别名。

例： app.vue

<script>
	export defalut {
		name: 'aa',
		age: 20
	}
    export var title = '小星星';
</script>

main.js

import app, {title as t} from './app.vue';
console.log(app);
console.log(t);

vue中css的作用域问题

1. 在vue文件的<style>默认的样式是全局的，即同名时会影响其他组件。
2. 若在标签内添加 <style scoped> ，样式会换为私有，但也会影响子组件。推荐都加上。
3. 普通的 <style> 标签只支持普通的样式，如果想要启用sass或less，需要添加 lang 属性。（lang="sass"）;

在vue组件页面中，集成vue-router路由模块

1. 安装vue-router： npm i vue-router -D

2. 导入路由模块：

   import VueRouter from 'vue-router';
   

3. 安装路由模块：

   Vue.use(VueRouter);
   

4. 路由配置与普通网页一样，但 router-view 和 router-linlk 不要直接写到el控制原始中，会被覆盖，推荐写到组件vue文件中。

   import app from './app.vue';
   import login from './login.vue';
   var router = new VueRouter({
     routes: [
       { path: '/', redirect: '/login' },
     ]
   });
   var vm = new Vue({
     el: '#app',
     render: function (createElements) {
           return createElements(app);
     },
     router
   });
   

   app.vue

   <template>
    	<router-link to="/login">登录</router-link>
       <router-view></router-view>
   </template>
   

抽离路由

另建一个js文件，存放在js入口文件中的路由相关代码和导入，通过 export defalut 暴露路由对象，在js入口文件中 import 即可。