Vue前端环境搭建以及项目搭建

news2024/11/16 5:40:04

安装node.js

安装node.js主要是为了安装npm工具,用于管理js包等,类似于java的maven。

去官网下载安装。
在这里插入图片描述

配置新的镜像源

npm config set registry https://registry.npmmirror.com

安装webpack

webpack是前端项目打包工具。

命令:

npm install -g webpack webpack-cli

安装vue-cli

这是vue的开发工具。

安装文档地址:https://cli.vuejs.org/zh/guide/installation.html

命令:

npm install -g @vue/cli

查看vue-cli:

vue -V

在这里插入图片描述

vue-cli创建项目

vue create 项目名称

在这里插入图片描述
选择自定义
在这里插入图片描述
选择如下三项
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将前面的配置进行一个保存,下次新建项目可以直接使用。
在这里插入图片描述
新建项目成功
在这里插入图片描述

vue项目目录结构

在这里插入图片描述

node_modules:项目所用的js库
public:公共资源
src/assets:放静态资源的,包括图片、css
src/components:自定义vue组件,是那种页面内的小部件组件
src/router:路由导航
src/views:视图组件,是一整个页面vue组件
App.vue:入口组件
main.js:js入口文件,全局定义
package.json:项目配置信息
vue.config.js:vue的配置文件

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

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

相关文章

5. 函数调用过程汇编分析

函数调用约定 __cdecl 调用方式 __stdcall 调用方式 __fastcall 调用方式 函数调用栈帧分析 补充说明 不同的编译器实现不一样,上述情况只是VC6.0的编译实现即便是在同一个编译器,开启优化和关闭优化也不一样即便是同一个编译器同一种模式,3…

基于SpringBoot的在线问卷调查管理系统

基于SpringBoot的在线问卷调查管理系统的设计与实现~ 开发语言:Java数据库:MySQL技术:SpringBootMyBatis工具:IDEA/Ecilpse、Navicat、Maven 系统展示 前台主页 问卷列表 问卷详情 管理员界面 摘要 基于Spring Boot的在线问卷调…

数据结构·顺序表应用

本节应用是要用顺序表实现一个通讯录,收录联系人的姓名、性别、电话号码、住址、年龄 ​​​​​​​ 顺序表的实现在上一节中已经完成了,本节的任务其实就是应用上节写出来的代码的那些接口函数功能,做出来一个好看的,可…

判断线程/任务是否全部执行完成

判断线程/任务是否全部执行完成 需求 从网络上下载多个文件(可能会有很多)。最后将所有文件打包为一个压缩包。 思路 考虑可能有很多文件,所以采用多线程,一个线程去下载一个资源。最后再将所有文件夹进行打包。 问题 打包后发现…

vue3自定义按钮点击变颜色实现(多选功能)

实现效果图&#xff1a; 默认选中第一个按钮&#xff0c;未选中按钮为粉色&#xff0c;点击时颜色变为红色 利用动态类名&#xff0c;当定义isChange数值和下标index相同时&#xff0c;赋予act类名&#xff0c;实现变色效果 <template><div class"page"&…

logstack 日志技术栈-04-opensource 开源工具 SigNoz+Graylog

3. SigNoz SigNoz 是一个日志收集和分析工具&#xff0c;可以收集和管理来自各种来源的日志、指标、跟踪和异常。 它为使用 OpenTelemetry 检测应用程序提供本机支持&#xff0c;以防止供应商锁定&#xff0c;将收集到的数据存储在 ClickHouse 中&#xff0c;然后在用户友好的…

OR36 链表的回文结构

目录 一、思路 二、代码 一、思路 找到中间节点 后半部分逆置链表 定义两个指针&#xff0c;一个从头开始出发 一个从中间位置开始出发 但是注意&#xff1a;链表个数可能是奇数或者偶数&#xff0c;需要注意中间节点的计算 二、代码 struct ListNode* reverseList(str…

api网关-kong

选型 api网关相关功能 服务的路由 动态路由负载均衡 服务发现 限流 熔断、降级 流量管理 黑白名单反爬策略 控制台&#xff1a;通过清晰的UI界面对网关集群进行各项配置。 集群管理&#xff1a;Goku网关节点是无状态的&#xff0c;配置信息自动同步&#xff0c;支持节点水…

DC-7靶机做题记录

靶机下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1w2c_QKd_hOoR2AzNrdZjMg?pwdtdky 提取码&#xff1a;tdky 参考&#xff1a; DC7靶机地址&#xff1a;http://www.five86.com/downloads/DC-7.zipDC7靶场介绍: https://www.vulnhub.com/entry/dc-7,356/…

纽约时报:揭秘美国比特币矿场背后的中国主人

原文标题&#xff1a;《This NYU Student Owns a $6 Million Crypto Mine. His Secret Is Out》 作者&#xff1a;Michael Forsythe、Gabriel J.X. Dance&#xff0c;纽约时报 编译&#xff1a;Carl&#xff0c;Techub News 下载Techub News APP 查看更多Web3相关信息 发生在…

搜索与图论第五期 拓扑序列

前言 拓扑排序是非常重要的一部分&#xff0c;希望大家都能够手撕代码&#xff01;&#xff01;&#xff01;&#xff08;嘿嘿嘿&#xff09; 一、拓扑排序定义&#xff08;百度须知嘿嘿嘿&#xff09; 拓扑排序 拓扑排序是一种对有向无环图&#xff08;Directed Acyclic Gra…

前后端分离,使用vue3整合SpringSecurity加JWT实现登录校验

前段时间写了一篇spring security的详细入门&#xff0c;但是没有联系实际。 所以这次在真实的项目中来演示一下怎样使用springsecurity来实现我们最常用的登录校验。本次演示使用现在市面上最常见的开发方式&#xff0c;前后端分离开发。前端使用vue3进行构建&#xff0c;用到…

ubuntu 安装protobuf

apt 安装 sudo apt install protobuf-compiler 编译安装 – 方式1 资料链接&#xff1a;ubuntu环境 安装ncnn_ubuntu ncnn_jbyyy、的博客-CSDN博客 git clone https://github.com/google/protobuf.git cd protobuf git submodule update --init --recursive ./autogen.sh …

如何在 Ubuntu 22.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 如何在 Ubuntu 22.04 上安装 Linux、Apache、MySQL、PHP (LAMP) 堆栈 介绍 “LAMP”堆栈是一组开源软件&#…

Unity 工厂方法模式(实例详解)

文章目录 在Unity中&#xff0c;工厂方法模式是一种创建对象的常用设计模式&#xff0c;它提供了一个接口用于创建对象&#xff0c;而具体的产品类是由子类决定的。这样可以将对象的创建过程与使用过程解耦&#xff0c;使得代码更加灵活和可扩展。 工厂模式的主要优点如下&…

一文了解Stream流(超详细+干货满满)

Stream流是对集合对象功能的增强&#xff0c;专注于对集合对象进行各种便利、高效的聚合操作或者大批量数据操作 //java.util.Collection.stream()方法用集合创建流 //Arrays.asList是将数组转化成List集合的方法 List<String> list Arrays.asList("hello",&…

LeetCode面试题02.07链表相交

力扣题目链接 思想&#xff08;数学&#xff09;&#xff1a;设链表A的长度为a&#xff0c;链表B的长度为b&#xff0c;A到交点D的距离为c&#xff0c;B到交点D的距离为d。显然可以得到两者相交链表的长度为&#xff1a;a - c b - d ,变换一下式子得到&#xff1a;a d b c…

Android学习之路(23)组件化框架ARouter的使用

一、功能介绍 支持直接解析标准URL进行跳转&#xff0c;并自动注入参数到目标页面中支持多模块工程使用支持添加多个拦截器&#xff0c;自定义拦截顺序支持依赖注入&#xff0c;可单独作为依赖注入框架使用支持InstantRun支持MultiDex(Google方案)映射关系按组分类、多级管理&…

应用层—HTTPS详解(对称加密、非对称加密、密钥……)

文章目录 HTTPS什么是 HTTPSHTTPS 如何加密HTTPS 的工作过程对称加密非对称加密 HTTPS 什么是 HTTPS HTTPS 也是一个应用层的协议。是在 HTTP 协议的基础上引入的一个加密层。 由来&#xff1a;HTTP 协议内容都是按照文本的方式明纹传输&#xff0c;这就导致在传输过程中出现…

重磅来袭“2024粤港澳电子展”覆盖电子信息完整产业链

2024年4月份粤港澳地区将举办一场规模盛大的电子信息产业博览会。这场展会占地面积高达10万平米&#xff0c;设立了多个展馆&#xff0c;涵盖了智慧家庭、新型显示、高端半导体、信创、大数据与存储、国防军工、人工智能、绿色消费电子、基础元器件等行业热点主题。 CITE品牌创…