「Vue|网页开发|前端开发」01 快速入门:用vue-cli快速写一个Vue的HelloWorld项目

本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。

文章目录

  • 一、准备工作:安装node.js
  • 二、项目搭建
    • 创建项目目录
    • 全局安装vue-cli
    • 使用Webpack初始化项目
    • 启动项目
    • 学会如何修改页面内容
      • 网页内容是如何展示出来的
        • 方法一:搜索关键内容
        • 方法二:看目录

一、准备工作:安装node.js

Windows系统的node.js安装十分简易,没有环境安装经验的伙伴可以参考文章:Windows系统下安装node.js

二、项目搭建

创建项目目录

我们需要先创建一个用于放置项目文件的目录,之后该项目相关的命令操作都需要在该路径下执行。我们新建一个hellovue的目录,然后进入到该目录,命令行路径提示如下:C:\hellovue>

全局安装vue-cli

  • 运行命令:npm install --global vue-cli
  • 安装完毕后,运行命令:vue -V验证安装情况,如果输出版本号,则说明安装成狗

使用Webpack初始化项目

Webpack是一个模块打包器。 它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。
vue-cli可以使用webpack模板对项目进行初始化,即生成webpack模板的项目初始代码文件。
可以运行命令:vue init webpack hellovue ,然后根据提示填写项目基本信息以及相关工具配置。
在这里插入图片描述

各个选项的含义如下:

选项意思建议
Project name项目名称起一个你喜欢的项目名称即可
Proiect description项目描述描述一下项目是什么应用即可;练手项目可以直接默认回车
Author作者练手项目写自己即可;业务项目写团队名或具体成员名称
Vue build项目构建模式回车选择默认方式即可
Install vue-router项目是否安装vue路由选择yes
Use ESLint to lint your code是否选择ESLint开发验证功能建议选择No,否则可能因为格式检查报错导致代码无法运行
Set up unit tests是否开启单元测试选择yes,项目后期越写越完善肯定需要测试来保证功能和效率
Pick a test runner选择测试方式默认Jtest即可
Setup e2e tests with Nightwatch是否开启e2e测试建议选择no
Should we runnpm install for you after the project has been created项目初始化后是否选择指定的包管理工具自动下载项目所需要的包建议选择 Yes.use NPM

启动项目

初始化结束之后,会有如下输出:

在这里插入图片描述
上面的输出已经提示我们,如果我们要启动项目,需要运行两个命令:

  • cd hellovue:进到我们刚才新建并且初始化的子项目中
  • npm run dev:dev模式运行项目(开发模式,用于开发者开发和测试)

运行后会有如下提示:
在这里插入图片描述
根据输出,我们的项目已经运行起来了,浏览器访问http://localhost:8080即可以到看到了。于是 我们浏览器访问指定地址后可以看到如下页面:
在这里插入图片描述

学会如何修改页面内容

网页内容是如何展示出来的

我们要修改网页内容,就要知道网页内容是如何展示出来的。

首先用你喜欢的编辑器打开项目(我个人偏爱并强推VS Code),可以看到如下右侧项目代码文件结构:
在这里插入图片描述

如果过了解过网页开发的基础知识,会知道我们看到的网页都是html,然后通过cssjshtml上添加样式以及交互效果。所以我们可以点开项目根目录的index.html,看到代码内容如下:
在这里插入图片描述
index.html内容中的<title>与我们看到的页面tab名称是对应的,说明我们看到的确实是这个html里面的内容。但是<body>标签中并没有内容,那么我们在页面上看到的vue图片、文字和链接是哪来的呢?

这里提两种探索的方法

方法一:搜索关键内容

在这里插入图片描述
我们看到页面有三个文本,所以我们可以直接用IDE搜索这三条文本所在位置,如下:
在这里插入图片描述我们尝试修改一下找到的HelloWolrd.vue中的Welcom to Your Vue.js App,改成Hello Vue World!并保存,然后刷新浏览器查看页面是否发生变化,可以看到页面如下:
在这里插入图片描述页面内容确实跟预期一样发生了变化。再去看HelloWorld.vue文件中的其他内容,可以看到浏览器页面里展示的其他内容也都在这个代码文件中。

所以我们可以确定,如果我们想修改页面内容只需要修改HelloWorld.vue即可

同样地,当我们想进一步去探索vue是如何知道要把HelloWorld.vue的内容渲染到浏览器页面上的,我们就可以搜索HelloWorld.vue,看哪里用到了这个文件。由于HelloWorld.vue搜索结果为空,于是我们改成搜索HelloWorld,搜索结果如下:

在这里插入图片描述我们可以看到,这是在一个router目录下index.js文件中,根据名称可以知道,router控制路由(即浏览器地址到代码文件的对应), index.js是入口文件。代码中写明对于path/的,对应到的导入的HelloWorld代码,这意味着对于地址http://localhost:8080/#/#后面是/),会使用/对应的HelloWorld进行页面渲染。

方法二:看目录

使用标准化工具来组织代码的好处是,文件的位置和命令都有迹可循。我们看到根目录下index.html之外的文件名字都表明这些文件是一些配置相关的文件。而其他文件夹根据名字可以知道:

  • build是写好代码之后构建完毕用于部署到服务器上的文件夹
  • config是用来放配置的目录
  • node_modules存放项目相关的依赖包
  • srcsource的缩写,所以是存放源代码的地方
  • static是静态的意思,该目录是用来存放一些静态文件的地方
  • test是放代码测试文件的地方

所以如果我们要查找页面的内容(涉及代码,属于可改变的内容而非静态文件),应该在src目录下找,打开src目录,可以看到三个目录和两个文件。一般来说,直接存放在目录下的,是类似于"程序入口"一样的文件。根据文件名称,我们班先尝试打开main.js,查看内容
在这里插入图片描述
可以看到main.js里面import 导入了一些东西,虽然我们不知道具体是什么,但是我们的代码是标准化的,所以根据命名,可以推测:

  • App作为appliaction(应用)的简写,应该代表跟应用相关的内容;
  • router是路由器的意思,所以应该是控制网页路由的部分。路由就是道路向导的意思,指的是告诉浏览器地址栏输入的地址对应着代码中哪一部分的内容。
  • Vue是我们用的前端框架的名称。前端框架就是生成页面内容的工具,所以这里使用了vue(),并且传入了Approuter这两部分内容,以及我们看到了#app这个用法,app是我们在index.html代码中看到的<body id='app'></body>的id,所以这里应该是定位到了index.html的body位置

根据以上三点,我们可以基本确定,我们在浏览器中看到的内容就是从这里传到index.html并被浏览器展示出来的。

进一步,我们查看App的内容,看页面的图片和文字是如何引入到页面的,打开App.vue之后,可以看到内容如下:

在这里插入图片描述我们看到光标所在位置有一个<img>引用了一个logo.png,这就是页面展示的vuelogo图片来源。至于logo图片下面的文本和跳转链接没有看到具体的代码,只有一行<router-view/>,所以考虑这些内容是由这行代码处理的。

接下来我们查资料可以知道(看着router-view愣猜只能知道是跟路由和展示有关,其他的就得靠查资料补充了),在main.js中传入的router会把<router-view>替换成与path值对应的components

打开router目录下的index.js,这里我们浏览器输入的path/,在index.js中该路径对应的componentsHelloWorld(由HelloWorld.vue导入)
,如下:
在这里插入图片描述于是我们果断打开HelloWorld.vue,可以看到浏览器页面展示的内容基本都在HelloWorld里面了:
在这里插入图片描述但是我们看到代码中的<h1>内容不是我们在浏览器看到的Welcome to Your Vue.js App而是{{ msg }},可以推测这里是一个变量引用的方式,msg的值应该是Welcome to Your Vue.js App,所以我们搜索找到msg位置如下:
在这里插入图片描述如我们所料,msg的值是Welcome to Your Vue.js App,于是我们将值改成Hello Vue World!,并刷新页面,可以看到页面内容如下:
在这里插入图片描述页面展示的标题文本变成了我们修改后的内容。
我们的推测都得到了验证,我们也明白了vue是如何将代码渲染到浏览器的。

至此,我们通过一个HelloWorld项目掌握了vue如何将浏览器地址对应到具体代码,标准化的代码文件结构以及如何修改代码使得页面展示我们希望的内容。
vue入门,(●ˇ∀ˇ●) 达成✔

写文不易,如果对你有帮助的话,来一波点赞、收藏、关注吧~👇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/84938.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot---内置Tomcat 配置和切换

&#x1f600;前言 本篇博文是关于内置Tomcat 配置和切换&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x…

SVM详解

公式太多了&#xff0c;就用图片用笔记呈现&#xff0c;SVM虽然算法本质一目了然&#xff0c;但其中用到的数学推导还是挺多的&#xff0c;其中拉格朗日约束关于α>0这块证明我看了很长时间&#xff0c;到底是因为悟性不够。对偶问题也是&#xff0c;用了一个简单的例子才明…

React请求机制优化思路 | 京东云技术团队

说起数据加载的机制&#xff0c;有一个绕不开的话题就是前端性能&#xff0c;很多电商门户的首页其实都会做一些垂直的定制优化&#xff0c;比如让请求在页面最早加载&#xff0c;或者在前一个页面就进行预加载等等。随着react18的发布&#xff0c;请求机制这一块也是被不断谈起…

3 个 ChatGPT 插件您需要立即下载3 ChatGPT Extensions You need to Download Immediately

在16世纪&#xff0c;西班牙探险家皮萨罗带领约200名西班牙士兵和37匹马进入了印加帝国。尽管印加帝国的军队数量达到了数万&#xff0c;其中包括5,000名精锐步兵和3,000名弓箭手&#xff0c;他们装备有大刀、长矛和弓箭等传统武器。但皮萨罗的军队中有100名火枪手&#xff0c;…

eDP接口的PCB布局布线要求

eDP接口是一种基于DisplayPort架构和协议的一种全数字化接口&#xff0c;传递高分辨率信号只需要较简单的连接器以及较少的引脚就可以实现&#xff0c;同时还能够实现多数据同时传输。 图1 EDP接口 eDP接口的PCB设计布局布线注意事项&#xff1a; 1、远离干扰源&#xff0c;防…

数据分析15——office中的Excel基础技术汇总

0、前言&#xff1a; 这部分总结就是总结每个基础技术的定义&#xff0c;在了解基础技术名称和定义后&#xff0c;方便对相关技术进行检索学习。笔记不会详细到所有操作都说明&#xff0c;但会把基础操作的名称及作用说明&#xff0c;可自行检索。本文对于大部分读者有以下作用…

html动态爱心代码【一】(附源码)

前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;表白等场景&#xff0c;可直接使用。 效果演示 文案修改 var loverNam…

windows下, artemis学习

1. download artemis from apache ActiveMQhttps://activemq.apache.org/components/artemis/download/2. 解压缩到 C:/software/apache-artemis-2.30.0/ 2. 进入到cmd&#xff0c; 执行 C:\software\apache-artemis-2.30.0\bin>artemis create C:/software/apache-artem…

数据结构—树表的查找

7.3树表的查找 ​ 当表插入、删除操作频繁时&#xff0c;为维护表的有序表&#xff0c;需要移动表中很多记录。 ​ 改用动态查找表——几种特殊的树 ​ 表结构在查找过程中动态生成 ​ 对于给定值key ​ 若表中存在&#xff0c;则成功返回&#xff1b; ​ 否则&#xff0…

[C++ 网络协议编程] 域名及网络地址

1. DNS服务器 DNS&#xff08;Domain Name System&#xff09;&#xff1a;是对IP地址和域名&#xff08;如:www.baidu.com等&#xff09;进行相互转换的系统&#xff0c;其核心是DNS服务器。 我们输入的www.baidu.com是域名&#xff0c;是一种虚拟地址&#xff0c;而非实际地…

JVM详解

文章目录 一、JVM 执行流程二、类加载三、双亲委派模型四、垃圾回收机制&#xff08;GC&#xff09; 一、JVM 执行流程 程序在执行之前先要把java代码转换成字节码&#xff08;class文件&#xff09;&#xff0c;JVM 首先需要把字节码通过一定的方式 类加载器&#xff08;Clas…

【nodejs】用Node.js实现简单的壁纸网站爬虫

1. 简介 在这个博客中&#xff0c;我们将学习如何使用Node.js编写一个简单的爬虫来从壁纸网站获取图片并将其下载到本地。我们将使用Axios和Cheerio库来处理HTTP请求和HTML解析。 2. 设置项目 首先&#xff0c;确保你已经安装了Node.js环境。然后&#xff0c;我们将创建一个…

【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

一、工具的选择 近期想将vuejselementUI的项目升级为vue3tselementUI plus&#xff0c;以获得更好的开发体验&#xff0c;并且vue3也显著提高了性能&#xff0c;所以在此记录一下升级的过程对于一个正在使用的项目手工替换肯定不是个可实现的解决方案&#xff0c;更优方案是基于…

大数据 算法

什么是大数据 大数据是指数据量巨大、类型繁多、处理速度快的数据集合。这些数据集合通常包括结构化数据&#xff08;如数据库中的表格数据&#xff09;、半结构化数据&#xff08;如XML文件&#xff09;和非结构化数据&#xff08;如文本、音频和视频文件&#xff09;。大数据…

国内常见的几款可视化Web组态软件

组态软件是一种用于控制和监控各种设备的软件&#xff0c;也是指在自动控制系统监控层一级的软件平台和开发环境。这类软件实际上也是一种通过灵活的组态方式&#xff0c;为用户提供快速构建工业自动控制系统监控功能的、通用层次的软件工具。通常用于工业控制&#xff0c;自动…

python 打印人口分布金字塔图

背景 今天介绍一个不使用 matplot&#xff0c;通过DebugInfo模块打印人口金字塔图的方法。 引入模块 pip install DebugInfo打印人口金字塔图 下面的代码构建了两个人口数据&#xff08;仅做功能演示&#xff0c;不承诺任何参考价值&#xff09;&#xff0c;男性人口和女性…

FirmAE 工具安装(解决克隆失败 网络问题解决)

FirmAE官方推荐使用Ubuntu 18.04系统进行安装部署&#xff0c;FirmAE工具的安装部署十分简单&#xff0c;只需要拉取工具仓库后执行安装脚本即可。 首先运行git clone --recursive https://kgithub.com/pr0v3rbs/FirmAE命令 拉取FirmAE工具仓库&#xff0c;因为网络的问题&…

交叉熵--损失函数

目录 交叉熵&#xff08;Cross Entropy&#xff09; 【预备知识】 【信息量】 【信息熵】 【相对熵】 【交叉熵】 交叉熵&#xff08;Cross Entropy&#xff09; 是Shannon信息论中一个重要概念&#xff0c; 主要用于度量两个概率分布间的差异性信息。 语言模型的性能…

Java之继承详解二

3.7 方法重写 3.7.1 概念 方法重写 &#xff1a;子类中出现与父类一模一样的方法时&#xff08;返回值类型&#xff0c;方法名和参数列表都相同&#xff09;&#xff0c;会出现覆盖效果&#xff0c;也称为重写或者复写。声明不变&#xff0c;重新实现。 3.7.2 使用场景与案例…

【Gitee提交pr】

Gitee提交pr 什么是pr怎样提交一个pr嘞&#xff1f; 什么是pr pr:指的是将自己的修改从自己的账号仓库dev下提交到官方账号仓库master下&#xff1b; 通俗来讲就是Gitee线上有属于自己的分支&#xff0c;然后本地在自己地分支修改完代码之后&#xff0c;提交到自己的线上分支&a…