本文主要介绍关于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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。