webpack结合vue使用步骤如下：

  1. 安装 vue 的包 ： cnpm i vue -S
  2. 由于在 webpack 中，锐减使用 .vue 这个组件模板文件定义组件，所以需要安装能解析这种文件的第三方加载器 loader ： cnpm i vue-loader vue-template-compiler -D
  3. 在 main.js 中导入 vue 模板：import Vue from 'vue'，此导入的是运行时的 vue，非罪全功能的 vue.js
  4. 定义一个 .vue 结尾的组件：login.vue，其中组件有三部分：template，script，style
  5. 使用 import 导入组件：import login from './login.vue'
  6. 创建 Vue 实例： var vm = new Vue({ el:'#app', data:{}, render: c=>c(login)})
  7. 在页面中创建一个 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()

],

webpack结合vue使用（五）的更多相关文章

  1. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  2. webpack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  3. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  4. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  5. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  6. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  7. webpack 与 vue 打包体积优化

    webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...

  8. webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑

    最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...

  9. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

随机推荐

  1. STL之队列的运用

    卡片游戏:非常好地介绍了队列的特点和应用 桌上有一叠牌,从第一张牌開始从上往下依次编号1~n.当至少还剩两张牌时进行例如以下操作:把第一张牌扔掉,然后把新的第一张牌放到整叠牌的最后. 输入n,输出每次 ...

  2. LwIP移植uCos+stm32f407

    LwIP同操作系统一起工作的时候模型如下: 1.TCP/IP协议栈和应用程序以分离的任务运行 2.应用同协议栈沟通是通过API函数调用(API函数调用事实上就是通过OS自带的进程间通信机制,由应用程序 ...

  3. codeforces776E

    传送门 这题看着很唬人,但实际上是道水题... f[n]通过打表或证明,可以发现就是欧拉函数,g[n]恒等于n,所以题目的意思就是让你求n的k次欧拉函数. 可以发现实际上k次欧拉函数,n的数值减小得很 ...

  4. Codeforces Round #379 (Div. 2) D. Anton and Chess —— 基础题

    题目链接:http://codeforces.com/contest/734/problem/D D. Anton and Chess time limit per test 4 seconds me ...

  5. hadoop源码剖析--RawLocalFileSystem

    RawLocalFileSystem是hadoop中实现的本地文件系统,在该类中与文件元数据和目录相关的操作,都是通过适配方式适配到java.io.File的对应API来完成的,适配过程简单,代码清晰 ...

  6. python 文件与文件夹常见操作以及os.walk的用法

    文件操作: In [34]: import os In [35]: os.rename("hello[复件].py","hello111.py")       ...

  7. ​MongoDB复制集相关方法使用（五）

    这里我们把复制集中可用的方法都实验一遍,帮助我们更好地来理解复制集.提前说明这些方法的使用是基于Mongodb3.2版本来的,看这篇文章之前需要先看上一篇文章. 介绍一下复制集可用的相关方法 rs.h ...

  8. Linux终端程序用c语言实现改变输出的字的颜色

    颜色代码: 格式: echo "\033[字背景颜色;字体颜色m字符串\033[0m" 例如: echo "\033[41;36m something here \033 ...

  9. 移植最新版libmemcached到VC++的艰苦历程和经验总结(下)

    结果如何呢?我的VC++测试用例还是不能调用该接口的接口方法,只是这次的报错方式有所改变,提示是每个C/C++程序员最不愿意看到的“内存地址访问违规”,这一次我确实被郁闷了,这是为什么呢? 五.gcc ...

  10. HDU2602(01背包)

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...