在webpack中配置vue.js
在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的更多相关文章
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
- webpack 中导入 vue 和普通网页使用 vue 的区别（四）
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- 011 webpack中使用vue
一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...
- 在静态页面中使用 Vue.js
在静态页面中使用 Vue.js 不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. 1. 创建index.html index.html做为 ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- 使用VS2017开发APP中使用VUE.js开发遇到打包出来的android文件 在低版本的android（4.3）中无法正常使用
使用VS2017开发VUE的APP应用遇到的问题集合 1, 打包出来的apk文件在Android 6.0版本以上手机可以正常打开,在Android 4.3版本手机上无法打开 原因:一开始猜测是不是V ...
- WebStorm中配置node.js（Windows）
WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...
- Vue学习之webpack中使用vue(十七）
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
- webpack中配置eslint
首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...
随机推荐
- shell中$(( ))、$( )与${ }的区别
转载自:http://blog.sina.com.cn/s/blog_4da051a60102uwda.html 命令替换 在bash中,$( )与` `(反引号)都是用来作命令替换的. 命令替换与变 ...
- ＃ing＃我的日常知识管理160421
1. 知识来源:浏览是无时无刻的,知识爆炸的时代,信息在互联网上不再难以获得,却变得难以选择,取得有效的信息成了如今获取知识的重要环节…… 前端关注—— alloyteam.github.io 腾讯 ...
- Java性能调优：利用JFR生成性能日志
Java性能调优作为大型分布式系统提供高性能服务的必修课,其重要性不言而喻. 好的分析工具能起到事半功倍的效果,利用分析利器JMC.JFR,可以实现性能问题的准确定位. 本文主要阐述如何利用JFR生成 ...
- hdu 5001 从任意点出发任意走d步不经过某点概率
http://acm.hdu.edu.cn/showproblem.php?pid=5001 给定n个点m条边的无向图问从任意点出发任意走d步,从不经过某个点的概率 本想先算路过每个点的概率然后用1减 ...
- SQL Server Extended Events 进阶 1：从SQL Trace 到Extended Events
http://www.sqlservercentral.com/articles/Stairway+Series/134869/ SQL server 2008 中引入了Extended Events ...
- LinqToHubble介绍及简单使用步骤——LinqToHubble是对HubbleDotnet的封装
或许你还你知道HubbleDotnet,下面简单对HubbleDotnet坐下介绍. HubbleDotNet是由盘古分词作者——eaglet 开发的一个基于.net framework 的开源免费的 ...
- ES6 学习笔记之四 对象的扩展
ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...
- NET 下载共享文件
执行 public static void Run() { "); if (state) { // 共享文件夹的目录 TransportRemoteToLocal(@"\\192. ...
- Struts2乱码问题的解决办法
乱码问题的起因在于数据在web系统的各个层中间传递的时候编码不同,比如页面使用GB18030而中间层使用UTF-8.由于struts2默认使用的就是UTF-8编码,所以在页面如果使用的是其他的编码格式 ...
- jquery 中选择当前标签下众多相同子标签中的第n个
可以用jquery选择器的:eq选择器或者jquery遍历的eq()方法,下面带那给出ul下第4个li的内容 $("ul li:eq(3)") // 元素的index位置工0开始 ...