在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 ...
随机推荐
- UVa 11294 Wedding (TwoSat)
题意:有 n-1 对夫妻参加一个婚宴,所有人都坐在一个长长的餐桌左侧或者右侧,新郎和新娘面做面坐在桌子的两侧.由于新娘的头饰很复杂,她无法看到和她坐在同一侧餐桌的人,只能看到对面餐桌的人.任意一对夫妻 ...
- 二）spring 集成 ehcache jgroups 集群
依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-co ...
- 4) Maven 安装
# ----------------------------------------------------------------------------# Maven2 Start Up Batc ...
- HDU1078 FatMouse and Cheese（DFS+DP） 2016-07-24 14:05 70人阅读 评论(0) 收藏
FatMouse and Cheese Problem Description FatMouse has stored some cheese in a city. The city can be c ...
- hdu 5011 Nim+拿完分堆
http://acm.hdu.edu.cn/showproblem.php?pid=5011 有N堆珠子,两个人轮流拿,最少拿一个,可以全拿,每次只能从一个堆里拿,不能从多堆同时拿:拿完之后该人还有一 ...
- 关于单例的DCL方式分析
public class Singleton { /** * 单例对象实例 */ private volatile static Singleton instance = null; public s ...
- svn服务器快速搭建及简单配置
http://www.360doc.com/content/11/0711/19/5131531_132950891.shtml 简介Svn已经不容质疑的成为了一款流行的代码控制工具,但是你是否还在为 ...
- Python学习-2.安装IDE
Python安装包中已经包含了一个IDE了,叫IDLE,可以在Python的安装目录内找到路径为 ./Lib/idlelib/idle.bat 或者可以在开始菜单中找到. 但是这个IDE功能很弱,缺少 ...
- 项目笔记---事半功倍之GhostDoc(二)
前言 前一篇文章<项目笔记---事半功倍之StyleCop(一)>提到如何约束代码,规范代码风格,这一节,我们将了解如何快速生成符合规则的代码注释---GhostDoc 一.安装Ghost ...
- LeetCode149:Max Points on a Line
题目: Given n points on a 2D plane, find the maximum number of points that lie on the same straight li ...