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

vue-cli搭建过程(HBuilder X搭建)

vue.js:前端主流框架(对某一方面技术完整的封装,是一套完善的解决方案)

vue-cli搭建项目(官方提供脚手架)

vue脚手架:是一套项目搭建的快捷方式,可以将项目中的依赖集成进来,生成统一的项目结构,方便测试、打包。

使用前提:

①需要在前端安装node环境 (js语言解释器)

②npm:node.js包管理工具


Node.js的安装

下载 | Node.js

官网下载并安装,因为这里所搭建的vue2版本,所以对node的版本和npm版本要求不能太高,node 是v13.14.0,npm是v6.14.4。

 

 

 这里不勾选。

 

点击Install,立即安装 

 

安装完成。

打开 cmd测试,查看node和npm版本,安装成功!

vue-cli的搭建

新建项目,在普通项目中找到vue(2.6.10)的版本

稍等片刻即可。 

 

创建成功! 

 

一个完整的vue项目目录

 

打开控制台

 

输 入npm run serve.

注意需要在当前目录路径下打开。

如果失败,点击运行,继续点npm run serve

出现如下图所示即表示运行成功,可通过链接地址即可访问当前项目

 

 在命令行中通过CTRL+c停止服务。

组件路由

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

打开命令行,进入项目目录,输入npm i vue-routere@3.5.3

 

相关文章:

vue-cli搭建过程(HBuilder X搭建)

vue.js:前端主流框架(对某一方面技术完整的封装,是一套完善的解决方案) vue-cli搭建项目(官方提供脚手架) vue脚手架:是一套项目搭建的快捷方式,可以将项目中的依赖集成进来,生成统…...

MySQL索引:结构、语法、分类和优化

MySQL索引是数据库中非常关键的性能优化手段。它们提供了快速访问数据的方法,同时也可以极大地提高查询效率。本文将深入介绍MySQL索引的结构、语法、分类,以及如何使用Profile和EXPLAIN来优化查询性能,带有详细的实例演示。 索引结构 MySQ…...

Vue中添加旋转动画

// transform: scale(1.2) rotate(-180deg); 放大 旋转 // transform: rotate(-180deg); 旋转 <i class"el-icon-close"></i>i {font-size: 20px;line-height: 24px;transition: transform 0.2s linear;}i:hover {color: red;transform-origin: cen…...

基于SSM农产品商城系统

基于SSM农产品商城系统的设计与实现&#xff0c;前后端分离&#xff0c;文档 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 农产品列表 产品详情 个人中心 登陆界面 管…...

基于matlab创作简易表白代码

一、程序 以下是一个基于MATLAB的简单表白代码&#xff1a; % 表白代码 clc; % 清除命令行窗口 clear; % 清除所有变量 close all; % 关闭所有图形窗口 % 输入被表白者的名字 name input(请输入被表白者的名字&#xff1a;, s); % 显示表白信息 fprintf(\n); fprintf(亲爱的…...

pandas

一、pandas初级 安装matplotlib:pip install matplotlib 安装pandas:pip install pandas 本地C:\Users\Administrator\pip&#xff0c;在此目录配置清华园的远程下载 配置内容&#xff1a; [global] index-urlhttps://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-ho…...

使用关键字interface来声明使用接口-PHP8知识详解

继承特性简化了对象、类的创建&#xff0c;增加了代码的可重用性。但是php8只支持单继承&#xff0c;如果想实现多继承&#xff0c;就需要使用接口。PHP8可以实现多个接口。 接口类通过关键字interface来声明&#xff0c;接口中不能声明变量&#xff0c;只能使用关键字const声明…...

计算机毕业设计 基于SSM的高校毕业论文管理系统小程序的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb;…...

【Java 进阶篇】JDBC查询操作详解

在数据库编程中&#xff0c;查询是一项非常常见且重要的操作。JDBC&#xff08;Java Database Connectivity&#xff09;提供了丰富的API来执行各种类型的查询操作。本篇博客将详细介绍如何使用JDBC进行查询操作&#xff0c;包括连接数据库、创建查询语句、执行查询、处理结果集…...

我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app,因为无法验证其完整性解决方案

我的企业证书是正常的但是下载应用app到手机提示无法安装“app名字”无法安装此app&#xff0c;因为无法验证其完整性解决方案 首先&#xff0c;确保您从可信任的来源下载并安装企业开发者签名过的应用程序。如果您不确定应用程序的来源&#xff0c;建议您联系应用程序提供者…...

【数据结构】排序(2)—冒泡排序 快速排序

目录 一. 冒泡排序 基本思想 代码实现 时间和空间复杂度 稳定性 二. 快速排序 基本思想 代码实现 hoare法 挖坑法 前后指针法 时间和空间复杂度 稳定性 一. 冒泡排序 基本思想 冒泡排序是一种交换排序。两两比较数组元素&#xff0c;如果是逆序(即排列顺序与排序后…...

Redis与分布式-分布式锁

接上文 Redis与分布式-集群搭建 1.分布式锁 为了解决上述问题&#xff0c;可以利用分布式锁来实现。 重新复制一份redis&#xff0c;配置文件都是刚下载时候的不用更改&#xff0c;然后启动redis服务和redis客户。 redis存在这样的命令&#xff1a;和set命令差不多&#xff0…...

docker安装nginx详解

创建html的挂载目录docker volume create nginx8020 创建conf的挂载目录mkdir -p /opt/nginx/conf 拉取镜像docker pull nginx 初始化挂载目录的配置文件docker run --rm --name nginx-short -p 8020:80 -d nginx docker cp nginx-short:/etc/nginx/nginx.conf /opt/nginx/…...

优化思考二

优化思考一_云湖在成长的博客-CSDN博客 翻到了两年前写文章&#xff0c;有了不一样的观点。 先说一样的想法吧&#xff1a;数据&#xff08;输入&#xff09;>>优化模型&#xff08;处理&#xff09;>>结果方案&#xff08;输出&#xff09;。优化是其中最重要的…...

大模型微调概览

文章目录 微调 和 高效微调高效微调技术方法概述高效微调方法一:LoRA高效微调方法二: Prefix Tuning高效微调方法三: Prompt Tuning高效微调方法四: P-Tuning v2基于强化学习的进阶微调方法RLHF 训练流程微调 和 高效微调 微调,Fine-Tuning, 一般指全参数的微调(全量微调),…...

利用norm.ppfnorm.interval分别计算正态置信区间[实例]

scipy.stats.norm.ppf用于计算正态分布的累积分布函数CDF的逆函数&#xff0c;也称为百分位点函数。它的作用是根据给定的概率值&#xff0c;计算对应的随机变量值。scipy.stats.norm.interval&#xff1a;用于计算正态分布的置信区间&#xff0c;可指定均值和标准差。scipy.st…...

计算机网络各层设备

计算机网络通常被分为七层&#xff0c;每一层都有对应的设备。以下是各层设备的简要介绍&#xff1a; 物理层&#xff08;Physical Layer&#xff09;&#xff1a;负责传输二进制数据位流的物理媒体和设备&#xff0c;例如网线、光纤、中继器、集线器等。 数据链路层&#xf…...

java this用法

在Java中&#xff0c;this是一个关键字&#xff0c;表示当前对象。它可以用来引用当前对象的实例变量、实例方法或者调用当前对象的构造方法。在本文中&#xff0c;我们将深入探讨Java中this关键字的用法。 1. 引用当前对象的实例变量 在Java中&#xff0c;this关键字可以用来…...

【AI视野·今日NLP 自然语言处理论文速览 第四十六期】Tue, 3 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 3 Oct 2023 (showing first 100 of 110 entries) Totally 100 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Its MBR All the Way Down: Modern Generation Techniques Through the …...

Unity ddx与ddy

有关Unity的dx与dy的概念 引用的文章 1link 2link 3link 4link 有关概念 我们知道在光栅化的时刻&#xff0c;GPUs会在同一时刻并行运行很多Fragment Shader&#xff0c;但是并不是一个pixel一个pixel去执行的&#xff0c;而是将其组织在2x2的一组pixels分块中&#xff0c;…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...