在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 ...
随机推荐
- Android 3D游戏开发
OpenGL ES(OpenGL Embedded System) Android 3D游戏开发技术宝典:OpenGL ES 2.0(android 3d游戏开发技术宝典 -opengl es 2.0 ...
- (转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- c++ 内联函数 （讲解的TM真好）
1. 内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码如下: int max(int a, int b) { return a > b ? a : b; } 为 ...
- PriorityQueue源码分析
PriorityQueue其实是一个优先队列,和先进先出(FIFO)的队列的区别在于,优先队列每次出队的元素都是优先级最高的元素.那么怎么确定哪一个元素的优先级最高呢,jdk中使用堆这么一 ...
- poj 2591 Set Definition
题目 这道题是个水题,写博客上的人好像都不屑于写这这道题.但是我为什么还是觉得挺难的呢? 我也是看了别人的博客才过了的,感觉这种写法很新颖,这样就可以不用在排序了. 下面给出正解: #include& ...
- Ansible配置文件
官方配置文件文档 Ansible安装完成之后默认配置文件为:/etc/asnible/ansible.cfg Ansible配置文件内容: cat ansible.cfg # config file ...
- [转载]HTML5游戏前端开发秘籍
http://isux.tencent.com/html5-game-development-cheats.html 转载至腾讯ISUX HTML5游戏前端开发秘籍 本文由米随随编写 QQ空间Andr ...
- eclipse中java build path下 allow output folders for source folders 无法勾选,该如何解决 eclipse中java build path下 allow output folders for source folders 无法勾选,
在创建maven工程时,在设置output folders时,总是勾选以后,老是自动恢复到原来的状态,对比其他的maven的工程发现是在创建maven时候选择的项目为pom,而不是war或者jar,将 ...
- matlab 生成mat文件
生成MAT文件 假如你的矩阵A.B都已赋值,现在需要将A,B矩阵保存成mat格式文件,执行如下命令:save mydata A B 就会把A B矩阵数据保存在yourdata.dat文件中了 保存指定 ...
- 【Win10】开发中的新特性及原有的变更
声明:本文内容适用于 Visual Studio 2015 RC 及 Windows 10 10069 SDK 环境下,若以后有任何变更,请以新的特性为准. 一.Password 控件的小眼睛属性的变 ...