zer*_*dge 10 javascript vue.js
尝试按照一些Vue教程进行操作，目前我无法将Vue导入.js文件中，然后将该文件导入到我的index.html。这就是我在我的脚本中导入脚本的方式index.html：
<script src="./js/main.js" type="module"></script>
如果我在main.js文件中这样做：
import Vue from 'vue';
我在浏览器控制台中收到以下错误：
未捕获的TypeError：无法解析模块说明符“ vue”。相对引用必须以“ /”、“./”或“ ../”开头。
如果我的导入行为：
import Vue from '../../node_modules/vue';
然后我得到另一个错误：
http：// localhost：63342 / vue-official-tutorial / node_modules / vue net :: ERR_ABORTED 404（未找到）
我究竟做错了什么？
Evg*_*eny 11
因此，您可以直接在浏览器中使用 ES 模块的方式（截至 2020 年 6 月）是：
使用您的依赖项的 ESM 版本（具有import而不是 的那个require）。例如，Vue ESM 版本可在以下位置获得：https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js
让您的浏览器使用实验性importmap功能。导入地图是一种新的网络推荐，主流浏览器尚不支持。https://wicg.github.io/import-maps/#import-map在 Chrome 中这是下chrome://flags#enable-experimental-productivity-features
（最新的 Chrome 版本将其移到下chrome://flags#enable-experimental-web-platform-features）
importmap在您的 HTML 文件中创建一个。它目前仅适用<script>于 Chrome 中的内联标签。例如：
<script type="importmap">
{ "imports": {
"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
"vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
"vuex": "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
} }
</script>
<script type="module" src="./main.js"></script>
完整示例：
<script type="module" src="./main.js"></script>
如果你正在使用ES6，那么你不应该手动插入你的main.js成index.html-这将被处理的WebPack。实际上，Vue最简单的教程是这样的：
./dist项目文件夹内另外，您应该这样导入Vue
从'vue'导入Vue；
而不是这样
从'../../node_modules/vue'导入Vue；
好的，如果您坚持要遵循初学者的方法，而不是使用Webpack和单文件Vue组件-那么您应该这样开始：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>My beginners project</title>
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<!-- templates for your components -->
<template id="login">
<div>test</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<!-- code for your components -->
<script type="text/javascript" src="/app/login.js"></script>
<!-- Vue Root component should be last -->
<script type="text/javascript" src="/app/app.js"></script>
</body>
</html>
您的/app/app.js外观将如下所示：
var badRoute = Vue.component('bad-route',
{
template: '<div id="bad_route"><h1>Page Not Found</h1><p>Sorry, but the page you were trying to view does not exist.</p></div>'
});
var vue_router = new VueRouter({
base: '/app',
mode: 'hash',
routes:
[
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: loginForm,
name: 'LOGIN'
},
{
path: '*', // should be last, otherwise matches everything
component: badRoute,
name: 'NOT FOUND'
}
]
});
// Main application
var vue_app = new Vue(
{
router: vue_router,
}).$mount('#app');
您的/app/login.js组件将如下所示：
var loginForm = Vue.component('login-form',
{
template: '#login', // should match the ID of template tag
data: function()
{
var a =
{
username: '',
password: '',
};
return a;
},
methods:
{
}
});