前端vue-cli相关知识与搭建过程(项目创建,组件路由)very 详细

一.关于vue-cli

1.什么是vue

Vue (读音 /vju ː /,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue
的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一,和 Angular.js、React.js 一起,并成为前端三
大主流框架! vue访问官网: https://v2.cn.vuejs.org/     
 如下:

2.未使用vue前前端如何写

未使用vue前要写前端必须通过对一个个的标签进行操作,html是前端主体,css负责修饰html,javasqrt负责对html的标签产生的动作,如点击标签,按钮等进行操作,javasqrt操作标签时都要拿到,频繁的对标签进行操作导致书写麻烦,代码量大,所以就产生了vue(框架)。
如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="css/index1.css" rel="stylesheet"/><script>function test(){var div=document.getElementById("div1");div.style.backgroundColor="#FFFFFF";}function test1(){var div1=document.getElementById("div1");div1.style.backgroundColor="green";}</script></head><body><input type="button" value="隐藏" class="bottom" onclick="test()" /><input type="button" value="显示" class="bottom1" onclick="test1()"/><div class="main"  style="" id="div1"></div></body>
</html>

3.传统的vue(框架)

传统的vue比起未使用vue前大大简化了操作,首先最直观的好处就是不需要在对标签操作时先拿到标签只需要直接操作数据即可,大大提高了程序的运行效率,其次体积小 使用压缩后的,并且实现了双向数据绑定,简化 Dom 操作,生态丰富、学习成本低 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件!来即用实现 快速开发。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/v2.6.10/vue.min.js"></script></head><body><!-- {{ message }}后面可以跟数据 --><!-- 	v-text作用是设置标签的文本内容默认写法会替换全部内容,使用差值表达式可以替换指定内容内部支持写表达式<p v-text="message">非凡英才</p><p>{{message}}非凡英才</p>v-html作用是设置元素的 innerHTML内容中有 html 结构会被解析为标签内部支持写表达式<p v-html="message">非凡英才</ --><div id="app"><p>{{ message }}aaaaa</p><!-- <p v-text="message"></p><p v-html="message"></p> --><input type="button" value="测试" v-on:click="test1()"/><input type="text" value="测试二" v-model="message"/></div><script>var app = new Vue({el: '#app',data: {message:'<b>Hello</b>',},methods:{test1(){this.message=this.message.split("").reverse("").join("");/* test2(){} */}}})</script></body>
</html>

4.现在的vue-cli

现在的vue-cli对传统的vue实现了进一步的优化,首先传统的vue虽然也不用对标签进行操作,但是每次创建一个项目时要写多个页面时就要创见多个html相当于 每个html都是独立的,为了我们不需要频繁的导入外部依赖与下载,就产生了现在的vue-cli,现在的vue-cli每创建一个项目只有一个html,这就使得我们不需要重复导入依赖文件,与项目有关的依赖文件只需要在这一个html中配置一次即可。如下:

注意使用vue-cli需要有与前端有关的知识

二.vue-cli下载

前言:

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义

好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个

骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;

(1)下载与vue-cli相关的

要使用现在的vue-cli首先需要搭建运行环境,即现在的vue-cli需要在note(前端的运行环境)类似于java中的maven下才能运行,所以首先需要下载note,下载地址:https://nodejs.org/en/download

(1)进入到如下界面

(2)然后完成下载

完成下载后要测试,使用如下命令在命令提示框测试有无问题

(3)出现如上即没问题,接下来就开始创建项目(本人使用HBulider)

如上,选择vue项目(2.6.10),懂3.2.8的也可以选择3.2.8版本的。

创建好后出现如下图项目即可,会自动从本地下载项目需要的依赖文件

(4)删除vue-cli框架中无关的

删除后如图:

接下来点击App.vue进入如下图所示:

删除没用的代码并如下图:

三.vue搭建

关于npm

npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展。npm 是
JavaScript 的包管理工具,也是世界上最大的软件注册表。有超过 60 万个
JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用
其他开发人员共享的代码

(1)创建vue router目录

vue router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

安装

vue-router 是一个插件包,所以我们还是需要用 npm 来进行安装的。
打开命令行工具,进入你的项目目录,输入下面命令。 别忘记非常重要!!!,在配置路由组件之前执行。
npm i vue-router@3.5.3                     
在工程下创建router目录并在此目录下创建index.js文件.如下图

(2)配置组件路由

创建什么页面就在index.js和main.js中配置什么路由相关,如下图我创建了lndex页面,login.vue登录页面和Reg.vue注册页面为例  

(3)使用路由

(4)在 main.js 中配置路由

如图即搭配完毕。

 (5)运行项目

项目的启动与打包等都在此终端中输入,启动指令:npm run serve,打包命令:npm run bulid

或者如图右键项目名称出现如下图在外部命令也可以启动于打包。

出现如图所示即没问题。

结果如图:

点击登录跳转到登陆界面,点击注册跳转到注册界面。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【公开数据集获取】

Open Images Dataset https://www.youtube.com/watch?vdLSFX6Jq-F0

一分钟彻底掌握java泛型

Java中的泛型&#xff08;Generics&#xff09; 在Java中&#xff0c;泛型是JDK 5引入的一个非常重要的特性&#xff0c;它允许你在定义类、接口和方法时使用类型参数&#xff08;type parameters&#xff09;。使用泛型的主要好处是可以提供编译时的类型检查&#xff0c;减少…

【M365运维】Outlook和Teams里不显示用户的组织架构

【问题】 由于一些误操作&#xff0c;把用户账户禁用并重新启用后&#xff0c;发现在Outlook和Teams里无法查看用户的组织结构图了。如下图所示&#xff1a; - 在Outlook 里&#xff0c;用户标签页的组织一直显示“正在加载..."&#xff0c;成员身份也是“找不到任何组。…

【GD32】08 - IIC(以SHT20为例)

GD32中的IIC 今天来了解一下GD32中的硬件IIC&#xff0c;其实我个人是觉得软件IIC比较方便的&#xff0c;不过之前文章里用的都是软件IIC&#xff0c;今天就算是走出自己的舒适圈&#xff0c;我们来了解了解GD32中的硬件IIC。 我这里用的型号是GD32F407&#xff0c;不同型号的…

等保测评初级简答题试题

基本要求&#xff0c;在应用安全层面的访问控制要求中&#xff0c;三级系统较二级系统增加的措施有哪些&#xff1f; 答&#xff1a;三级比二级增加的要求项有&#xff1a; 应提供对重要信息资源设置敏感标记的功能&#xff1b; 应按照安全策略严格控制用户对有敏感标记重要…

策略模式和状态模式

策略模式 在上下文中携带策略接口作为成员变量&#xff0c;在使用上下文之前需要设置策略setStrategy&#xff08;&#xff09;&#xff0c;然后使用策略接口成员变量来进行策略的执行。 步骤1&#xff1a;定义策略接口 // 策略接口 public interface Strategy {int execut…

猎豹WiFi

猎豹WiFi&#xff0c;记得刚安装完就一堆广告弹窗&#xff0c;然后删除了一些东西&#xff0c;不影响开热点的功能。 kwifi.zip - 蓝奏云

干涉阵型成图参数记录【robust】

robust 这个玩意经常忘记&#xff0c;就是取2的时候是更加显示大尺度的结构&#xff0c;取-2更加显示小尺度结果&#xff0c;一般取0就是正常就好了

真正要战胜的,不是困难,是自己

记录一些好的文字&#xff0c;希望可以和大家共勉。 一个人真正的成长&#xff0c;是战胜自己 不知你是否有这样的经历&#xff1a;曾经觉得一道题很难&#xff0c;但解出来后&#xff0c;发现其实并没那么难&#xff1b;曾经觉得一件事是不可能完成的&#xff0c;但历经千辛万…

vitest-前端单元测试

Vitest是一个轻量级、快速且功能强大的测试框架&#xff0c;特别适用于Vite项目&#xff0c;但也可以与其他前端项目&#xff08;如使用webpack构建的项目&#xff09;集成使用。Vitest提供极速的测试体验&#xff0c;并包含一系列用于编写和组织测试用例的API&#xff0c;如de…

vue项目中,pnpm不能用-解决

方法四&#xff1a;解决 PowerShell 执行策略问题 如果你决定继续使用 PowerShell&#xff0c;并且遇到执行策略问题&#xff0c;可以尝试以下方法解决&#xff1a; 永久更改执行策略&#xff1a; 在管理员权限的 PowerShell 中运行以下命令&#xff0c;以永久更改执行策略&am…

【Hive中常见的优化手段----数据采集!Join 优化!Hive索引!数据倾斜!mapreduce本地模式!map和reduce数量调整!】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;我是书生♡&#xff0c;今天主要和大家分享一下Hive中常见的优化手段----数据采集&#xff01;常见的Join 优化有哪几种&#xff01;什么是Hive索引&#xff01;数据怎么发生倾斜&#xff01;什么是mapreduce的本…

力扣每日一题 6/24 模拟 数组 单调栈

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 503.下一个更大元素II 【中等】 题目&#xff1a; 给定一个循环数组 nums…

数据分析师怎么去快速读一本书

背景&#xff1a;优秀的数据分析师怎么去快速读一本书 一本好书的判断依据 1.有没有再次印刷&#xff0c;三次印刷一般是好书 2.作者 快读选书顺序 1.目录->定位这是一本什么书 2.看内容的呈现形式&#xff0c;内容的各部分占比大概是什么类型的信息。 3.去看自己擅长的知…

使用原子子表创建可重用的子组件

原子子表是一个图形对象&#xff0c;可帮助您在Stateflow图表中创建独立的子部件。原子子表允许&#xff1a; 对具有多个状态或层次结构的图表进行微小更改后&#xff0c;模拟速度更快。 在多个图表和模型中重复使用相同的状态或子表。 易于团队开发&#xff0c;适用于在同一图…

在现代多核和多线程环境中,如何优化 C 语言程序以充分利用硬件并行性?

在现代多核和多线程环境中&#xff0c;要优化C语言程序以充分利用硬件并行性&#xff0c;可以考虑以下几点&#xff1a; 并行算法设计&#xff1a;将任务分解为多个独立的子任务&#xff0c;并使用多线程或多进程同时执行这些子任务。这可以通过将问题分解为多个部分&#xff0…

小阿轩yx-MySQL备份与恢复

小阿轩yx-MySQL备份与恢复 企业对信息系统依赖性越来预高&#xff0c;数据库担任着重要角色如果发生意外宕机或数据丢失&#xff0c;损失是非常严重的数据库管理员必须针对具体的业务要求制定详细的数据库备份与灾难恢复策略 对数据库要求高的行业 银行证券电信等 MySQL 数…

PHP的SHA256WithRSA签名和Curl POST请求函数

getCustomerEncryptionKey - 获取加密秘钥 /** * 获取加密秘钥 * param array $params * return string */ public function getCustomerEncryptionKey(array $params): string { //1.ASCII码&#xff08;字典序-升序&#xff09;排序…

Python网络爬虫实战6—下一页,模拟用户点击,切换窗口

【前期提要】感兴趣的可以看看往期文章哈~ Python网络爬虫5-实战网页爬取 Python网络爬虫4-实战爬取pdf Pyhon网络爬虫3-模拟用户点击 Python网络爬虫实战2-下载url下的pdf Python网络爬虫基础1 1.需求背景 针对长虹美菱电器说明书网页形式&#xff0c;编写爬虫代码&#xff…

IO模型简介

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言简介正文实现总结 前言 简介 Java1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O程 序的时候,会面临一些巨大的挑战和困难,主要问题如下…