首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue.js代码不适用于Webpack

Vue.js代码不适用于Webpack
EN

Stack Overflow用户
提问于 2018-01-08 11:34:59
回答 2查看 822关注 0票数 1

我用的是Webpack和Vue.js。我有非常简单的代码,就像这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="msg">
    <h1>{{msg}}</h1>
</div>

new Vue({
   el: '#msg',
   data:{
       msg:'Hello'
   }
});

如果我直接在Index.html中使用vue.js,那么我的代码工作得很好,但是如果我在单独的js文件中导入vue.js,那么我会得到错误:

Uncaught ReferenceError: Vue is not defined at index.html?_ijt=e0ucco3tsm7no18s2or5votcio:305

在单独的js文件中导入vue.js,如下所示:

import Vue from 'vue';

在我的控制台上,我可以看到Vue加载了No Problem:

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

我想知道我的问题在哪里?为什么我的代码不能运行?我还必须说,我正在使用index.js文件加载我的所有样式和JS代码。

这里有更多的信息:

"devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2017": "^6.24.1", "cross-env": "^5.1.3", "css-loader": "^0.28.8", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.6", "jshint": "^2.9.5", "jshint-loader": "^0.8.4", "lodash": "^4.17.4", "node-sass": "^4.7.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.1", "vue": "^2.5.13", "vue-awesome-swiper": "^3.1.0", "vue-cli": "^2.9.2", "webpack": "^3.10.0" },

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const webpack = require('webpack');
const paths = require('path');
module.exports = {
entry: './js/index.js',
output: {
    filename: 'shop.js',
    path: paths.resolve(__dirname, 'files/js')
},
module: {
    rules: [
        {
            test:/\*.vue$/,
            loader: 'vue-loader'
        },

        /* Babel For ES 6*/
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    "presets": ["es2017"]
                }
            }
        },
        //Sass Loader
        {
            test: /\.s[ac]ss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        },
        //File Loader For Fonts
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        },
        //File Loader For IMG
        {
            test: /\.(jpg|jpeg|png|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name:`[path][name].[ext]`,
                    }
                }
            ]
        }
    ]
  }
 };
EN

回答 2

Stack Overflow用户

发布于 2018-01-09 13:43:33

您的开发依赖项中似乎没有vue-loader。您已将.vue文件注册到#msg。尝试全局注册,看看是否需要重新考虑如何注册它们。

要注册全局组件,可以使用Vue.component(tagName,options)。例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Vue.component('my-component', {
  // options
})

此外,当您在web包中使用vue加载程序时,您可能希望使用es模块选项,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        esModule: true,
        extractCSS: true
    }
}

我将给出的一个技巧,这对我的vue.js开发很有帮助,那就是将你的html,js和css分离到它们各自的文件中,并将它们注入到一个vue文件中。这将使您更容易将js文件注入/导入到其他文件中,而不会导致加载器出现问题。

票数 0
EN

Stack Overflow用户

发布于 2018-01-08 18:40:14

使用官方工具启动项目

vue-cli

vuejs-templates

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48149492

复制
相关文章
三维目标跟踪简介
在所有的项目中,其中有一个最突出的,来自一位工程实习生,他撰写了一篇基于相机的3D目标跟踪的论文。
一点人工一点智能
2023/08/21
3130
三维目标跟踪简介
三维目标跟踪简介
在所有的项目中,其中有一个最突出的,来自一位工程实习生,他撰写了一篇基于相机的3D目标跟踪的论文。
一点人工一点智能
2023/08/04
8650
三维目标跟踪简介
xna framework有啥用_net和xna在哪下载
XNA Framework 是建置于 .NET Framework 2.0上,另外还加入了一些专注于游戏开发上类别库,在指定的平台上使程式码重用达之最大效果。XNA Framework 在一个特别为有管理式游戏运行的通用语言执行层(Common Language Runtime)版本上运行。这个执行层支援Windows XP、Windows Vista和XBox 360。由于游戏是开发在执行层上,使得游戏能在所有支持XNA Framework 的平台上只要很少甚至不需要任何更改便能运行。现时所有在XNA Framework 上的游戏必需使用C #和XNA Game Studio Express IDE[1]开发。
全栈程序员站长
2022/09/30
1.7K0
动态三维高斯:通过持续动态视图合成进行跟踪
动态3D世界建模将对判别式和生成式人工智能产生变革性影响。在判别式方面,这将实现对场景每一部分随时间变化的度量空间重建。模拟一切当前的位置、过去的位置及其移动方向,对许多应用至关重要。在生成式人工智能中,这样的模型可以实现诸如轻松控制和编辑高分辨率动态3D资源等新形式的内容创作,用于电影、视频游戏或元宇宙。许多此类应用需要可扩展的方法,能够实时处理高分辨率图像。到目前为止,还没有方法能够实现对任意动态场景的逼真重建,同时具备高度精确的追踪和视觉上吸引人的新视角,而且能够快速训练并实时渲染。
用户1324186
2023/12/28
8330
动态三维高斯:通过持续动态视图合成进行跟踪
看到XNA的弹幕,于是也用SilverLight弄了个弹幕
      这两天在首页看到太多悲观的东西了,给大家来个有趣点的乐呵乐呵,改变下心情       SilverLight的确是好东西,我把我们公司项目中的地图客户端用SilverLight改写之后,明细效果就是不一样,尤其是在回放轨迹的时候,那真叫平滑和稳定       这个弹幕的生成其实很简单了,单发子弹的结构,其实是一个画布里面嵌入了一个圆, 其中分别对画布应用了角度转换,对圆应用了平移转换。 然后加入一个计时器,每秒钟执行若干次,每次都对角度增加7度(为啥使用7度?嘿嘿,那是为了防止射击死角的出现,
用户1687945
2018/05/02
1.3K0
Farseer:一个用于Silverlight和XNA的开源物理引擎
当前在演示和越来越多交互界面的推动下,实时动画在很多情况下已经成为不可或缺的要求。当动画涉及到物体在屏幕上互相反弹或者被重力影响的时候,一个物理引擎就是必要的了。 Farseer Physics Engine(Farseer物理引擎),就是为了满足这个需要而设计的,尽管它首先是为2D游戏编写的。我们为此采访了Jeff Weber,Farseer的设计者。 为什么你决定首先开始这个Farseer物理引擎项目呢? 我创建Farseer物理引擎是因为我希望用.NET做一些2D的物理游戏。我想寻找一个好的用托管代
张善友
2018/01/22
8430
新算法可以优化三维重建,极大推动AR中的对象跟踪速度
该算法在数据分析方面大大优化,助力AR、VR等相关领域的发展。 近日,伯克利的AI研究人员发布新的算法,该算法根据物体的单幅二维图像信息,就可以快速地将其三维结构构造出来。 虽然对于人类而言,根据物体的单面信息推测出东西的整体形状很容易做到,但是对于机器而言,这一过程十分艰难,因为增加一个维度意味着要增加大量的数据。 具体来看,当你拍一张照片,每一边的像素点数是100,那这张图像的像素点数一共就是一万个。但是如果你想增加一个维度,也就是增加一边,假设增加的新边像素点数仍然是100,那整体像素点数将增加一百倍
镁客网
2018/05/30
8670
Unity Demo教程系列——Unity塔防游戏(四)弹道(Lobbing Explosives)
这是有关创建简单的塔防游戏的教程系列的第四部分。它增加了迫击炮塔,发射的炮弹会在撞击时爆炸。
放牛的星星
2020/12/11
2.4K0
Unity Demo教程系列——Unity塔防游戏(四)弹道(Lobbing Explosives)
BiTrack,使用摄像机-激光雷达数据的双向离线三维多目标跟踪 !
许多应用需要离线多目标跟踪(OMOT)技术来实现高精度的目标轨迹,例如运动分析和数据集标注。实时多目标跟踪(MOT)通常采用跟踪-by-检测或联合检测与跟踪[5]方案。相比之下,OMOT更倾向于前者,因为许多后处理和全局优化技术依赖于检测结果。大多数OMOT关联框架可以分为两类:
未来先知
2024/08/09
2050
BiTrack,使用摄像机-激光雷达数据的双向离线三维多目标跟踪 !
【原】XNA3.1发布,视频播放功能初探
昨天看到XNA3.1发布的消息,当时在复习考试,今天考完了操作系统就下载回来尝试了一下,官方给的新特性包括:
全栈程序员站长
2022/09/06
5070
【原】XNA3.1发布,视频播放功能初探
PointTrackNet:一种用于点云三维目标检测和跟踪的端到端网络
当前基于机器学习的多目标跟踪(MOT)框架在3-D点云跟踪场景中变得越来越流行。大多数传统的跟踪方法都使用滤波器(例如,卡尔曼滤波器或粒子滤波器)来按时间顺序预测对象位置,但是它们容易受到极端运动条件的影响,例如突然制动和转弯。在本文中提出了PointTrackNet目标跟踪方法,这是一个端到端的3-D对象检测和跟踪网络,可以为每个检测到的对象生成前景掩膜,3-D边界框和点跟踪关联位移。网络仅将两个相邻的点云帧作为输入。在KITTI跟踪数据集上的实验结果显示,与最新的跟踪网络相比本文的方法具有比较好的结果,尤其是在不规则和快速变化的情况下。
计算机视觉
2021/01/14
1.4K0
PointTrackNet:一种用于点云三维目标检测和跟踪的端到端网络
机器人相关学术速递[7.28]
【1】 Reinforcement Learning with Formal Performance Metrics for Quadcopter Attitude Control under Non-nominal Contexts 标题:非标称环境下四轴飞行器姿态控制的形式化性能度量强化学习
公众号-arXiv每日学术速递
2021/07/29
4220
趋势跟踪的速度
本文根据元盛报告《Trend Following Speed》整理,获取报告请在后台回复"speed“
量化小白
2023/03/19
5000
趋势跟踪的速度
【目标跟踪】红绿灯跟踪
视频B站链接:https://www.bilibili.com/video/BV1Vm411r7Fx/?spm_id_from=333.999.0.0
读书猿
2024/03/30
1730
【目标跟踪】红绿灯跟踪
【目标跟踪】多目标跟踪测距
读书猿
2024/02/05
2910
【目标跟踪】多目标跟踪测距
【目标跟踪】多相机环视跟踪
干货怎么会少了流程图,上图!上图!上图!。流程图用 processon 制作的,不是付费软件买不起,而是免费的更有性价比。
读书猿
2024/02/05
2480
【目标跟踪】多相机环视跟踪
跟踪综述推荐:目标跟踪40年
《中国图象图形学报》2019年第12期封面故事聚焦目标跟踪,对基于深度学习的目标跟踪算法进行系统的梳理。该成果是中国图象图形学学会机器视觉专委会牵头组织,浙江大学李玺教授、厦门大学王菡子教授等八位老师联名撰写的图像图形学科年度发展报告。
CV君
2020/02/12
2.3K0
跟踪算法(一)光流法跟踪
COPY FROM:http://blog.csdn.net/crzy_sparrow/article/details/7407604
全栈程序员站长
2022/09/15
1.2K0
转贴-WP7开发资源大收集
文章作者: jason huang 文章标签: Microsoft, Windows Phone 7, WP7 转贴链接: WP7开发资源大收集 这里收集了大量的WP7应用开发文档和软件资源,相信对开发者会有很大的帮助。先上应用Hub的链接,以便查找官方资源: Education Resources Catalog (samples, articles) Support and Feedback (support choices) Roadmap (APIs, technology, bes
ShiJiong
2018/01/10
9050
图像特征点的跟踪
http://mpvideo.qpic.cn/0bc3kqaacaaaqmaktupovrqvavgdafkaaaia.f10002.mp4?dis_k=d2c8e1e90b7f1aefb319e36
点云PCL博主
2022/04/06
3980

相似问题

三维XNA跟踪相机

30

目标跟踪:何时加速和减速旋转炮塔?

50

xna中的手部运动跟踪

10

三维包围盒边界xna

20

用XNA动画三维模型

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文