超完整的Vue入门指导

kiba518 脚本之家作者 | kiba518出品 | 脚本之家(ID:jb51net)前言新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函...

 kiba518 脚本之家

作者 | kiba518出品 | 脚本之家(ID:jb51net)前言

新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了。

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

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

打开cmd窗口,依次输入如下命令:

npm i vue -gnpm i vue-cli -g

注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。

下载完Vue后,我们新建一个文件夹,然后打开CMD跳转该目录,如【cd/d F:\Nodejs2】,然后使用vue开头的命令创建一个项目,在cmd窗口输入命令如下:

vue init webpack my-project

输入完命令后,会提示我们配置项目信息,可以一直回车使用默认配置,然后等待项目创建完成。

注:输入vue init webpack my-project后,不要切换窗口,一直回车,就可以创建成了,如果切换窗口了,切换回当前cmd窗口后,回车有时候无法直接输入,需要操作下才能输入,比如先按一下个上下左右键。

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

项目创建完成,我们会在目录下多了一个文件夹—my-project。

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

npm install

最后,我们再输入命令npm run dev,得到窗体如下:

然后打开浏览器,输入http://localhost:8080,vue项目运行成功,如下图:

注:vue自带了一个类似server.js的配置,所以运行npm run dev命令后,会启动一个服务器。

学习项目

刚刚安装的VSCode需要禁用JS-CS-HTML Formatter插件,不然保存代码时会自动格式化了,然后html代码全乱了通过VisualStudioCode将新建的项目打开。

禁用方法:ctrl+shift+X调出扩展,搜索JS-CS-HTML Formatter ,然后禁用,然后重启。

新建项目结构如下图:

结构描述如下表:

文件夹/文件描述
build项目构建(webpack)相关代码
config配置目录,包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件。
static静态资源目录,如图片、字体等。
test初始测试目录,可删除
.其他文件这些是一些配置文件,包括语法配置,git配置等。
index.html这是一个模板文件,同时又是Main.js的展示页面,也可以理解为Index.html的ViewModel是Main.js,Main.js是项目启动的入口。项目启动时Main.js会读取该页面,然后把当前显示的vue文件渲染进该页面。类似于MVC中的layout.cshtml文件的作用。
package.json项目配置文件。
README.md项目的说明文档,markdown 格式

src核心

src是我们代码编写的核心文件,其内容如下:

assets: 放置一些图片,如logo等。

components: 目录里面放了一个组件文件,可以不用。

App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用components 目录。

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

代码详解

Main.js是项目的入口,类似其他语言的Main函数,代码如下:Main.js

import Vue from 'vue'//引入vue.js文件import App from './App'//引入当前目录下的App.vue文件,【./】指当前目录,【.vue】被隐藏了import router from './router'//引入当前目录下router文件夹下的Index.js文件
Vue.config.productionTip = false//屏蔽调试时的一些console日志内容
/* eslint-disable no-new */new Vue({ ?el: '#app', ?router,//指定路由的js对象 ?components: { App },//加载上方导入到组件。 ?template: '<App/>'//选择一个组件去替换index.html 中的<div id="app"></div>。这里使用我们components导入的App组件,相当于指定初始化时的显示组件,Vue组件注册后可以使用<tagName></tagName>的模式来使用组件。})

import

import类似其他语言的引入命名空间或引入包,这里主要是用于引入js文件和vue文件。

如果引入的是js文件,则鼠标放到引用上,会显示具体引用路径,如下图:

new Vue

new Vue这一段是创建一个js的Vue对象,该对象的构造函数,接受一个对象,这里传了一个匿名对象,我们可以看到,new Vue后的圆括号【(】里,跟了一对大括号【{】,然后这个对象里,有几个属性,需要初始化。

el:估计是element的缩写,表示Vue绑定的元素。

router:router是我们上面引入的router文件夹下的Index.js文件,打开文件,代码如下:

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({ ?routes: [ ? ?{ ? ? ?path: '/', ? ? ?name: 'HelloWorld', ? ? ?component: HelloWorld ? ?} ?]})

可以看到,代码中开放了一个默认的Router类型的对象,这个对象是vue-router中定义的,用于定义页面跳转路由,这里定义了路径HelloWorld对应导入/components/HelloWorld.vue文件。

ps:export类似于其他语言的public,就是公开该js文件的某个对象或函数,export default就是默认公开的那一个,这样其他js文件使用import导入该js文件时,就可以省略指定对象这几个代码,这种是一个很原始的程序设计风格,大家还需要适应。

App.Vue

App.Vue是Main.js默认加载的模块,其代码如下:

<template> ?<div id="app"> ? ?<h2>Kiba518</h2> ? ?<router-view/> ?</div></template>
<script>export default { ?name: 'App'}</script>
<style>#app { ?font-family: 'Avenir', Helvetica, Arial, sans-serif; ?-webkit-font-smoothing: antialiased; ?-moz-osx-font-smoothing: grayscale; ?text-align: center; ?color: #2c3e50; ?margin-top: 60px;}</style>

这里主要是用于配置路由视图—— ,其他的样式我们可以暂时忽略。

可以看到我们把路由视图(router-view)配置在了一个div中,并且还放在了一个H2下面,这样,我们的这个H2标签就永远会在路由视图上面了。

运行项目

我们对App.Vue和HelloWorld.vue进行了简单修改,然后不用重启,不用编译,只需要重新切换回刚刚的那个网页——http://localhost:8080。

如上图所示,我们得到了修改页面。


到此Vue的基本使用已经介绍完了。

本文作者:kiba518,全栈.Net软件工程师

声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。


本文标题为:超完整的Vue入门指导

基础教程推荐