记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 ...
随机推荐
- c# 简易绘制C语言头文件包含关系图 v2.0
老规矩,先上图 节点样式说明: 1.粉色圆角,说明该节点下有循环引用 2.黄色菱形,说明该节点代表的文件在项目目录下未找到. 3.红色圆角,说明循环引用(从开始到最终,这种感情没变过,没有谁..... ...
- X86主要的几种寻址方式
一.首先 P33: 严格来说有三种寻址方式 与数据有关的寻址方式 与转移指令或过程调用指令有关的寻址方式 与IO指令有关的寻址方式 这篇博客只讲1.2两条 二.然后 1. 与数据有关的寻址方式 数据, ...
- Linux换源
Linux换源 前言 最近学校的ipv6坏了,导致从deepin本身获取的源速度极慢,笔者实在忍无可忍,随后在同学指导下换了清华大学ipv4的源 步骤 sudo gedit /etc/apt/sour ...
- DataGridView不显示未绑定的列-AutoGenerateColumns
DataGridView绑定数据源时,会自动显示未绑定的列,怎么让其不显示未绑定的列呢? 设置AutoGenerateColumns属性即可 this.dataGridView1.AutoGenera ...
- Software-Defined Networking:A Comprehensive Survey--Day1
Software-Defined Networking:A Comprehensive Survey 摘要: 传统网络复杂且难以管理,根据预定义策咯也难以对网络进行配置,也难以重新配置. 软件定义网络 ...
- 在vue中如何动态修改title标签的值
建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...
- 【IneliJ 】使用IneliJ IDEA 2016将Java Web项目导出为War包
本文记录使用IDEA导出war包的过程以及碰到问题的解决办法 虽说现在改用IDEA进行开发了,但还是用eclipse打war包 ….囧 这样下去不是办法... 于是今天就试着使用IDEA进行打包. 项 ...
- 一本通1646GT 考试
1646:GT 考试 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 阿申准备报名参加 GT 考试,准考证号为 n 位数 X1X2⋯Xn(0≤Xi≤9),他不 ...
- Grafana elasticsearch 应用
早期的时候,项目基于ES+echart写了一些仪表盘的展示页面,虽然ES配合这种char界面有着天然的优势,但实际写起代码来,还是很多重复的劳动,在一次偶然中发现Grafana,看到它提供了很多仪表盘 ...
- 04.基于IDEA+Spring+Maven搭建测试项目--application-context.xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...