webpack结合vue使用（五）

webpack结合vue使用步骤如下：

安装 vue 的包： cnpm i vue -S
由于在 webpack 中，锐减使用 .vue 这个组件模板文件定义组件，所以需要安装能解析这种文件的第三方加载器 loader ： cnpm i vue-loader vue-template-compiler -D
在 main.js 中导入 vue 模板：import Vue from 'vue'，此导入的是运行时的 vue，非罪全功能的 vue.js
定义一个 .vue 结尾的组件：login.vue，其中组件有三部分：template，script，style
使用 import 导入组件：import login from './login.vue'
创建 Vue 实例： var vm = new Vue({ el:'#app', data:{}, render: c=>c(login)})
在页面中创建一个 id 为 App 的 div 元素，作为我们 vm 实例要控制的区域

main.js：

//入口文件//如何在 webpack 构架的项目中，使用 Vue 进行开发//      执行命令 npm i vue -s ,把 vue 包安装成项目运行依赖//在 webpack 中尝试使用 Vue；//注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不全，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方法，实际导入的包是根据包的查找规则导入的import Vue from 'vue'//1:导入 login 组件import login from './login.vue'//默认 webpack 无法打包 .vue 文件，需要安装相关的 loader// cnpm i vue-loader vue-template-compiler -D// 在配置文件中新增 loader 配置项 { test:/\.vue$/, use:'vue-loader'}var vm = new Vue({    el:'#app',    data:{        msg: '123'    },    // components:{    //     login    // }    //function可以用 ‘=>’代替，当函数为一个参数的时候，小括号可以省略，因为参数为为形参，所以可以自定义任何名称为c，方法内只有一行代码，所以大括号可以去掉，内部调用的方法不写return会默认return，所以方法简写成为如下：    render: c => c(login)});

src下面创建 login.vue:

<template>
    <div>
        <h1>这是登录组件，使用 .vue 文件定义出来的</h1>
    </div>
</template>

<script>

</script>

<style>

</style>

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--这时容器-->
    <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>

</body>
</html>

在 webpack.config.js中添加插件：

//由于 vue-loader 版本高于 15 需要安装此插件（这是个坑）

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

plugins: [//配置插件的节点        new vueLoaderPlugin()],

来源：https://www.cnblogs.com/lubolin/p/10939275.html

标签

Webpack

vue

vue-loader