一篇超完整的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 router安装及使用方法解析
Dec 02 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
用cookies来跟踪识别用户
2006/10/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript闭包入门示例
2014/04/30 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
Python简明入门教程
2015/08/04 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python 发送邮件方法总结
2020/08/10 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
作弊检讨书1000字
2014/02/01 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
会计试用期自我评价
2015/03/10 职场文书