vue.js快速入门_Vue.js快速介绍-白红宇

vue.js快速入门_Vue.js快速介绍

阅读量：2528 次

发布时间：2019-05-11

本文共 8303 字，大约阅读时间需要 27 分钟。

vue.js快速入门

Are you interested in Front End Development?

您对前端开发感兴趣吗？

If so, then this post is for you!

如果是这样，那么这篇文章适合您！

To get started with Vue.js, you need to know HTML, CSS, JavaScript, rocket science, nuclear physics, quantum theory etc…

要开始使用Vue.js，您需要了解HTML，CSS，JavaScript，火箭科学，核物理，量子理论等。

Hmm ?…

嗯？

Well, not really. Just HTML, CSS and JavaScript are good enough to get started with Vue.js.

好吧，不是真的。仅HTML，CSS和JavaScript就足以开始使用Vue.js。

This post will cover how to easily create a simple Vue.js app and will explain the folder structure of the created app. Also, we will be creating a simple Vue.js component.

这篇文章将介绍如何轻松创建简单的Vue.js应用，并说明创建的应用的文件夹结构。另外，我们将创建一个简单的Vue.js组件。

So let’s get started.

因此，让我们开始吧。

先决条件 (Prerequisites)

如果尚未安装Node.js，请安装 (Install Node.js if not already present)

You need Node.js, since the libraries required for Vue are downloaded using node package manager (npm). Refer to to install Node.js.

您需要Node.js，因为Vue所需的库是使用节点程序包管理器(npm)下载的。请参阅来安装Node.js。

安装Vue CLI (Install Vue CLI)

Install Vue CLI using the following command:

使用以下命令安装Vue CLI：

npm install -g @vue/cli

Vue CLI helps to create a Vue.js project easily. Though it’s called a CLI, it also has a UI to create the project which I will cover below.

Vue CLI帮助轻松创建Vue.js项目。尽管它称为CLI，但它也具有用于创建项目的UI，我将在下面进行介绍。

创建项目 (Create the Project)

Type the following command in the command prompt:

在命令提示符下键入以下命令：

vue ui

This will open the following screen in the browser:

这将在浏览器中打开以下屏幕：

Click on Create. Then enter the destination where the project should be created.

单击创建。 然后输入创建项目的目的地。

Then click on Create a new project here.

然后点击此处创建新项目。

This will open up the following screen:

这将打开以下屏幕：

Enter the project folder as sample-vue-app and click Next.

输入project文件夹作为sample-vue-app ，然后单击Next。

In the Next Screen, select default preset, as shown in the image below. For this post, default-preset is the simplest one to start off with.

在下一个屏幕中，选择默认预设，如下图所示。对于这篇文章， 默认预设是最简单的开始。

Finally, click on Create Project

最后，点击创建项目

In order to test if the project is setup fine, go into the project folder and start the application using the following commands:

为了测试项目是否设置正确，请进入项目文件夹并使用以下命令启动应用程序：

cd sample-vue-appnpm run serve

The application runs on localhost:8080. The image below shows how the application looks in the browser:

该应用程序在localhost：8080上运行。下图显示了该应用程序在浏览器中的外观：

Congratulations, you have created your first Vue.js project!

恭喜，您已经创建了第一个Vue.js项目！

But wait a minute, the project has many files and folders which were created automatically.

但是请稍等，该项目包含许多自动创建的文件和文件夹。

Is it really necessary to know what these files mean?

真的有必要知道这些文件的含义吗？

Knowing them will definitely help when the code behaves in a weird manner, which often happens in the developer world.

当代码行为怪异时(在开发人员世界中经常发生)，了解它们绝对会有所帮助。

应用程序文件夹结构 (Application Folder Structure)

package.json: This file has all the node dependencies.
package.json：此文件具有所有节点依赖性。

public/index.html: This is the first file that loads when the application starts. Also, this file has the following code snippet <div id=”app”></div>. All the components are loaded within this div with id app.
public / index.html：这是应用程序启动时加载的第一个文件。另外，该文件具有以下代码段<div id=”app”></div> 。所有组件都通过id应用加载到该div中 。

src/main.js: This is the file where the Vue Instance is created. This file has the following code snippet new Vue({ render: h => h(App)}).$mount(‘#app’). This snippet is telling that App Component needs to be loaded into an element with id app (which is the div element).
src / main.js ：这是创建Vue实例的文件。该文件具有以下代码片段new Vue({ render: h => h(App)}).$mount('#app') 。这个片段是告诉需要被加载到ID为应用程序的元素(其是div元素)个在应用程序组件。

src/App.vue: This file corresponds to the App component which acts as a container to all other components. It has a template for the HTML code, it has a script for the JavaScript code, and it has a style for CSS.
src / App.vue：此文件对应于App组件，该组件充当所有其他组件的容器。它有一个HTML代码模板，它对于J avaScript代码编写的脚本，它有对CSS的样式。

src/components: This is where all the components you develop will be stored. All the components will have a template, script, and style tags for HTML, JavaScript, and CSS code respectively.
src / components ：将存储您开发的所有组件的位置。所有组件将分别具有HTML，JavaScript和CSS代码的模板，脚本和样式标签。

dist: This is the folder where the built files are stored. To get this folder, run the command npm run build. When this command is run, the code is minified and bundled and stored in the dist folder. The code from this folder is generally deployed to production.
dist ：这是存储构建文件的文件夹。要获取此文件夹，请运行命令npm run build 。运行此命令时，代码将被压缩，打包并存储在dist文件夹中。该文件夹中的代码通常部署到生产环境中。

创建您的第一个组件 (Create Your First Component)

Create a file called as First.vue inside src/components. This file will have HTML, JavaScript, and CSS. Let's add them one by one. All the code under this section belongs to First.vue file. First.vue will be our Vue Component

在src / components中创建一个名为First.vue的文件。该文件将具有HTML，JavaScript和CSS。让我们一一添加。本节下的所有代码都属于First.vue文件。 First.vue将成为我们的Vue组件

CSS (CSS)

This is basic CSS. The parameter scoped in <style scoped> means that the CSS applies to this component only.

这是基本CSS。该参数范围的中<style scoped>装置，该CSS仅适用于该组件。

JavaScript (JavaScript)

name parameter indicates the name of the component which is First.

name参数表示组件的名称，即First 。

props parameter indicates the input to this component. Here we will have one input called as msg which is of type String.

props参数指示此组件的输入。在这里，我们将有一个称为msg的输入，其类型为String。

HTML (HTML)

{

{msg}} is the way in which the input parameter to the Vue Component can be accessed in the HTML code.

{

{msg}}是可以在HTML代码中访问Vue组件的输入参数的方式。

第一部分的完整代码 (Complete Code for First Component)

This is the content of the file First.vue:

这是文件First.vue的内容：

Great, the component is now created! 😃

太好了，组件现已创建！ 😃

Run the Application now using npm run serve and you will see the below screen:

现在使用npm run serve运行应用程序，您将看到以下屏幕：

Wait a minute, isn’t this the same output as before. Where is the component we just created?

请稍等，这与以前的输出不同。我们刚刚创建的组件在哪里？

The thing is, we created the component but we never used it anywhere. Let’s now use this component.

事实是，我们创建了组件，但从未在任何地方使用过。现在让我们使用这个组件。

使用组件 (Using the Component)

Let's add this component to the main App component. Here is the updated code for App.vue:

让我们将此组件添加到主要的App组件中。这是App.vue的更新代码：

First the component needs to be imported into the App component. This is done with the command import First from ‘./components/First.vue’
首先，该组件需要导入到App组件中。这是通过命令import First from './components/First.vue'

Next, in JavaScript, we need to mention that the App component will be using the First Component. This is done by the code snippet components: {First}
接下来，在JavaScript中，我们需要提到App组件将使用First Component。这是由代码段components: {First}

Finally, we need to use the First component in the App component. This is done in the HTML template using the code snippet <First msg=”First Component”/>
最后，我们需要在App组件中使用First组件。这是在HTML模板中使用代码段<First msg=”First Component”/>

Here msg is the input parameter of the First Component and the Value of msg is being sent from the App Component
这里msg是第一个组件的输入参数，并且msg的值是从App组件发送的

Now run the application using npm run serve and you will see the below output:

现在使用npm run serve运行应用程序，您将看到以下输出：

码 (Code)

to get the code shown here from the GitHub repository. The GitHub repo has the instructions on cloning and running the code.

，从GitHub存储库中获取此处显示的代码。 GitHub存储库包含有关克隆和运行代码的说明。

to see how the application looks. It has been deployed using Github pages.

查看应用程序的外观。它已经使用Github页面进行了部署。

恭喜😃 (Congratulations 😃)

Now you have successfully built your first Vue.js App. You’ve also learned how to create a very simple component. In my next post on Vue.js, I will cover more concepts. Stay tuned!

现在，您已经成功构建了第一个Vue.js应用程序。您还学习了如何创建一个非常简单的组件。在我的下一篇关于Vue.js的文章中，我将介绍更多概念。敬请关注！