在webpack构建的项目中使用Vue

一、普通网页中使用Vue（Vue基础学习）

• 使用<script></script>标签引入vue的包
• 页面中创建一个容器（id为app的div）
• 通过new Vue创建Vue的vm实例

二、webpack工程中使用Vue——组件

• npm i vue -S安装Vue的包，入口JS导入vue的包import Vue from 'vue'。

1、使用普通网页使用Vue的方式

• 页面创建容器，定义组件模板对象，new Vue创建Vue实例，components注册组件。
  此时运行会报错，因为导入的是runtime-only的Vue包，不是最全的（普通网页导入的是全的）。
  import Vue from 'vue'和var Vue = require('vue')查找规则一样：找项目根目录node_moudules文件夹，根据引用时的包名查找文件夹vue，在vue文件夹中找到一个 package.json 的包的配置文件，此配置文件中找到main属性（制定了此包在被加载import/require时的入口文件）。
  
  其中，同目录下的 vue.js 才是网页直接导入时的最全的包。
• 可以修改Vue的配置文件 package.json 的 main 属性指向 vue.js 最全文件"main": "dist/vue.js"；或import导入时直接指定vue.js最全文件 import Vue from '../node_modules/vue/dist/vue.js'；或者在 webpack.config.js 配置文件对象中加 resolve属性（优雅一些）。

module.exports = {
    resolve : {
        alias:{   //修改Vue被导入时包的路径
            'vue$':'vue/dist/vue.js'   //导入的包是以vue结尾，则取找此js文件
        }
    }
}

2、直接runtime-only

• 创建 .vue 文件（在src目录创建，和main.js同级，测试用），这是一个纯粹的vue组件。webpack中推荐使用.vue这个模板文件定义组件。分三部分，<template></template>组件的html代码；<script></script>逻辑；<style></style>样式。
• npm i vue-loader vue-template-compiler -D。webpack 无法打包 .vue 文件，则需要安装相关的第三方loader帮助把vue文件解析成JS文件。
• webpack.config.js 配置文件增加匹配规则，vue-loader 15+都是需要伴生 VueLoaderPlugin。

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    plugins:[  
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{  
        rules:[ 
            {
                test:/\.vue$/,   //匹配.vue文件  
                use:'vue-loader'
            }
        ]
    }
}

• main.js 使用 import 引入此vue组件。

import login from './login.vue'

则就得到一个组件的模板对象 login（和直接定义一个模板对象差不多）。

• 如果还是使用components注册组件，然后页面标签引入（传统、vue基础学习形式），还是会报runtime-only的错误。Vue结合webpack使用，想通过vue实例渲染一个组件到页面，只能用render函数实现。

import Vue from 'vue'

import login from './login.vue'

var vm = new Vue({
    el: '#app',
    data: {
        msg: '测试'
    },
    render: c => c(login)
})

三、导入模块和向外暴露成员

• Node.js，向外暴露成员：

module.exports = {}
exports

• Node.js，导入模块（成员）：

const 名称= require('模块标识符');

• ES6，向外暴露成员：

export default   //在一个模块中，只允许向外暴露一次，可以用任意变量接收
export   //可以向外暴露多个成员，只能使用 {} 接收（按需接收，严格按暴露变量名称接收，也可别名）
//这两种可以同时使用

测试：新建一个test.js，向外暴露成员

var info = {
    name: 'qiurx',
    age: '24'
}
export default info
export var title = '标题'
export var content = '呵呵'

• ES6，通过规范形式，导入/导出模块：

import 模块名 from '模块标识符'
import '表示路径'

测试：在main.js用import导入test.js，拿到暴露的对象（导入名称自定）

import test,{ title,content as happy} from './test.js'
console.log(test);   //{name: "qiurx", age: "24"}
console.log(title);   //标题
console.log(happy);   //呵呵

四、.vue文件定义data/methods

<template>
  <div>
    <h1>登陆组件——{{msg}}</h1>
  </div>
</template>


<script>
export default {
  data() {
    //组件中的data指向函数
    return { msg: "123" };
  },
  methods: {
    show() {
      console.log("调用了login.vue的方法");
    }
  }
};
</script>


<style>
</style>

五、使用vue-router

• npm i vue-router -S，安装路由的包。
• 在模块化工程中（webpack等），必须通过Vue.use()明确安装路由功能（script标签不需要）。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

• 创建一个App.vue组件，import导入，render渲染组件。
• 创建两个组件（.vue），import导入并创建路由对象，挂载到vue实例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//导入App组件
import app from './App.vue'
//导入登陆注册组件
import login from './main/login.vue'
import register from './main/register.vue'

//创建路由对象
var router = new VueRouter({
    routes:[
        {
            path:'/login',
            component:login
        },{
            path:'/register',
            component:register
        }
    ]
});
var vm = new Vue({
    el: '#app',
    data: {
        
    },
    render: c => c(app),   //注意：render会把el指定容器全覆盖，el容器内部东西没作用（不写router-view等）
    router   //路由对象挂在到vue实例
})

• 展示组件。通过render渲染的组件会直接清空覆盖此容器，最后展示的就是此组件App.vue，所以要把<router-view></router-view>等写到此组件中。

<template>
  <div>
    <h1>App</h1>
    <router-link to="/login">登陆</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>
<style>
</style>

六、路由嵌套
入口JS（main.js）引入注册组件的子组件，然后增加子路由匹配规则。

//导入注册的子组件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'

//创建路由对象
var router = new VueRouter({ {
        path: '/register',
        component: register,
        children: [{   //路由嵌套
                path: 'idCardReg',
                component: idCardReg
            },
            {
                path: 'phoneReg',
                component: phoneReg
            }
        ]
    }]
});

注册组件需要嵌套其他组件，则需要在注册组件中创建链接。

<template>
  <div>
    <h1>注册组件</h1>
    <router-link to='/register/idCardReg'>身份证</router-link>
    <router-link to='/register/phoneReg'>手机号</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>
<style>
</style>

七、.vue组件样式

• 普通的 style 标签只支持普通的样式，想要使用sass或less，需要增加lang属性为scss/less
• 组件 style 中的样式默认是全局样式，适用于页面所有
• style 标签中增加scoped属性 （作用域），即为此组件的私有样式（包括自己的子组件、内部元素），一般都会加。是vue给元素自定义了属性，设置样式的时候通过属性选择器设置样式。

<template>
  <div>
    <h1>id注册</h1>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
div {
  color: red;
}
</style>

八、抽离路由模块
现在，会发现main.js的入口JS文件代码量会多了，主要路由的量比较大。把导入路由组件和创建路由对象抽离出去。
创建一个 router.js ，导入vue-router包，把导入路由组件、创建路由对象抽离放到这里；然后把路由对象暴露出去。

import VueRouter from 'vue-router'


//导入登陆注册组件
import login from './main/login.vue'
import register from './main/register.vue'
//导入注册的子组件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'

//创建路由对象
var router = new VueRouter({
    routes: [{
        path: '/login',
        component: login
    }, {
        path: '/register',
        component: register,
        children: [{
                path: 'idCardReg',
                component: idCardReg
            },
            {
                path: 'phoneReg',
                component: phoneReg
            }
        ]
    }]
});

export default router   //把路由对象暴露出去

mian.js中再导入此自定义路由模块。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//导入App组件
import app from './App.vue'
//导入 自定义路由模块
import router from './router.js'

var vm = new Vue({
    el: '#app',
    data: {

    },
    render: c => c(app), //注意：render会把el指定容器全覆盖，el容器内部东西没作用（不写router-view等）
    router //路由对象挂在到vue实例
});