Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >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

复制
相关文章
怎样Hack Linux的内核符号?
Inline Hook技术能够帮助我们完成函数的动态拦截和跳转,但要实现缺陷函数的自动化热修复则会面临更加复杂的挑战。本文从一个实际例子出发,阐述了在对二进制形式的Linux固件做自动化安全加固的时遇到的技术难题和解决办法。
ThoughtWorks
2020/08/02
2.4K0
linux内核符号表kallsyms简介
在2.6版的内核中,为了更方便的调试内核代码,开发者考虑将内核代码中所有函数以及所有非栈变量的地址抽取出来,形成是一个简单的数据块(data blob:符号和地址对应),并将此链接进 vmlinux 中去。
sean.liu
2022/09/28
2.7K0
为什么要阅读Linux内核源码以及如何阅读Linux内核源码
第一种方法纵向或者横向来读都可以,因为代码量不是很大。《linux内核完全剖析》《linux内核完全注释》是引导你横向阅读的书,《linux内核设计的艺术》是引导你纵向阅读的书。建议横向纵向结合着来,纵向跟着bochs调试工具来是必不可少的,当遇到问题时进入到相应的功能模块横向拓展一下。
Jasonangel
2021/05/28
4.7K0
Linux为什么使用内核模块?
我们常常说到的操作系统有Linux、Windows、mac OS等等,手机的安卓系统就是基于Linux操作系统,这些操作系统从内核的角度分为宏内核和微内核,Linux是典型的宏内核的操作系统,Windows是典型的微内核操作系统。
混说Linux
2022/07/14
2.5K0
Linux为什么使用内核模块?
为linux内核源码生成tags文件
一般来说,如果我们想要研究一个c/c++项目的源码,我们首先要做的是为该项目生成tags文件,linux内核是c写的,所以它也不例外。
KINGYT
2019/11/19
4.4K0
为linux内核源码生成tags文件
Linux 内核组织将关闭 FTP 服务
Linux Kernel Organization(kernel.org) 是一家建立于 2002 年的加利福尼亚公共福利公司,其目的是公开地免费分发 Linux 内核和其它开源软件。它接受 Linux 基金会的管理,包括技术、资金和人员支持,用以维护 kernel.org 的运营。
Debian中国
2018/12/20
4.2K0
教程:为Linux系统导出内核头文件
最近由于项目需要,要编译mlibc,其中需要linux kernel headers,而使用apt安装的头文件总是有问题,因此,自己从内核里面导出了一份。在此写个简单的文章记录一下。
灯珑LoGin
2023/10/18
9620
驱动开发:内核无痕隐藏自身分析
在笔者前面有一篇文章《驱动开发:断链隐藏驱动程序自身》通过摘除驱动的链表实现了断链隐藏自身的目的,但此方法恢复时会触发PG会蓝屏,偶然间在网上找到了一个作者介绍的一种方法,觉得有必要详细分析一下他是如何实现的驱动隐藏的,总体来说作者的思路是最终寻找到MiProcessLoaderEntry的入口地址,该函数的作用是将驱动信息加入链表和移除链表,运用这个函数即可动态处理驱动的添加和移除问题。
微软技术分享
2022/11/14
8330
驱动开发:内核无痕隐藏自身分析
WordPress 函数:esc_html()将符号标签编码转义为HTML实体
esc_html() 的作用,是把各种字符转义成 HTML 实体,如 < > & " '(小于号,大于号,&,双引号,单引号)等,如果已经是 HTML 实体的字符则不会再转义。
Yangsh888
2022/03/28
2.6K0
Linux动态为内核添加新的系统调用
先来个满满的回忆:https://blog.csdn.net/dog250/article/details/64461922011年写这篇文章的时候,我的女儿小小还没有出生。
Linux阅码场
2020/05/13
1.8K0
GitHub为什么托管不了Linux内核社区?
前不久,微软在 Linux 基金会董事会的代表 Sarah Novotny 认为,由纯文本电邮讨论推动的 Linux 内核开发需要被更好的或替代协作工具取代,以降低门槛引入新的贡献者,维护和维持未来的 Linux。她认为替代工具可以是基于文本的、基于电邮的补丁系统,某种程度上是过去五到十年成长起来的开发者所熟悉的工具。此前 Linus 曾在接受采访时表示很难找到新的 Linux 内核维护者。
深度学习与Python
2020/09/28
1.5K0
GitHub为什么托管不了Linux内核社区?
为什么 Linux 内核中不经常使用 typedef?
Torvalds 本人不太想看到typedef文化占上风,但是维护自己代码的人通常有最后的发言权。
董哥聊技术
2023/08/29
2880
为什么 Linux 内核中不经常使用 typedef?
【Linux 内核】Linux 内核源码结构 ( 下载 Linux 内核源码 | 使用 VSCode 阅读 Linux 内核源码 )[通俗易懂]
参考 【Linux 内核】编译 Linux 内核 ① ( 下载指定版本的 Linux 内核源码 | Linux 内核版本号含义 | 主版本号 | 次版本号 | 小版本号 | 稳定版本 ) 博客 , 下载 Linux 5.6.18 版本的内核源码 ;
全栈程序员站长
2022/09/15
23.6K0
【Linux 内核】Linux 内核源码结构 ( 下载 Linux 内核源码 | 使用 VSCode 阅读 Linux 内核源码 )
参考 【Linux 内核】编译 Linux 内核 ① ( 下载指定版本的 Linux 内核源码 | Linux 内核版本号含义 | 主版本号 | 次版本号 | 小版本号 | 稳定版本 ) 博客 , 下载 Linux 5.6.18 版本的内核源码 ;
韩曙亮
2023/03/30
21.4K0
【Linux 内核】Linux 内核源码结构 ( 下载 Linux 内核源码 | 使用 VSCode 阅读 Linux 内核源码 )
linux内核编程_linux内核是什么
进程调度(SCHED)、内存管理(MM)、虚拟文件系统(VFS)、网络接口(NET)和进程间通信(IPC)
全栈程序员站长
2022/11/08
18.9K0
Linux为什么区分内核空间和用户空间 ???
程序如果要被CPU执行,就得编译成CPU可以执行的指令,一大堆的程序就变成了一堆的指令。
混说Linux
2022/07/14
1.7K0
Linux为什么区分内核空间和用户空间 ???
LINUX内核
6.音频:音频体系结构ALSA.支持USB音频和MIDI设备,并支持全双工重放功能。
心跳包
2020/08/28
13.9K0
【Linux 内核】编译 Linux 内核 ② ( 解压内核源码 | 查询当前 Linux 内核版本号 | 进入并查看 linux 内核源码目录 )
将 下载的 Linux 内核源码 linux-5.6.14.tar.gz 拷贝到 Ubuntu 虚拟机中 , 执行
韩曙亮
2023/03/30
87.1K0
【Linux 内核】编译 Linux 内核 ② ( 解压内核源码 | 查询当前 Linux 内核版本号 | 进入并查看 linux 内核源码目录 )
Linux 内核 vs Windows 内核
Windows 基本占领了电脑时代的市场,商业上取得了很大成功,但是它并不开源,所以要想接触源码得加入 Windows 的开发团队中。
程序员小猿
2021/03/07
16.4K0
Linux内核编程_linux内核开发工具
转载链接1:http://www.arrowapex.cn/archives/66.html
全栈程序员站长
2022/11/08
13K0

相似问题

gdb无法为linux内核解析符号

23

Linux内核文本符号

16

Linux内核导出的符号

11

将宏元件定义为自身

20

使用vim/cscope查找linux内核中的符号定义

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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