vue.js 全局应用js_在Vue.js应用中使用包裹-CSDN博客

vue.js 全局应用js

When it comes to bundler, Webpack seems to be the de-facto bundler within the Vue.js community. In this tutorial, I will be showing you how to use Parcel in a Vue.js application completely from scratch.

说到捆绑器，Webpack似乎是Vue.js社区中的事实上的捆绑器。在本教程中，我将向您展示如何完全从头开始在Vue.js应用程序中使用Parcel。

什么是包裹 ( What is Parcel )

Parcel is a blazing fast, zero configuration web application bundler. It is a relatively new to the application bundler world. One of Parcel’s main selling point is it zero configuration as you don’t need have some kind of configurations to it. If you have ever used Webpack prior to version 4, then this will be a relief.

Parcel是一个快速，零配置的Web应用程序捆绑包。对于应用程序捆绑程序领域来说，它是一个相对较新的事物。 Parcel的主要卖点之一是零配置，因为您无需对其进行某种配置。如果您曾经在版本4之前使用过Webpack，那么这将是一件轻松的事。

In addition to this, Parcel has out of the box support for JS, CSS, HTML, file assets etc, with no plugins needed, and it builds all these assets in a blazing fast bundle time.

除此之外，Parcel还对JS，CSS，HTML，文件资产等提供了开箱即用的支持，而无需任何插件，并且它以极快的捆绑时间构建了所有这些资产。

入门 ( Getting started )

To get started using Parcel, we need to first install the Parcel bundler on our computer. We can do so by using the command below:

要开始使用Parcel，我们需要先在计算机上安装Parcel捆绑器。我们可以使用以下命令来做到这一点：

// using NPM
$npm install -g parcel-bundler
// using Yarn
$ yarn global add parcel-bundler

Here, we install the Parcel bundler as a global dependence. We can also install the Parcel bundler per project:

在这里，我们将Parcel捆绑器安装为全局依赖项。我们还可以为每个项目安装Parcel捆绑器：

// using NPM
$npm install --save-dev parcel-bundler
// using Yarn
$ yarn add --dev parcel-bundler

Once that is installed, we can start using it by simply running the command below:

安装完成后，我们只需运行以下命令即可开始使用它：

$ parcel index.html

Vue.js的用法 ( Usage with Vue.js )

Now let's see how we can use Parcel in a Vue.js app. We’ll start by creating a new project:

现在，让我们看看如何在Vue.js应用程序中使用Parcel。我们将从创建一个新项目开始：

$mkdir vue-parcel
$ cd vue-parcel
$ npm init -y

We create a new directory (vue-parcel) that will hold our Vue.js app, then we initialize NPM, which will create a package.json with some default details.

我们创建一个新目录（ vue-parcel ）来保存我们的Vue.js应用程序，然后初始化NPM，这将创建一个具有一些默认详细信息的package.json 。

Next, let’s install the dependences needed for our app:

接下来，让我们安装应用程序所需的依赖项：

$npm install --save vue
$ npm install --save-dev parcel-bundler

We install Vue.js and the Parcel bundler.

我们安装Vue.js和Parcel捆绑器。

Now, we can begin to flesh out the application. Within the project directory, create a new index.html file and paste the code below in it:

现在，我们可以开始完善应用程序了。在项目目录中，创建一个新的index.html文件，并将以下代码粘贴到其中：

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Parcel</title>
</head>
<body>
  <div id="app"></div>

  <!-- built files will be auto injected -->
  <script src="./src/main.js"></script>
</body>
</html>

Some pretty standard HTML. We add a div with an id of app and also a script tag that link to a JavaScript file, which we are yet to create. The main.js will serve as the main JavaScript file for our app and index.html file will be used as the entry point for Parcel.

一些漂亮的标准HTML。我们添加一个ID为app的div以及一个脚本标记，该标记链接到我们尚未创建JavaScript文件。 main.js将用作我们应用程序的主要JavaScript文件，而index.html文件将用作Parcel的入口点。

Tip: Be sure to use a relative path when linking the main JavaScript file.

提示：链接主JavaScript文件时，请确保使用相对路径。

Next, let’s create the main.js file. Within the project’s root, create a new src directory. Then within the src directory, create a new main.js and paste the following code in it:

接下来，让我们创建main.js文件。在项目的根目录下，创建一个新的src目录。然后在src目录中，创建一个新的main.js并将以下代码粘贴到其中：

// src/main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: h => h(App)
})

First, we import Vue.js and App component (which we’ll create shortly). Then we create a new instance of Vue, passing to it the element we want to mount it on. Here, we are using a render function, and we pass the App component to it.

首先，我们导入Vue.js和App组件（稍后将创建）。然后，我们创建一个新的Vue实例，并将要安装它的元素传递给它。在这里，我们正在使用渲染功能，并将App组件传递给它。

Next, let’s create the App component. Within src, create a new App.vue file and paste the code below in it:

接下来，让我们创建App组件。在src ，创建一个新的App.vue文件，并将以下代码粘贴到其中：

// src/App.vue<template>
  <div class="container">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Using Parcel In A Vue.js App',
    };
  },
};
</script>

<style scoped>
  .container {
    width: 600px;
    margin: 50px auto;
    text-align: center;
  }
</style>

Here, we create a basic component that simply displays a message.

在这里，我们创建一个基本组件，该组件仅显示一条消息。

With our app complete, let’s run Parcel to compile and build our app. Before we do just that, let’s add a dev script to package.json:

完成我们的应用程序后，让我们运行Parcel来编译和构建我们的应用程序。在执行此操作之前，让我们将dev脚本添加到package.json ：

// package.json"scripts": {
  "dev": "parcel index.html"
}

We can now run Parcel with:

现在，我们可以使用以下方式运行Parcel：

$npm run dev

This will install the necessary dependences (@vue/component-compiler-utils and vue-template-compiler) it needs to build the app, then build up the app and start a dev server. The server will be running at http://localhost:1234, and you should get something similar to the image below:

这将安装构建应用程序所需的必要依赖项（ @vue/component-compiler-utils和vue-template-compiler ），然后构建应用程序并启动开发服务器。该服务器将在http：// localhost：1234上运行，您将获得类似于下图的内容：

If we want to use the full build (runtime + compiler) of Vue.js instead, as opposed to the runtime-only build used above, which might look like below:

如果我们想使用Vue.js的完整版本（运行时+编译器），而不是上面使用的仅运行时版本，则可能如下所示：

// src/main.js

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Then we need to add the code below to package.json:

然后我们需要将以下代码添加到package.json ：

// package.json"alias": {
  "vue": "./node_modules/vue/dist/vue.common.js"
}

Now, if we run Parcel, everything should work as expected.

现在，如果我们运行Parcel，一切都会按预期进行。

In addition to the start script, we can also create scripts to watch and automatically rebuild as files changes while developing and bundle our application for production respectively:

除了启动脚本之外，我们还可以创建脚本来监视和自动重建文件，同时分别开发和捆绑用于生产的应用程序：

// package.json"scripts": {
  ...,
  "watch": "parcel watch index.html",
  "production": "parcel build index.html"
}

Note: watch mode doesn't start a web server, so you need to have your own server.

注意： watch模式不会启动Web服务器，因此您需要拥有自己的服务器。

结论 ( Conclusion )

That’s it! In this tutorial, we looked at what Parcel is and how we can use it in a Vue.js application. For more details about Parcel, kindly check their documentation.

而已！在本教程中，我们研究了Parcel是什么以及如何在Vue.js应用程序中使用它。有关包裹的更多详细信息，请查阅其文档。