Vue.js如何写一个简单的原生js模块，浏览器中的表现如何？项目配置创建单个文件JavaScript组件应用程序中运行回退处理性能比较注意：这些数字来自Lighthouse测试，其中有一个HTTP / 2服务器。

86 阅读 0 评论 57 点赞

我是靠谱客的博主超级小伙，最近开发中收集的这篇文章主要介绍Vue.js如何写一个简单的原生js模块，浏览器中的表现如何？项目配置创建单个文件JavaScript组件应用程序中运行回退处理性能比较注意：这些数字来自Lighthouse测试，其中有一个HTTP / 2服务器。，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019独角兽企业重金招聘Python工程师标准>>>

vue.js

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了，Firefox和Edge也将很快推出。

如果您是一个vue.js用户，那关于JavaScript模块一个很酷的事就是他们允许您编写您的组件到自己的文件中而无需任何多余的构建步骤。

在这篇文章中，我将向您展示如何编写一个JavaScript模块到一个文件中，并在vue.js APP中使用它。您可以在浏览器中就做到这一切而不需要Babel或者Webpack！

当我说到“单文件组件”时，我所说的是一个JavaScript文件，它exports一个完整的组件定义。我说的不是您已经习惯使用的单一的.vue文件。对不起，如果您很失望的话，但我仍然认为这很酷，所以来看一下。

项目配置

让我们使用Vue-cli的simple模板来试试。没错，不需要WebPack；）

$ vue init simple sfc-simple

本教程完整的源代码在GitHub。（https://github.com/anthonygore/vue-single-file-js-components）

切换到相应的目录并创建我们需要的文件：

$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js

从index.html中删除内联脚本，改为使用脚本标记链接到我们的模块。请注意type="module"属性：

<!DOCTYPE html>
<html>
<head>
 <title>Vue.js Single-File JavaScript Component Demo</title>
     <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <div id="app"></div>
     <script type="module" src="SingleFileComponent.js"></script>
     <script type="module" src="app.js"></script>
</body>
</html>

创建单个文件JavaScript组件

这是一个与您创建的任何其他组件一样的组件，因为它是一个模块所以只是export 配置对象：

SingleFileComponent.js

export default {
 template: `
   <div>
    <h1>Single-file JavaScript Component</h1>
    <p>{{ message }}</p>
   </div>  
 `,
 data() {
   return {
     message: 'Oh hai from the component'
   }
 }
}

现在我们就可以在Vue的应用中import并使用它了：

app.js

import SingleFileComponent from 'SingleFileComponent.js';
new Vue({
 el: '#app',
 components: {
   SingleFileComponent
 }
});

index.html

<div id="app">
 <single-file-component></single-file-component>
</div>

应用程序中运行

对于像这样的一个简单项目，您只需要在命令行上使用HTTP服务器模块的静态服务器即可：

# This will serve the project directory at localhost:8080
$ http-server

要查看这个应用程序，您当然需要使用支持JavaScript模块的浏览器。我用的是Chrome 61。

vue.js

回退处理

如果用户的浏览器不支持JavaScript模块呢？对大多数用户来说是这只是暂时的。

我们可以用nomodule属性脚本标签写的一个简单的错误信息的文件：

<body>
 <div id="app">
   <single-file-component></single-file-component>
 </div>
 <script type="module" src="SingleFileComponent.js"></script>
 <script type="module" src="app.js"></script>
 <script nomodule>
   document.getElementById("app").innerHTML
= "Your browser doesn't support JavaScript modules :(";
 </script>
</body>

一个更好的办法，是使用WebPack打包这个项目。下面这个简单的配置将完成这项工作：

var path = require('path')
var webpack = require('webpack')
module.exports = {
 entry: './app.js',
 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
 },
 module: {
   rules: [
     {
       test: /.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/
     }
   ]
 }}

生成之后，可以将该包作为回退脚本加载：

<body>
 ...  
 <script type="module" src="SingleFileComponent.js"></script>
 <script type="module" src="app.js"></script>
 <script nomodule src="/dist/build.js"></script>
</body>

这WebPack版本将在不同浏览器中的原生模块支持。在这里，它是在Firefox中，注意build.js加载的并不是模块：

vue.js