在Vue的webpack中结合runder函数

1.引入:

<h1>下面是vue的内容:</h1>

<div id="app">
<login></login>
</div>

2.main.js

//默认无法打包vue文件 需安装vue-loader
import Vue from 'vue'
import login from './login.vue' var vm = new Vue({
el:"#app",
data:{
msg:'123'
},
// components:{
// 'login':login
// },
render:function (createElement) { //在webpack中如果需要vue放到页面中展示 vm实例中的render函数可以实现
return createElement(login)
} })

3.拉取相关的loader

npm i vue-loader vue-template-compiler -D

4.在webpack.config.js中加入

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

module.exports = {

    devtool: "sourcemap",

    entry: './js/entry.js', // 入口文件

    output: {

        filename: 'bundle.js' // 打包出来的wenjian

    },

    plugins: [

        // make sure to include the plugin for the magic

        new VueLoaderPlugin()

    ],

    module : {

    ...

}

}

在Vue的webpack中结合runder函数的更多相关文章

  1. VUE生命周期中的钩子函数及父子组件的执行顺序

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  2. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

  3. vue项目webpack中Npm传递参数配置不同域名接口

    项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是 ...

  4. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  5. 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

    当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...

  6. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  7. vue2.0基础知识,及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

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

    1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...

  9. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

随机推荐

  1. java 解析txt/html文件

    package util.read; import java.io.BufferedReader;import java.io.FileReader; public class ReadFromFil ...

  2. HDU 2136 Largest prime factor (素数打表。。。)

    题意:给你一个数,让你求它的最大因子在素数表的位置. 析:看起来挺简单的题,可是我却WA了一晚上,后来终于明白了,这个第一层循环不是到平方根, 这个题和判断素数不一样,只要明白了这一点,就很简单了. ...

  3. 如何将word中的图片和文字导入自己的博客中

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  4. PRId64的正确用法

    #include <inttypes.h> #include <stdint.h> #include <stdio.h> // g++ -g -o x x.cpp ...

  5. 保留注释换行的python模块configparser

    python语言用来解析配置文件的模块是ConfigParser,python3中是configparser模块,我在使用中发现write方法在将配置项重新写入文 件时,配置文件中的空行和注释行都会被 ...

  6. [Openwrt 项目开发笔记]:MySQL配置(六)

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在本人的项目中,运行在路由器上的服务器采用Ngi ...

  7. Debezium for PostgreSQL to Kafka

    In this article, we discuss the necessity of segregate data model for read and write and use event s ...

  8. Sql语句在SqlServer中创建数据库、表格并添加约束

    通过Sql语句来创建数据库与架构 创建数据库 数据库的创建首先是要引用主数据库的,需要在master数据库的环境下进行创建.大致的语法如下: -- 使用master数据库 use master -- ...

  9. Asp.net MVC Linq to SQL Model verification

    Models public class Student { public int Id { get; set; } [Required(ErrorMessage = "姓名不能为空!&quo ...

  10. MyCat - 背景篇(1)

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. SQL与NoSQL 目前,对于互联网海量数据的存储以及处理,按使用场景,分为OLTP(联机事务处理,比如即时 ...