当前位置: 首页 > news >正文

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录

  • Vue-cli
  • Vue项目-创建
  • Vue项目-目录结构
  • Vue项目-启动
  • Vue项目-配置端口
  • Vue项目开发流程


Vue-cli

介绍:Vue-cli 是 Vue 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模版
在这里插入图片描述

  • 安装 NodeJS
  • 安装 Vue-cli
npm install -g @vue/cli

Vue项目-创建

在这里插入图片描述

图形化界面

  • 在命令行输入命令 vue ui 打开图形化构建
    点击创建——再次创建新项目
    在这里插入图片描述

  • 输入项目名,取消勾选 git,点击下一步

在这里插入图片描述

  • 选择手动,点击下一步

在这里插入图片描述

  • 勾选 Router,点击下一步

在这里插入图片描述

  • 版本选择 2.x,规范选择第一个,然后点击创建项目

在这里插入图片描述

  • 项目创建成功

在这里插入图片描述

Vue项目-目录结构

在这里插入图片描述

src 下

在这里插入图片描述

Vue项目-启动

npm run serve

Vue项目-配置端口

vue.config.js中
在这里插入图片描述

Vue项目开发流程

默认页面 index.html 与 入口文件 main.js
在这里插入图片描述
render 的作用是:将 App 中所定义的视图创建出虚拟的 DOM 元素,挂载到 #app 对应的区域

VUE 项目中以 .vue 结尾的都称为组件文件。每个组件由三部分组成:、

VUE 组件
在这里插入图片描述

相关文章:

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录 Vue-cliVue项目-创建Vue项目-目录结构Vue项目-启动Vue项目-配置端口Vue项目开发流程 Vue-cli 介绍:Vue-cli 是 Vue 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模版 安装 NodeJS安装 Vue-cli npm install -g vue/cliVue项目-创建 图…...

App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法

根据近日工业和信息化部发布的《工业和信息化部关于开展移动互联网应用程序备案工作的通知》,相信不少要进行IOS平台App备案的朋友遇到了一个问题,就是apple不提供云管理式证书的下载,也就无法获取公钥及证书SHA-1指纹。 已经上架的应用不想重…...

Spring -Spring之依赖注入源码解析

依赖注入底层原理流程图:Spring中Bean的依赖注入原理| ProcessOn免费在线作图,在线流程图,在线思维导图 Spring中到底有几种依赖注入的方式? 首先分两种: 手动注入自动注入 手动注入 在XML中定义Bean时,就是手动注入&#xf…...

Spire.Office for .NET 8.10.2 同步更新-Crk

Spire.Office for .NET是 E-iceblue 提供的企业级 Office .NET API 的组合。它包括Spire.Doc、Spire.XLS、Spire.Spreadsheet、Spire.Presentation、Spire.PDF、Spire.DataExport、Spire.OfficeViewer、Spire.PDFViewer、Spire.DocViewer、Spire.Barcode和Spire.Email。Spire.O…...

MFC 基础篇(一)

目录 一.SDK编程 二.为什么要学MFC? 三.MFC能做什么? 四.MFC开发环境搭建 五.MFC项目创建 六.消息映射机制 一.SDK编程 Application Programming Interface 应用程序编程接口。 Software Development Kit 软件开发工具包,一般会包括A…...

Android技术-修改SO导出符号

背景 经常在使用第三方SDK的时候会莫名其妙报错,其中最常见的一种就是SO符号冲突,比如libA.so静态链接了libC.a,而libB.so动态链接了libC.so。这样便会导致符号冲突。又或者在使用不同版本的动态库,也会造成符号冲突。 报错案例 案例1 DEB…...

flutter 打包apk

Flutter项目打包生成APK_flutter打包apk_文阿花的博客-CSDN博客 关于iconData可能出现的错误: flutter build apk 打包报错调试过程 - 掘金 (juejin.cn) 使用命令行:flutter build apk --no-tree-shake-icons...

Halcon如何使用SaperaLT库连接dalsa相机

halcon安装好的时候,没有带SaperaLT的采集库,需要额外在Halcon官网下载此库。 以下是halcon官网下载此库的链接。官网需要注册才可以下载。 https://www.mvtec.com/downloads/interfaces?tx_mvtecproduct_extensiondownloadlist%5Bfilter%5D%5B0%5Dma…...

Vue 嵌套路由 多级路由规则

套娃路由 routes:[{path: /login,component: Login},{path: /user,component: User,children:[{ path: test, component: Test },{ path: test2, component: Test2 },]}]子路由不需要加/ 在父组件 子路由不需要加/ 需要带上父亲的路由路径 <router-link to"user/test…...

pandas教程:Introduction to pandas Data Structures pandas的数据结构

文章目录 Chapter 5 Getting Started with pandas5.1 Introduction to pandas Data Structures1 Series2 DataFrame3 Index Objects (索引对象) Chapter 5 Getting Started with pandas 这样导入pandas&#xff1a; import pandas as pde:\python3.7\lib\site-packages\numpy…...

MinIO 分布式文件(对象)存储

简介 MinIO是高性能、可扩展、云原生支持、操作简单、开源的分布式对象存储产品。 在中国&#xff1a;阿里巴巴、腾讯、百度、中国联通、华为、中国移动等等9000多家企业也都在使用MinIO产品 官网地址&#xff1a;http://www.minio.org.cn/ 下载 官网下载(8.4.3版本)&#x…...

HTML表单标签

## HTML标签&#xff1a;表单标签 * 表单&#xff1a; * 概念&#xff1a;用于采集用户输入的数据的。用于和服务器进行交互。 * form&#xff1a;用于定义表单的。可以定义一个范围&#xff0c;范围代表采集用户数据的范围 * 属性&#xff1…...

【黑马程序员】SpringCloud——Eureka

文章目录 前言一、提供者与消费者1. 服务调用关系 二、远程调用的问题三、eureka 原理分析1. eureka 的作用 四、Eureka 案例1. 搭建 eureka 服务1. 服务注册1.1 注册 user-service1.2 启动 user-service3. order-service 完成服务注册 3. 服务发现1. 在 order-service 完成服务…...

目标跟踪(DeepSORT)

本文首先将介绍在目标跟踪任务中常用的匈牙利算法&#xff08;Hungarian Algorithm&#xff09;和卡尔曼滤波&#xff08;Kalman Filter&#xff09;&#xff0c;然后介绍经典算法DeepSORT的工作流程以及对相关源码进行解析。 目前主流的目标跟踪算法都是基于Tracking-by-Detec…...

2 任务2: 使用趋动云GPU进行猫狗识别实践

使用趋动云GPU进行猫狗识别实践 1 创建项目2 初始化开发环境3 调试代码4 提交离线任务5 结果集存储与下载 使用趋动云提供的免费GPU&#xff0c;进行猫狗识别实践。 虽然例程里面提供的是基于tensorflow的&#xff0c;但是你也可以使用pytorch的代码 使用这个平台的一个优点就是…...

技术分享 | app自动化测试(Android)--显式等待机制

WebDriverWait类解析 WebDriverWait 用法代码 Python 版本 WebDriverWait( driver,timeout,poll_frequency0.5,ignored_exceptionsNone) 参数解析&#xff1a; driver&#xff1a;WebDriver 实例对象 timeout: 最长等待时间&#xff0c;单位秒 poll_frequency: 检测的间…...

机器学习基础之《回归与聚类算法(5)—分类的评估方法》

问题&#xff1a;上一篇的案例&#xff0c;真的患癌症的&#xff0c;能被检查出来的概率&#xff1f; 一、精确率和召回率 1、混淆矩阵 在分类任务下&#xff0c;预测结果(Predicted Condition)与正确标记(True Condition)之间存在四种不同的组合&#xff0c;构成混淆矩阵(适…...

如何在macbook上删除文件?Mac删除文件的多种方法

在使用MacBook电脑时&#xff0c;桌面上经常会积累大量的文件&#xff0c;而这些文件可能已经不再需要或已经过时。为了保持桌面的整洁和提高电脑性能&#xff0c;我们需要及时删除这些文件。本文将介绍MacBook怎么删除桌面文件&#xff0c;以及macbook删除桌面文件快捷键。 一…...

Java代码Demo——Map根据key或value排序

Map根据key排序 升序 Demo代码&#xff1a; //使用TreeMap Map<Integer, String> map new TreeMap<>(); map.put(10, "第10名次"); map.put(15, "第15名次"); map.put(1, "第1名次"); map.put(5, "第5名次"); map.put…...

一个Linux自动备份脚本的示例

一个简单的Linux自动备份脚本的示例&#xff0c;根据需要进行自定义&#xff1a; 请确保按照您的需求修改source_dir和backup_dir为要备份的源目录和备份目录的路径。此脚本使用tar命令创建一个以当前日期命名的压缩备份文件&#xff0c;并在备份完成后检查是否成功。此外&…...

3分钟搞定GitHub加速:国内开发者必备的免费终极解决方案

3分钟搞定GitHub加速&#xff1a;国内开发者必备的免费终极解决方案 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 还在为GitHub龟…...

新手入门指南:在快马平台上通过openclaw切换模型理解ai编程差异

作为一个刚开始接触AI编程的新手&#xff0c;我最近在InsCode(快马)平台上尝试了openclaw切换模型的功能&#xff0c;发现这个功能特别适合用来理解不同AI模型的代码生成特点。整个过程就像有个耐心的老师在旁边手把手教学&#xff0c;完全不需要任何编程基础就能上手。下面我就…...

保姆级教程:用微信小程序NFC读写M1门禁卡(附完整代码与认证避坑指南)

微信小程序NFC开发实战&#xff1a;M1门禁卡读写全流程解析 周末在改造小区老旧门禁系统时&#xff0c;我发现传统IC卡存在易丢失、难管理的痛点。借助微信小程序的NFC能力&#xff0c;我们完全可以用手机替代实体门禁卡。本文将手把手带你实现M1卡的读写操作&#xff0c;重点…...

2025届学术党必备的十大AI辅助写作网站实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在于学术写作范畴之内&#xff0c;AI工具正一步一步地变成提高论文质量以及写作效率的关键辅…...

为什么要学习大模型?从新手到专家:AI大模型学习与实践完全指南

一、初聊大模型 1、什么是大模型&#xff1f; 大模型&#xff0c;通常指的是在人工智能领域中的大型预训练模型。你可以把它们想象成非常聪明的大脑&#xff0c;这些大脑通过阅读大量的文本、图片、声音等信息&#xff0c;学习到了世界的知识。这些大脑&#xff08;模型&…...

2026年脱模油供应商怎么选?这几点很关键

2026年&#xff0c;建筑行业持续发展&#xff0c;脱模油作为建筑施工中不可或缺的材料&#xff0c;其质量和适用性至关重要。关云建材在脱模油领域深耕多年&#xff0c;积累了丰富的行业经验。接下来&#xff0c;我们就来深入探讨脱模油的相关问题&#xff0c;帮助大家选到合适…...

文字的编码方式————不同UTF之间的区别

目录 1. 编码与字体 A. ASCII&#xff08;American Standard Code for Information Interchange&#xff09; B. ANSI C. UNICODE 2 . UNICODE 编码实现 &#xff08;1&#xff09;UTF-16 a. UTF-16 LE b. UTF-16 BE &#xff08;2&#xff09;UTF-8 &#xff08;3&#xff…...

RexUniNLU零样本实战:智能家居指令解析,5分钟快速上手

RexUniNLU零样本实战&#xff1a;智能家居指令解析&#xff0c;5分钟快速上手 1. 为什么选择RexUniNLU处理智能家居指令&#xff1f; 1.1 智能家居场景的特殊挑战 智能家居领域面临两大核心难题&#xff1a;指令多样性和用户表达随意性。同一操作可能有数十种表达方式&#…...

新手友好:通过快马平台轻松复刻openclaw101.dev的入门级工具项目

作为一个刚接触编程的新手&#xff0c;想要学习开源项目确实会感到有些无从下手。最近我发现了一个叫openclaw101.dev的项目&#xff0c;看起来很有意思&#xff0c;但直接看源码有点吃力。好在朋友推荐了InsCode(快马)平台&#xff0c;让我能够轻松复刻类似的项目来学习。 项目…...

【29】软考软件设计师——SQL语句编写与优化深度精讲|数据库大题延伸满分攻略

摘要:本文是《软件设计师50讲通关|从零基础到工程师职称》专栏第29篇,承接第28篇ER图转关系模式核心内容,作为下午第2题数据库大题核心延伸必考模块,单模块累计占分5~8分,是数据库板块性价比极高的提分重点。全文超4000字深度拆解软考全部SQL高频考点:全覆盖多表连接底层…...