前端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.rhkb.cn/news/359911.html

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

相关文章

19、删除链表的倒数第

1、题目描述 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例 2&#xff1a; 输入&#xff1a;head [1], n 1 输出&#xff1a;[]示例 …

多商户零售外卖超市外卖商品系统源码

构建你的数字化零售王国 一、引言&#xff1a;数字化零售的崛起 在数字化浪潮的推动下&#xff0c;零售业务正经历着前所未有的变革。多商户零售外卖超市商品系统源码应运而生&#xff0c;为商户们提供了一个全新的数字化零售解决方案。通过该系统源码&#xff0c;商户们可以…

基于Openmv的追小球的云台

介绍 在这篇文章&#xff0c;我会先介绍需要用到且需要注意的函数&#xff0c;之后再给出整体代码 在追小球的云台中&#xff0c;比较重要的部分就是云台&#xff08;实质上就是舵机&#xff09;的控制以及对识别的色块位置进行处理得到相应信息后控制云台进行运动 1、舵机模…

qt.qpa.xcb: could not connect to display问题解决

1、问题描述 以服务器pi5作为远程解释器&#xff0c;本地win11使用vscode远程调试视觉时报错如下&#xff1a; qt.qpa.xcb: could not connect to display qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "xxxxx" even though it was …

Docker Compose--安装Nginx--方法/实例

原文网址&#xff1a;Docker Compose--安装Nginx--方法/实例_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Docker Compose如何安装Nginx。 目录结构 ├── config │ ├── cert │ │ ├── xxx_bundle.pem │ │ └── xxx.key │ ├── conf.d │ …

JAVA笔试题目

1.标识符的使用 2.类名和java文件名的关系 3.java数据类型关系

第3章 小功能大用处-事务与Lua

为了保证多条命令组合的原子性&#xff0c;Redis提供了简单的事务功能以及集成Lua脚本来解决这个问题。 首先简单介绍Redis中事务的使用方法以及它的局限性&#xff0c;之后重点介绍Lua语言的基本使用方法&#xff0c;以及如何将Redis和Lua脚本进行集成&#xff0c;最后给出Red…

React+TS 从零开始教程(3):useState

源码链接&#xff1a;下载 在开始今天的内容之前呢&#xff0c;我们需要先看一个上一节遗留的问题&#xff0c;就是给属性设置默认值。 我们不难发现&#xff0c;这个defaultProps已经被废弃了&#xff0c;说明官方并不推荐这样做。其实&#xff0c;这个写法是之前类组件的时候…

AI金融投资:批量下载巨潮资讯基金招募说明书

打开巨潮资讯的基金招募说明书页面&#xff1a; http://www.cninfo.com.cn/new/fulltextSearch/full?searchkey%E5%B0%81%E9%97%AD%E5%BC%8F%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD%E8%AF%81%E5%88%B8%E6%8A%95%E8%B5%84%E5%9F%BA%E9%87%91%E6%8B%9B%E5%8B%9F%E8%AF%B4%E6%98%…

计算机网络 访问控制列表以及NAT

一、理论知识 1. 单臂路由 单臂路由是一种在路由器上配置多个子接口的方法&#xff0c;每个子接口代表不同的 VLAN&#xff0c;用于在一个物理接口上支持多 VLAN 通信。此方法使得不同 VLAN 之间可以通过路由器进行通信。 2. NAT (网络地址转换) NAT 是一种在私有网络和公共…

可变分区管理 分区分配算法

First Fit Algorithm Best Fit Algorithm FFA&#xff1a;按照起始地址从小到大&#xff08;本题为分区编号&#xff09;找到第一个能装下进程的起始地址填入第二个表 此时 原表中将起始地址进程大小 分区大小-进程大小 如此继续 BFA&#xff1a;按分区大小排序 从小到大 找到…

【ONLYOFFICE震撼8.1】ONLYOFFICE8.1版本桌面编辑器测评

随着远程工作的普及和数字化办公的发展&#xff0c;越来越多的人开始寻找一款具有强大功能和便捷使用的办公软件。在这个时候&#xff0c;ONLYOFFICE 8.1应运而生&#xff0c;成为了许多用户的新选择。ONLYOFFICE 8.1是一种办公套件软件&#xff0c;它提供了文档处理、电子表格…

面试-细聊synchronized

1.线程安全问题的主要诱因&#xff1a; 存在多条共享数据(临界资源) 存在多条线程共同操作这些共享数据 解决问题的根本方法&#xff1a; 同一时刻有且仅有一个线程在操作共享数据&#xff0c;其他线程必须等到该线程处理完数据后在对共享数据进行操作。 2.synchroized锁 分…

使用Python Selenium,动态网页不再是难题!

目录 1、直接执行JS代码 🌐 1.1 execute_script基础用法 1.2 带参数执行JS函数 1.3 获取执行结果 2、使用execute_async_script异步执行 🔄 2.1 适用场景分析 2.2 实现异步操作示例 2.3 错误处理与调试技巧 3、JS与页面元素交互 👤 3.1 修改DOM属性 3.2 触发事…

中国智能工厂自动化集成商100强:广东23家,江苏20家,上海浙江紧随其后

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 更多的海量【智能制造】相关资料&#xff0c;请到智能制造online知识星球自行下载。 在数字化、智能化的浪潮中&#xff0c;中国智能工厂自动化集…

内存马查杀工具使用

内存马查杀工具使用 环境搭建 找一台centos7 在上面搭建tomcat yum install -y tomcat tomcat-webapps tomcat-admin-webapps systemctl start tomcat安装arthas wget https://github.com/alibaba/arthas/releases/download/arthas-all-3.6.6/arthas-bin.zip unzip arthas-b…

收银系统源码-千呼新零售2.0【线上营销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货等连锁店使用。 详细介绍请查看&a…

JupyterLab使用指南(三):JupyterLab的Cell详细介绍

JupyterLab Cell 使用教程 JupyterLab 的 cell 是一种强大的工具&#xff0c;提供了编写、执行、展示和记录的全方位支持&#xff0c;使得复杂的计算任务变得简单直观。通过熟练掌握 cell 的各种操作和快捷键&#xff0c;用户可以显著提高工作效率&#xff0c;专注于解决实际问…

ChatGPT API教程在线对接OpenAI APIKey技术教程

一、OpenAI基本库介绍 您可以通过 HTTP 请求与 API 进行交互&#xff0c;这可以通过任何编程语言实现。我们提供官方的 Python 绑定、官方的 Node.js 库&#xff0c;以及由社区维护的库。 要安装官方的 Python 绑定&#xff0c;请运行以下命令&#xff1a; pip install open…

入门Rabbitmq

1、什么是消息队列 消息队列&#xff1a;应用之间传递消息的方式&#xff0c;允许应用程序异步发送和接收消息&#xff0c;不需要连接对方 消息&#xff1a;文本字符串&#xff0c;对象.... 队列&#xff1a;存储数据。先进先出 2、应用场景 ①库存系统挂掉之后 MQ会等待&…