vue教程菜鸟教程,vue详细教程

vue教程菜鸟教程,vue详细教程,一篇超完整的Vue新手入门指导教程

本文主要介绍关于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:Nodejs2my-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入门指导,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

vue教程菜鸟教程,vue详细教程