webpack+vue入门_如何使用Webpack入门Vue单个文件组件

webpack+vue入门

by Dushyant Sabharwal

由多西恩(Dushyant Sabharwal)

如何使用Webpack入门Vue单个文件组件 (How to get started with Vue single file components using Webpack)

This guide assumes that you have some idea about vue. It aims to save you time, trying to help you understand the webpack config for starting with vue and its single file components. You can use vue-cli for creating the project template but this is for people who want to dig in further.

本指南假定您对vue有所了解。 它旨在节省您的时间，试图帮助您了解从vue及其单个文件组件开始的webpack配置。 您可以使用vue-cli来创建项目模板，但这适用于想要进一步挖掘的人们。

You are probably a developer who knows the front-end. You have decided to take your app to the next level by adopting vue as the front-end framework. You jump into the documentation and start reading about how to develop components, all while drawing parallels in your head with use-cases for the first component in your project. The framework and documentation turns out to be awesome and you cannot wait to start using vue.

您可能是一位了解前端的开发人员。 您已决定采用vue作为前端框架，将您的应用程序提升到一个新的水平。 您直接进入文档并开始阅读有关如何开发组件的知识，同时在脑海中画出与项目中第一个组件的用例相对应的内容。 框架和文档非常棒，您迫不及待想开始使用vue 。

If this sounds familiar, then that’s great!

如果听起来很熟悉，那就太好了！

TL;DR you can clone or fork the repository here and get started.

TL; DR，您可以在此处克隆或存储库并开始使用。

让我们开始吧 (Let’s get started)

Our goal is to write our first component, but not the way it’s done below. Though there is nothing wrong with loading the script file like this, it gets messier when you end up loading multiple script files this way.

我们的目标是编写第一个组件，而不是下面的编写方法 。 尽管这样加载脚本文件没有任何问题，但是当您最终以这种方式加载多个脚本文件时，它将变得更加混乱。

We will be using webpack for bundling our app. If you haven’t looked into webpack, then now is the time to configure your first app. It looks daunting at first, but the latest version (v4) is super easy and intuitive to use.

我们将使用webpack捆绑我们的应用程序。 如果您尚未研究webpack ，那么现在是时候配置您的第一个应用程序了。 乍一看似乎令人生畏，但最新版本(v4)超级易用且直观。

安装套件 (Installing packages)

In order to get to that point, let’s install some basic packages which we’ll need. We will be using npm for managing the packages. If you are not confident using npm, don’t worry! Just follow along. Make sure you have installed node and npm on your machine.

为了达到这一点，让我们安装一些我们需要的基本软件包。 我们将使用npm来管理软件包。 如果您不确定使用npm ，请不要担心！ 只是跟随。 确保已在计算机上安装了node和npm 。

Note: If you have time on your hands, then do read up on how npm works and what it means for the security of your app.

注意 ：如果您有时间，请仔细阅读 npm的工作原理及其对应用程序安全的意义。

Moving along…

前进...

npm install vue

npm install webpack --save-dev

Since we will be writing our code in ES6 and above, we need something to transpile or transform our code. We will be using babel with webpack to help us come up with a version of code which will run in browsers which still do not support full spec of ES6 .

由于我们将在ES6及更高版本中编写代码，因此我们需要一些东西来转换或转换我们的代码。 我们将在webpack使用babel ，以帮助我们提出一个版本的代码，该代码将在仍不支持ES6完整规格的浏览器中运行。

This article gives a nice overview on babel, and will explain in more detail why we need the below packages.

该文章对巴贝尔一个很好的概述，并详细为什么我们需要下面的包会解释。

npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-env --save-dev

npm install babel-preset-stage-2 --save-dev

Your package.json should look something like the below. Your versions might be different when you install the below packages, which is fine as long as the app doesn’t break.

您的package.json应该如下所示。 当您安装以下软件包时，您的版本可能会有所不同，只要应用程序不中断，就可以了。

If you want to install the specific versions as you see above, then simply do

如果您要安装上述特定版本，只需执行

npm install webpack-cli@^3.0.2 --save-dev

Now that our basic toolset is setup, lets focus our attention on the idea of how are we gonna write thetemplate or html part of our first component. Will it be in a separate .html file ? Or will it include an existing file like index.html? Or will it be in a string which is then further compiled using some library? I have been through this train of thought, as well.

现在我们的基本工具集已经设置好，让我们将注意力集中在如何编写第一个组件的template或html部分的想法上。 它将在单独的.html文件中吗？ 还是将包含现有文件(如index.html ？ 还是将其放在一个string ，然后使用某个库进一步进行编译？ 我也经历了这种思路。

Vue solves this problem by providing a way to write components where you can associate the template part and the script part of the component in a single file. How awesome is that?

Vue通过提供一种编写组件的方法来解决此问题，您可以在其中将组件的template部分和script部分关联到一个文件中。 那有多棒？

For example, if you are building a simple table component, then you can name the file as table.vue which has everything the component needs. What if I tell you that you can have styles also in the same .vuefile which are specific to that component? I know! Sounds crazy!

例如，如果要构建一个简单的table组件，则可以将文件命名为table.vue ，其中包含组件所需的所有内容。 如果我告诉您可以在同一.vue文件中也具有特定于该组件的styles ，该怎么办？ 我知道！ 听起来很疯狂！

Let’s install the below packages so we can have single file components, or SFCs:

让我们安装以下软件包，以便我们可以使用单个文件组件或SFCs ：

npm install vue-template-compiler --save-dev

npm install vue-loader --save-dev

npm install css-loader --save-dev

npm install vue-style-loader --save-dev

vue-template-compiler is for making sense of the template section of the component.

vue-template-compiler用于了解组件的template部分。

vue-loader enables webpack to load single file components.

vue-loader webpack可以加载单个文件组件。

css-loader and vue-style-loader allow us to author styles in the component.

css-loader和vue-style-loader允许我们在组件中编写样式。

Your package.json should look something like the below now:

您的package.json现在看起来应该如下所示：

Webpack (Webpack)

Now that we have every package we need in our arsenal, all we need is a way to instruct webpack. If you are trying to deal withwebpack and how it works, it’s best to understand the intuition of why that tool exists in the first place. It doesn’t matter if we use webpack or not, we just need some tool which can do things like:

既然我们已经拥有了军械库中需要的每一个软件包，那么我们所需要的只是一种指导webpack 。 如果您尝试处理webpack及其工作方式，那么最好首先了解一下该工具为何存在的直觉。 不管是否使用webpack都没关系，我们只需要一些可以执行以下操作的工具即可：

• Process entry points in our app for starting the process
  在我们的应用程序中处理入口点以启动过程
• Name the output/processed files and specify their location
  命名输出/处理的文件并指定其位置

• Process different types of files like .css , .js or .vue

  处理不同类型的文件，例如.css ， .js或.vue

• Hot reloading the changed files in order to rebuild the whole thing
  热重新加载更改的文件以重建整个内容

Webpack does all these things (and much more) if you just specify what needs to be done via a config object.

如果仅通过配置对象指定需要执行的操作，则Webpack会执行所有这些操作(甚至更多)。

We will be using webpack-dev-server for serving static and dynamic assets in our project, because why not.

我们将使用webpack-dev-server在项目中提供静态和动态资产，因为为什么不这样做。

看代码 (Looking at the code)

Let’s clone or fork (if you want to improve) this project.

让我们克隆或分叉(如果您想改进) 此项目 。

You will see that the project has the same package.json as mentioned above. Let’s install and run the project based on the instructions in the repo.

您将看到该项目具有与上述相同的package.json 。 让我们根据仓库中的说明安装并运行项目。

index.html has our first component called main-content:

index.html具有我们的第一个组件main-content ：

Our main-content.vue, which is a SFC, looks like the below. As you can see, it has three sections: template , script and style . Everything is tied to our component neatly and webpack takes care of the rest.

我们的main-content.vue是SFC ，如下所示。 如您所见，它分为三个部分： template ， script和style 。 一切都与我们的组件整齐地绑定在一起，而webpack负责其余的工作。

Head to http://localhost:8010/ in your browser and you’ll notice our main-content component. Now change something in the component like below:

在浏览器中转到http：// localhost：8010 / ，您会注意到我们的main-content组件。 现在，在组件中进行如下更改：

and notice how the heading changes in the browser. To understand how it works, have a look at webpack.config.js. Each section in the config has comments explaining why we need it.

并注意标题在浏览器中的变化。 要了解其工作原理，请查看webpack.config.js 。 配置的每个部分都有注释，解释了我们为什么需要它。

Let’s divide the webpack config into three main parts.

让我们将webpack配置分为三个主要部分。

Webpack的输入/输出 (The input/output to Webpack)

处理Vue单个文件组件和其他JS模块 (Processing Vue single file components and other JS modules)

配置Webpack开发服务器 (Configuring the Webpack dev server)

Each of the options in the config are pretty self-explanatory, and you can tweak them to understand them better. For example, you can remove one of the properties and notice the error(s).

配置中的每个选项都是不言自明的，您可以对其进行调整以更好地理解它们。 例如，您可以删除属性之一并注意到错误。

Note: every time you change the config, you have to stop (cmd + C) and run npm run start for the changes to reflect.

注意 ：每次更改配置时，都必须停止(cmd + C)并运行npm run start ，以反映更改。

You can add more options to the app by reading through the docs, and feel free to fork the project for improvements.

您可以通读docs来为应用程序添加更多选项，并随时派遣项目进行改进。

If you think this article helped you, then you can buy me a coffee or just share with others. Cheers ?

如果您认为这篇文章对您有所帮助，那么您可以给我买咖啡或与他人分享。 干杯？

Buy Dushyant Sabharwal a Coffee - BuyMeACoffee.comI am a full stack developer who loves writing stuff which can help other developers save timewww.buymeacoffee.com

购买Dushyant Sabharwal的咖啡-BuyMeACoffee.com 我是一名全栈开发人员，喜欢编写可以帮助其他开发人员节省时间的东西， www.buymeacoffee.com

翻译自: https://www.freecodecamp.org/news/getting-started-with-vue-single-file-components-using-webpack-2ae078058688/

webpack+vue入门