记webpack下引入vue的方法(非.vue文件方式)
- 直接script引入下载静态的vue.js文件
则最后用copy-webpack-plugin复制到一样的目录即可 - 使用npm安装的vue
无法直接用 import vue from "vue",因为这样引用的是vue.common.js
查资料:
为什么会引 vue.common.js,from 'vue'不该引的是 vue.js 么?这就要引入另一个知识点:package.json。package.json 中的main属性决定了,当项目被引入时,输出的是哪个文件,而 vue 的 package.json 中的main指向的是dist/vue.common.js。
所以,即使npm安装的vue,也包括编译后的dist目录,里面有编译好的vue.js
所以 import vue from "vue/dist/vue.js"
那么每次都要写这么长的名字?可以在webpack.config.js中设置别名:resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
参考资料:https://segmentfault.com/a/1190000006435886
记webpack下引入vue的方法(非.vue文件方式)的更多相关文章
- vue使用案例,vue初始化,vue初始化方法,vue条件语句,vue在js里面添加元素调用vue方法
<div id="main" > <button id='but1' type="button" v-on:click="save ...
- 记webpack下提取公共js代码的方法
环境: webpack4.6 + html-webpack-plugin 多页面多入口 经多次研究,稍微靠谱可用的配置 optimization: { splitChunks: { minSize: ...
- 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)
写本记时(2018-06-25)的各版本 "webpack": "^4.6.0" //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...
- webpack下css/js/html引用图片的正确方式
在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...
- 实现windows操作系统和VB下Linux虚拟操作系统相互传取文件方式总结
在windows上执行虚拟机跑的是Linux的操作系统,怎样才干在不同的操作系统之间传递文件呢? 这是本人切身体会到的,假设你没有好的方法的话.确实非常痛苦.下面是我个人的方法总结: 方法一.很好用的 ...
- Webpack下创建vue项目-非vue-cli
开始准备 初始化工程目录 shell npm init -y 安装vue npm install vue 安装 webpack npm install webpack --save-dev webpa ...
- Nodejs Express下引入本地文件的方法
Express的结构如下: |---node_modules------用于安装本地模块. |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...
- vue-cli中引入jquery的方法
vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...
- 解决webpack vue 项目打包生成的文件,资源文件均404问题
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...
随机推荐
- “Linux内核分析”实验三报告
构造一个简单的Linux系统 张文俊+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-10000290 ...
- 第一周:通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的
姓名:吕松鸿 学号:20135229 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...
- 实训四(cocos2dx sharesdk集成-1)
随着项目的进行,好像陷入的技术优先的迷局,对那些可以实现的功能,代码的编写上越来越漫不经心,反而对没有掌握的技术求之若渴,不免显得有些好高骛远.在没有掌握之前,思考.学习.交流也是一种快乐与享受. 言 ...
- Java的起源和发展
程序设计语言的发展 第一代语言:机器语言 0011 1100 …… 第二代语言:汇编语言 ADD 12,0x13 第三 ...
- ElasticSearch 2 (37) - 信息聚合系列之内存与延时
ElasticSearch 2 (37) - 信息聚合系列之内存与延时 摘要 控制内存使用与延时 版本 elasticsearch版本: elasticsearch-2.x 内容 Fielddata ...
- Alpha 冲刺三
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 发布界面布局完成.登 ...
- 四则运算生成程序——GUI支持和部分功能改进
项目成员:张金生 张政 工程地址: https://coding.net/u/jx8zjs/p/paperOne/git ssh://git@git.coding.net:jx8zjs/pap ...
- CopyOnWriteArrayList、CopyOnWriteArraySet、ConcurrentHashMap的实现原理和适用场景
ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储的,同步Map在同步的 ...
- CentOS系统下安装 LNAM环境
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要3GB以上硬盘剩余空间 128M以上内存,Xen的需要有SWAP,OpenVZ的另外 ...
- sql问题--case-when
1. 有表如下,请使用查询语句得出相应结果 id job createdate 1 开发 2018-06-19 2 运维 2018-06-20 3 开发 2018-06-19 4 开发 2018-06 ...