在webpack中配置vue.js

这里有两种在webpack中配置vue.js的方法,如下:

1.在main.js中引入vue的包:

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>Title</title>

    <style>

    </style>

    <!--注意不推荐在这里引入任何包和css文件-->

    <!--由于es6语法浏览器不识别 会报错-->

    <!--<script src="../dist/bundle.js"></script>-->

    <!--<script src="/bundle.js"></script>-->

</head>

<body>

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

<div id="app">

    <p>{{msg}}</p>

</div>

</body>

</html>

main.js:

//在webpack中使用vue

//注意在webpack中 使用 import Vue from  'vue' 导入的vue不完整

import Vue from  '../node_modules/vue/dist/vue.js'

var vm = new Vue({

    el:"#app",

    data:{

        msg:'123'

    }

})

2.在main.js中引入vue的包使用优雅的import Vue from 'vue'方式导入

main.js:

//在webpack中使用vue

//注意在webpack中 使用 import Vue from  'vue' 导入的vue不完整

import Vue from  'vue'

var vm = new Vue({

    el:"#app",

    data:{

        msg:'123'

    }

})

这里需要修改下相应的webpack.config.js

webpack.config.js:

module:{

    resolve: {

        alias:{//设置vue被导入时候的包的路径

            "vue$":"vue/dist/vue.js"

        }

    }

}

在webpack中配置vue.js的更多相关文章

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

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

  2. webpack 中导入 vue 和普通网页使用 vue 的区别（四）

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  3. 011 webpack中使用vue

    一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...

  4. 在静态页面中使用 Vue.js

    在静态页面中使用 Vue.js 不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. 1. 创建index.html index.html做为 ...

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

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

  6. 使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android（4.3）中无法正常使用

    使用VS2017开发VUE的APP应用遇到的问题集合 1,  打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是V ...

  7. WebStorm中配置node.js（Windows）

    WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...

  8. Vue学习之webpack中使用vue(十七）

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...

  9. webpack中配置eslint

    首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...

随机推荐

  1. 20155211 2016-2017-2 《Java程序设计》第七周学习总结

    20155211 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 第十二章 Lambda Lambda表达式中this的参考对象以及toString()的接受 ...

  2. Linux 系统中进程5中常见状态

    运行.中断.不可终端.僵死.停止 R(运行):正在运行 or 在运行队列中等待: S(中断):处于休眠中,等待接收信号,并脱离改状态: D(不可中断):不响应信号输入,即使kill也不起作用: Z(僵 ...

  3. Boost库安装理解

    Boost安装的安装,以及在VS2013下的使用 1. 为什么要安装? boost是一个开源库,因为开源库可以跨平台,可以通过在不同的“硬件”平台上.所以需要安装的操作. 安装,然后编译生成“静态链接 ...

  4. Eclipse的bug，SunTlsRsaPremasterSecret KeyGenerator not available

    这个bug出现在安装完java后,不设置环境变量,直接打开eclipse 以后只要用到SSL相关(即RSA密钥加密相关)的代码,都会报这个错误,该方法在lib\ext的sunjce_provider. ...

  5. 项目笔记---WPF之Metro风格UI

    写在前面 作为新年开篇的文章,当然要选择比较“Cool”的东西来分享,这自然落到了WPF身上,WPF技术自身可塑性非常强,其强大的绘图技术以及XAML技术比WinForm而言有本质的飞跃. 切入正题, ...

  6. net_framework-EF CodeFirst

    CodeFirst——手动创建POCO类(Plain Old CLR Object,即平时认识的ado.net实体类),类之间的关系使用代码定义.当应用程序首次执行时,EF将在数据库服务器中自动生成数 ...

  7. eclipse的使用和断点调试

    断点: 快捷键 f5: step into f6: step over 跳过,跳到下一行 f7:step return 从某个方法里跳回 跳出 drop to frame: 跳到当前方法的第一行 re ...

  8. InnoDB之锁机制

    前两天听了姜老大关于InnoDB中锁的相关培训,刚好也在看这方面的知识,就顺便利用时间把这部分知识做个整理,方便自己理解.主要分为下面几个部分 1. InnoDB同步机制 InnoDB存储引擎有两种同 ...

  9. PhoneGap原理

    http://www.oschina.net/question/213217_46380

  10. fastadmin的页面是如何生成的？

    第一步: 访问URL http://www.fastadmin.cc/admin/mydir/test/index?addtabs=1 对应的方法是admin模块,controller文件夹下的myd ...