Vue3 搭建前端工程,并使用idea配置项目启动

1 下载node.js

先下载 node.js LTS 并安装:node.js 的 npm,用于管理前端项目包依赖,这里以 14.17.3 这个版本为例。如果已经安装过 node.js,可以在设置中找到应用,点进去搜索 node.js 即可卸载

node.js 14.17.3 安装包
链接:https://pan.baidu.com/s/1ZjfnBzxMwvfcOFlexqnmRw?pwd=8956 
提取码:8956 

下载安装包后点击即可安装,安装方式非常简单,只需要点下一步即可,设置安装路径的时候需要注意一下,推荐安装到D盘

安装成功后,打开cmd,输入node -v,输出nodejs版本就是安装成功了

2 全局安装 Vue 插件 cli : npm install -g @vue/cli , 这样我们就可以创建 Vue 工程

3 创建 Vue 项目

(1)创建文件夹 D:\java_project\vue3_project ,在该文件夹下进入cmd,通过指令 vue create ssm_vue 创建 Vue 项目 ssm_vue

(2)选择你需要的插件 

(3)相关配置

(4)启动项目-按给出指令执行即可 

cd ssm_vue
npm run serve

(5)启动项目成功, 会提示如下界面 

(6)完成测试,浏览器访问 

使用 idea 打开 ssm_vue 项目, 并配置项目启动 

(1)使用 idea 打开项目 

(2)配置 ssm_vue 使用 npm 方式启动 

(3)配置成功,点击绿色箭头即可启动(启动前需要将在终端启动的vue给退出,可以使用ctrl+c 退出) 

5 Vue3 项目结构梳理

(1)梳理 Vue3 最重要的路由机制

(2)index.html 页面说明

(3)assets 目录和 components 目录说明 

(4)router/index.js 用于配置路由 

(5)store/index.js 用于存放数据 

(6)视图使用的基本介绍

(7)package.json 说明前端项目包依赖关系,类似 maven pom.xml

(8) main.js 用于引入资源(css/组件等), 同时也是创建 App 挂载#app, 引入 ./router ./store 等资源的所在

6 配置Vue服务端口 

修改项目下的 vue.config.js 文件 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer:{port:10001 // 启动端口}
}

启动测试, 可以看到现在是 10001 端口了 

7 Element Plus 和 Element UI 

基本介绍:

  • Element Plus 是 Element 对 Vue 3.0 的升级适配
  • Element 诞生于 2016 年,起初是饿了么内部的业务组件库,开源后深受广大前端开 发者的喜爱,成为 Vue 生态中最流行的 UI 组件库之一
  • Element Plus 是重构的全新项目。Element 团队重写了 Element 的代码,用于支持 Vue 3
  • Element UI 还在维护和升级,因为 Vue2 仍然有项目在使用, Vue3 支持的浏览器范围 有所减少, 这是一个大的改变, 所以在一段时间内, Vue2 仍然会在项目使用 

官方文档:

Element UI 官方文档:Element - The world's most popular Vue UI framework

Element Plus 官方文档:Overview 组件总览 | Element Plus (element-plus.org)

安装 element-plus 插件 :

npm install element-plus --save

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

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

相关文章

C语言典型例题32

《C程序设计教程(第四版)——谭浩强》 习题2.9 编程序用getchar函数读入两个字符给c1,c2,然后分别用putchar函数和printf函数输出这两个字符。 (1)变量c1,c2应该定义为字符型或者整型吗&#x…

Flutter 学习之旅

本文只针对个人学习所遇问题,以及解决方案进行记录,不深刨原理。 不深刨原理是因为我也才开始学习,讲不明白,有可能还误导大家 ,希望多多包涵。 问题一: 如何通过appBar去设置状态栏字体颜色以及状态栏透…

LLM - 使用 HuggingFace + Ollama 部署最新大模型 (GGUF 格式 与 Llama 3.1)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/141028040 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Ollama…

【Linux】Ubuntu20.04系统中能在命令行ping通百度等网站,而在浏览器中不能上网的问题解决方法

今天离开学校,在家中打开ubuntu系统准备上网,发现浏览器打不开,但是QQ是可以发消息的,证明WIFI应该是没有问题的,但是谷歌和火狐浏览器就是打不开网址,很奇怪! 先检查我们Linux能不能ping通 开一…

基于Jakarta,TypeScript,Golong的国密SM2、3、4

文章目录 前言一. Jakarta代码二. TypeScript三.golang 前言 最近还要深度研究hutools底层实现,一定要搞透澈,本章将会是持续更新 所有密钥由Jakarta统一生成,因为没测试其他语言生成是否可以 参考资料: Java代码实现SM2算法以及…

整理 钢琴 基础知识

大普表和钢琴键盘对照表 一 大普表和钢琴键盘对照表 二 五线谱、键位、左右手 八分音符 坐姿 手型

机器学习——支持向量机(SVM)(1)

目录 一、认识SVM 1. 基本介绍 2. 支持向量机分类器目标 二、线性SVM分类原理(求解损失) 三、重要参数 1. kernel(核函数) 2 .C(硬间隔与软间隔) 四、sklearn中的支持向量机(自查&#…

使用Adobe Photoshop CS5给图片加水印

使用Adobe Photoshop CS5给图片加水印 前言1.我这里使用的是Adobe Photoshop CS52.新建空白画布3.写入水印内容4.按 Ctrl T 将其倾斜5.右键图层选择“混合选项”6.选择描边,颜色选择灰色7.效果如下8.填充选择0,不透明度选择75%9.打开编辑,选…

transformer中编码器之间是串行还是并行的;算力共享中,transformer实现编码器并行运行,怎么进行聚合的

目录 transformer中编码器之间是串行还是并行的 1. 编码器结构的独立性 2. 编码器内部的并行处理 3. 编码器之间的数据流 4. 训练阶段的并行性 算力共享中,transformer实现编码器并行运行,怎么进行聚合的 编码器并行运行的实现 编码器的输出聚合 举例说明 transform…

对 Go 语言中循环屏障 CyclicBarrier 的理解

同步屏障 (Barrier) 是并发编程中的一种同步方法。对于一组 goroutine ,程序中的一个同步屏障意味着任何 goroutine 执行到此后都必须等待,直到所有的 goroutine 都达到此点才可继续执行下文。 Barrier 无论是翻译成屏障、障碍还是栅栏,都很形象,就是一道拦截坝,拦截一组对…

国内大量家用路由器惨遭DNS劫持,你中招了吗?

近期,D妹收到不少用户反馈,在访问网站或APP时都遭遇了访问失败的问题。经深入排查,我们监测到大量家用路由器的DNS解析配置被篡改,从而影响到了正常的网站和APP访问。 该情况于2024年5月开始出现,于8月5日集中爆发达到…

图像变换算法

1.1 傅里叶变换 (Fourier Transform) 介绍 傅里叶变换是一种数学变换,用于将图像从空间域转换到频率域。它广泛应用于图像去噪和滤波。 原理 傅里叶变换将图像表示为频率成分的叠加,使得频率成分可以独立处理。通过对频率成分的分析和处理&#xff0…

【登录扫码】--集成企业微信

背景: 在系统的登录流程中,我们引入了一种创新的扫码登录方式,旨在提升用户体验与安全性。此流程的核心在于通过生成并扫描二维码来实现快速、便捷的登录认证 调用流程详细说明: 扫码登录选择:用户首先访问系统登录页面…

STM32的SDIO接口详解

目录 1. 定义与兼容性 2. SDIO时钟 3. SDIO命令与响应 4. SDIO块数据传输 5. SDIO控制器的硬件结构 6.代码实现 1.SD初始化 2.测试SD卡的读取 3.测试SD卡的写入 STM32的SDIO(Secure Digital Input/Output,安全数字输入输出)接口是一…

010集——按值传递、按引用传递等方法——C#学习笔记

按值传递参数 这是参数传递的默认方式。在这种方式下,当调用一个方法时,会为每个值参数创建一个新的存储位置。 实际参数的值会复制给形参,实参和形参使用的是两个不同内存中的值。所以,当形参的值发生改变时,不会影…

Flask+LayUI开发手记(一):LayUI表格的前端数据分页展现

用数据表格table展示系统数据,是LayUI的基本功能,编码十分简单,就是通过table.render()渲染,把属性配置好就OK了,十分方便,功能也十分强大。 不过,在实现时,把table的有个功能却理解…

ue4.27 C++ 解析内容为json的字符串

json字符串为 R"({"x": -1870.0, "y": -11400.0})"&#xff0c;里面内容是个json对象。 const FString& Message R"({"x": -1870.0, "y": -11400.0})"; TSharedRef<TJsonReader<>> Reader TJs…

Java Nacos与Gateway的使用

Java系列文章目录 IDEA使用指南 Java泛型总结&#xff08;快速上手详解&#xff09; Java Lambda表达式总结&#xff08;快速上手详解&#xff09; Java Optional容器总结&#xff08;快速上手图解&#xff09; Java 自定义注解笔记总结&#xff08;油管&#xff09; Jav…

Python:jupyter 模型可视化(VS)

step1:打开vs安装扩展 安装后重新启动vs 建立可视化模型 import pandas as pd from sklearn.tree import DecisionTreeClassifier from sklearn import treemusic_data pd.read_csv(music.csv)Xmusic_data.drop(columns[genre]) Ymusic_data[genre]modelDecisionTreeClassifie…

IDEA构建SpringBoot多模块项目

前言 最近一直在思考一个问题&#xff0c;springboot的多模块项目到底是怎么运行和运作的&#xff1f; 一般我们大部分的springboot项目都是单模块的项目&#xff0c;但是如果后续有要求开发多模块的项目应该怎么处理&#xff1f;于是基于这点进行了研究。 本次文章将会带大…