一篇超完整的Vue新手入门指导教程


Posted in Vue.js onNovember 18, 2020

前言

新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像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是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。

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

vue init webpack my-project

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

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

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

一篇超完整的Vue新手入门指导教程

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

一篇超完整的Vue新手入门指导教程

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

npm install

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

一篇超完整的Vue新手入门指导教程

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

一篇超完整的Vue新手入门指导教程

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

学习项目

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

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

新建项目结构如下图:

一篇超完整的Vue新手入门指导教程

结构描述如下表:

文件夹/文件 描述
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
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文件,则鼠标放到引用上,会显示具体引用路径,如下图:

一篇超完整的Vue新手入门指导教程

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标签就永远会在路由视图上面了。

运行项目

一篇超完整的Vue新手入门指导教程

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

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

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

总结

到此这篇关于Vue入门指导的文章就介绍到这了,更多相关Vue入门指导内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
springboot+vue实现文件上传下载
Nov 17 #Vue.js
You might like
php注销代码(session注销)
2012/05/31 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
原生js实现验证码功能
2017/03/16 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python与php实现分割文件代码
2017/03/06 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python之mock模块基本使用方法详解
2019/06/27 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
销售总监工作职责
2013/11/21 职场文书
设计总监岗位职责
2013/12/07 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
创业的9条正确思考方式
2019/08/26 职场文书