webpack如何使用vue
1.安装vue的包: cnpm i vue -S
2.在main.js中导入包
3.运行起来报错
3.1第一种解决办法:
3.2第二种解决办法:
让我们先回顾一下包的查找规则:
//1.找项目根目录中有没有node_modules的文件夹
//2.在node_modules中根据包名,找对应的vue文件夹
//3.在vue文件夹中,找一个叫做package.json的包配置文件
//4.在package.json文件中,查找一个main属性[main属性制定了这个包在被加载时候的入口文件]
在package.json文件中,main对应的文件为“dist/vue.runtime.common.js”。直接修改文件为“dist/vue.js”即可
3.3第三种解决方法:
在main.js中依然使用"import Vue from 'vue'",在webpack.config.js中配置规则
4.在runtime-only下如何才能正确的导入vue呢?
4.1在src目录下创建login.vue模板
<template>
<div>
<h1>这是登录组件,使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
// 注意:组件中的 data 必须是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
默认webpack无法打包.vue文件,需要安装相关的loader
"cnpm i vue-loader vue-template-compiler -D"
在配置文件中新增loader配置项{test:/\.vue$/,use:'vue-loader'}
启动项目报错
解决方法:Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用:
在webpack.config.js添加以下的代码,即可
// webpack.config.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}
webpack如何使用vue的更多相关文章
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- vue全家桶安装以及修改webpack配置新增vue项目启动方式
一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
- 手把手使用 Webpack 4 建立 VUE 项目
手把手使用 Webpack 4 建立 VUE 项目 安装 node.js 略 安装 cnpm 略 安装 webpack cnpm install webpack -g 安装 vue-cli cnpm ...
- 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学习之webpack中使用vue(十七)
一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
随机推荐
- 010-centos 端口问题
1.nmap 安装 yum install nmap #输入y安装 使用 nmap localhost #查看主机当前开放的端口 nmap -p 1024-65535 local ...
- osgViewer:: Viewer::advance() osg多线程与智能指针
void ViewerBase::frame(double simulationTime) { if (_done) return; // OSG_NOTICE<<std::endl< ...
- 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)
Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- PAT 甲级 1037 Magic Coupon (25 分) (较简单,贪心)
1037 Magic Coupon (25 分) The magic shop in Mars is offering some magic coupons. Each coupon has an ...
- selenium chromedriver与chrome版本对应表
chromedriver版本 支持的Chrome版本 v2.41 v67-69 v2.40 v66-68 v2.39 ...
- js获取当前页面的url地址
//微信分享的时候要通过这样动态获取url传参,因为微信会对url自动加参数,所以要动态获取,不能写死url var page_url = location.href.split('#')[0];
- MediaElement 不能显示的问题
1.记得在窗体的 Load 事件里面调用 Player1.Play();方法,就可以在窗体加载后就直接播放视频 2.WPF MediaElement其实和Windows系统自带的播放器是一样的,因此W ...
- SMOS数据产品介绍与下载方法
1. SMOS数据介绍 The Soil Moisture and Ocean Salinity (SMOS) 卫星是欧空局发射的一颗以探测地球土壤水含量以及海表盐度为目标的卫星,卫星所搭载的唯一载荷 ...
- MATLAB知识-解决因缺少libsvm 而运行出现Y must be a vector or a character array.
matlab版本R2014b 最近运行一个使用svmtrain的程序,出现以下错误: 这是因为是在设定路径里面没有libsvm.辛亏有一位师姐的电脑里面有libsvm的包,我直接用了,这样就不需要下载 ...