本文主要介绍关于Vue入门的相关信息，是一个超全的Vue入门教程。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。

目录

前言学习项目代码详细说明运行项目摘要

序

近年来，新建项目前端开发发展迅速。现在学前端已经不像以前那样只学一个语法就够了。它已经是一种编程技术了。他们有自己独立的类似于Main function的入口，有像MVC一样标准化的层次结构，有自己发布打包程序的开发工具，甚至独立连接数据库。当然，利弊共存，不能像其他语言一样在断点处进行调试，这就导致，它的上下文更难捕捉，就像古代的代码开发一样，但是已经可以称得上是一种编程技术了，所以学一门前端开发已经是一件很有意义的事情了。

先安装Nodejs，然后我们一起学习使用Vue。

Vue是一个前端框架。Nodejs安装完成后，可以使用Npm命令直接下载Vue。

打开cmd窗口，依次输入以下命令：

npm i vue -g

npm i vue-cli -g

注意：输入【npm i vue -g】下载vue，尽量使用-g，因为vue中有些文件可以是以vue开头的命令行，而-g是下载到环境变量配置的路径地址，所以如果在这里下载，那么以vue开头的命令可以直接在cmd窗口使用，否则需要重新配置环境变量，添加当前下载目录。

下载vue后，我们新建一个文件夹，然后打开cmd跳转到目录，比如[cd/d F:\Nodejs2]，然后使用Vue开头的命令创建一个项目。在CMD窗口中输入以下命令：

vue init webpack我的项目

输入命令后，会提示我们配置项目信息。您可以随时按enter键使用默认配置，然后等待创建项目。

注：进入vue init webpack my-project后，不要切换窗口，只要一直按Enter键，就可以创建了。如果切换窗口，在切换回当前cmd窗口后，有时不能直接按enter键进入，需要操作才能进入，比如先按上下左右键。

项目创建完成后，会得到如下界面内容。

创建项目后，我们将在目录中有一个额外的文件夹-—my-project。

然后我们通过CMD命令跳转到项目目录【cd/d F:\Nodejs2\my-project】，然后运行npm install进行初始化。

npm安装

最后，我们输入命令npm run dev，格式如下：

然后打开浏览器，输入http://localhost:8080。vue项目成功运行，如下所示：

注：Vue附带了类似server.js的配置，因此在运行npm run dev命令后，将会启动一个服务器。

学习项目

新安装的VSCode需要禁用JS-CS-html格式化器插件，否则代码保存时会自动格式化，然后html代码就完全乱了。通过VisualStudioCode打开新项目。

方法：ctrl shift X调用扩展，搜索JS-CS-HTML格式化程序，然后禁用它，然后重新启动它。

新的项目结构如下：

下表描述了该结构：

文件夹/文件

形容

建设

项目建设相关代码(webpack)

配置

配置目录，包括端口号等。新手可以用默认的。

节点_模块

npm加载的项目依赖模块

科学研究委员会

这里是我们要开发的目录，基本上所有要做的事情都在这个目录里。它包含几个目录和文件。

静电

静态资源目录，如图片、字体等。

试验

可以删除初始测试目录。其他单据

这是一些配置文件，包括语法配置，git配置等。

index.html

这是一个模板文件，也是Main.js的显示页面，也可以理解为Index.html的ViewModel是Main.js，main.js是项目启动的入口。Main.js会在项目启动时读取这个页面，然后将当前显示的vue文件渲染到这个页面中。类似于MVC中layout.cshtml文件的作用。

package.json

项目配置文件。

README.md

项目描述文件，降价格式

src核心

Src是我们编写代码的核心文件，其内容如下：

资产：放置一些图片，如logo等。

组件：目录下有一个组件文件，不需要。

App.vue:项目入口文件。我们也可以不使用组件目录，直接在这里编写组件。

Main.js:项目的核心文件。

代码的详细解释

Main.js是项目的入口，类似于其他语言的Main函数，代码如下：main.js。

从“Vue”//import Vue . js文件导入Vue

从'导入。/app '//导入当前目录下的App.vue文件。[./]指的是当前目录，而[。vue]是隐藏的。

从'导入路由器。/router'//导入当前目录下router文件夹下的Index.js文件。

vue . config . production tip=false//在调试期间阻止一些控制台日志内容

/* eslint-禁用no-new */

新Vue({

埃尔：' #app '，

Router，//指定路由的js对象

组件：{App }，//加载上面导入的组件。

模板：' App/'//选择一个组件来替换index.html中的div id='app'/div。我们这里的组件导入的App组件相当于在初始化的时候指定了显示组件。注册Vue组件后，您可以使用标记名/标记名模式来使用该组件。

})

import

导入类似于其他语言的导入命名空间或包，主要用于导入js文件和vue文件。

如果导入了js文件，将鼠标放在引用上，会显示具体的引用路径，如下图所示：

new Vue

这一段new Vue就是创建一个js的Vue对象。此对象的构造函数接受一个对象。这里，传递了一个匿名对象。我们可以看到new Vue后面的括号[(]后面是一对花括号[{]。然后，在这个对象中，有几个属性需要初始化。

El: Estimation是element的缩写，表示受Vue约束的元素。

Router:Router是我们上面介绍的router文件夹下的Index.js文件。用以下代码打开文件：

从“vue”导入Vue

从“vue路由器”导入路由器

从“@/components/HelloWorld”导入HelloWorld

Vue.use(路由器)

导出默认新路由器({

路线：[

{

路径：“/”，

名称：“HelloWorld”，

组件：HelloWorld

}

]

})

如您所见，代码中打开了一个默认的路由器类型对象。该对象在vue-router中定义，用于定义页面跳转路由。在这里，路径HelloWorld被定义为导入/components/HelloWorld.vue文件。

Ps:export类似于其他语言中的public，即公开这个js文件的某个对象或函数，export default就是默认公开的那个，这样当其他js文件使用import导入这个js文件时，可以省略指定对象的代码。这是一种非常原始的编程风格，你仍然需要适应它。

App.Vue

App。Vue是Main.js默认加载的模块，代码如下：

模板

div id='应用程序'

h2Kiba518/h2

路由器-视图/

/div

/模板

脚本

导出默认值{

名称：“应用程序”

}

/脚本

风格

#app {

字体系列：“Avenir”，Helvetica，Arial，无衬线；

-webkit-font-smoothing:抗锯齿；

-moz-osx-font-smoothing:灰度；

文本对齐：居中；

颜色：# 2c3e50

边距-顶部：60px

}

/风格

这个主要用来配置路由视图——，其他样式暂时可以忽略。

可以看到，我们已经在一个div中配置了路由器视图，并将其放在一个H2下，因此我们的H2标签将始终位于路由器视图上方。

运行项目

我们对App做了简单的修改。Vue和HelloWorld.vue，然后我们不需要重启或者编译，只需要切换回之前的网页——http://localhost:8080。

如上图所示，我们得到了修改后的页面。

至此，已经介绍了Vue的基本用法。

总结

关于Vue入门指导的这篇文章到此结束。更多相关的Vue入门指导，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。