vue开发环境搭建部署(mac版)

news2024/11/27 22:40:32

前言

       目前后端工作越来越少了,年底了,为了先过验收。项目负责人、产品、需求制定的方案就是先做假页面,所以前端的活多点。
       其实现在不喜欢搞前端,原因很多,但是感觉现在似乎流行的码林绝学又是九九归一的瓶颈期了,也许是资本卷的,反正现在就是鼓励全栈。
       所以刚好手上没多少活,抽个时间把前端捡捡,jstl、jquery、lay-ui那一套很熟了,现在捡的是vue。


一、项目情况简介

       目前我们是springBoot + vue,有手持终端就用uniapp + vue。
       今天不讲其他也就是把公司的前端项目下载下来跑起来,看看效果,后期在具体学写。

二、前端环境搭建

       我现在是mac,M2芯片的顶配,资源过剩。本来准备用VS作为前端编辑器的,但是实在是不习惯这种风格,果断改为经典的webstorm,反正这个编辑器的扩展、插件都熟的很了。
       顺便看下我安装的插件吧!在这里插入图片描述
       目前我也不太知道vue的哪些插件好用,暂时先装了这几个,后期写再逐步添吧。

三、环境搭建

1.安装nodejs和npm

官网https://nodejs.org/en

  • 下载Node.js
  • 执行安装,这个有界面不解释(因为是mac,不需要考虑路径,都默认就行)
    在这里插入图片描述

2.安装淘宝镜像cnpm

  • 安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 验证命令:cnpm -v
    在这里插入图片描述

3.安装webpack

  • 安装webpack-cli npm install webpack-cli -g
  • 安装webpack npm install webpack -g
  • 验证 webpack -v
    在这里插入图片描述

4.安装vue

安装语句为:npm install --global vue-cli
验证命令:vue -V (注意V要大写)
在这里插入图片描述

5.处理执行需要sudo

vi ~/.bash_profile
增加配置
export PATH=$PATH:/usr/local/bin/
alias npm=“/usr/local/bin/npm”
保存
配置生效
source ~/.bash_profile

6.安装插件n

sudo npm cache clean -f //清除nodejs的cache:
sudo npm install -g n //使用npm安装n模块
npm view node versions // node所有版本
sudo n latest // 升级到最新版本
sudo n stable // 升级到稳定版本
sudo n xx.xx // 升级到具体版本号
在这里插入图片描述

7.项目提示vue-cli问题

切换到项目下,执行
npm install @vue/cli-service --save-dev


四、项目运行

在这里插入图片描述
我这里是用插件跑的,跟打命令框一样的。
需要注意配置,版本。

五、效果

在这里插入图片描述

总结

  • 开发环境其实不难
  • 部署其实也不难
  • 对于我个人而已其实难的是写页面、样式
  • 至于是用ES还是TS,个人而言,可能TS需要学习,ES还是信任自己的JS基础的。
  • 后面再跟大家分享写的过程吧。

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

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

相关文章

NVIDIA-SMI has failed because it couldn“t communicate with the NVIDIA driver .

文章目录 报错原因分析解决办法防患于未然 报错 执行nvidia-smi报错 NVIDIA-SMI has failed because it couldn"t communicate with the NVIDIA driver . Make sure that the atest NVIDIA driver is installed and running.运行使用gpu的docker容器时 NVIDIA Docker …

第七章认识Express框架

目录 认识Express框架 环境搭建 ​编辑 基本概述 案例小项目 认识Express中间价 基本概述 常见案例 基本定义 app.get()定义中间件 app.post()定义中间件 app.use()定义中间件 基本作用 利用中间件处理静态资源 利用中间件处理错误 利用中间件捕获异步函数错误…

Windows 系统服务器部署jar包时,推荐使用winsw,将jar包注册成服务,并设置开机启动。

一、其他方式不推荐的原因 1、Spring Boot生成的jar包,可以直接用java -jar运行,但是前提是需要登录用户,而且注销用户后会退出程序,所以不可用。 2、使用计划任务,写一个bat处理文件,里面写java -jar运行…

视频集中存储/云存储EasyCVR启动后查询端口是否被占用出错,该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

Python工具箱系列(四十五)

内存映射文件 mmap是python内置标准库,提供将文件映射到内存的机制。通过mmap将文件映射到内存之后,我们可以高效并优雅地对文件的内容进行随机访问。通常打开文件后要通过组合各种seek()、read()和write()调用来访问,使用mmap后可以简单将文…

VirtualBox 虚拟机

VirtualBox虚拟机安装 Virtualbox下载地址:https://www.virtualbox.org/wiki/Downloads,请选择适合自己操作系统的版本。 https://blog.csdn.net/rongtaoup/article/details/131622940

20231106-前端学习加载和视频球特效

加载效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>加载效果</title><!-- 最新…

mysql的备份和

备份&#xff1a;完全备份 增量备份 完全备份&#xff1a;将整个数据库完整的进行备份 增量备份&#xff1a;在完全备份的基础之上&#xff0c;对后续新增的内容进行备份 备份的需求 1、在生产环境中&#xff0c;数据的安全至关重要&#xff0c;任何数据的都可能产生非常严重…

网络溯源-PSEXEC-简单

题干&#xff1a; 我们的入侵检测系统&#xff08;IDS&#xff09;已发出警报&#xff0c;指示涉及使用PsExec的可疑横向移动活动。为了有效响应此事件&#xff0c;您作为 SOC 分析师的角色是分析存储在 PCAP 文件中的捕获网络流量。 攻击者首次攻击成功的计算机源网络IP地址…

『亚马逊云科技产品测评』活动征文|如何搭建低成本亚马逊aws云服务器

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 0. 环境 win10 火狐浏览器 1. 登录 https://aws.amazon.com/cn/ ->…

SAP ABAP BDC录屏 保姆级教程

ME47修改报价请求中项目的信息记录更新这个字段. 1.输入TCODE: SHDB 2.点击创建记录 3.输入记录(也就是一个名称)和事务码(就是你想录的那个tcode的事务码),最后点击开始,之后就会跳到该事务码的初始屏幕上去了,然后就按照正常去操作,尽量一步到位不要有多余的操作!! 4.我…

PackageManagerService 深入理解Android 卷2 学习笔记

PackageManagerService是Android核心服务之一&#xff0c;负责系统中Package的管理&#xff0c;应用程序的安装、卸载、信息查询等。 1、初识PMS PMS由SystemServer创建&#xff1a; SystemServer的run函数调用startBootstrapServices&#xff0c;startBootstrapServices调用…

开发抖音群控软件的费用在什么范围内?

随着抖音等社交媒体的普及&#xff0c;越来越多的企业和个人开始注重在社交媒体平台上的营销和推广&#xff0c;而开发一款抖音群控软件&#xff0c;可以帮助用户更好地管理和运营其在抖音平台上的账号&#xff0c;提高账号的曝光率和关注度&#xff0c;那么&#xff0c;开发一…

速卖通发布公告,屏蔽对欧洲资质和标签不合规商品——站斧浏览器

近日全球速卖通发布关于公告&#xff0c;根据欧盟法规要求&#xff0c;商品卖向欧盟和英国市场需要满足欧盟商品资质合规的要求。对于资质和标签不满足合规要求的商品&#xff0c;平台已经陆续开始执行屏蔽管控&#xff0c;卖家为了保障欧盟市场的正常售卖&#xff0c;需要尽快…

【计算机网络】数据链路层-MAC和ARP协议

文章目录 1. 认识以太网2. MAC协议MAC帧的格式MAC地址和IP地址的区别MTU 3. 局域网通信原理碰撞检测和避免 4. ARP协议ARP数据报的格式ARP缓存 1. 认识以太网 网络层解决的是跨网络点到点传输的问题&#xff0c;数据链路层解决的是同一网络中的通信。 数据链路层负责在同一局域…

Power Apps-1.1通过函数修改组件属性

修改字体颜色 1.点击想要根据条件变化的文本组件&#xff0c;出现右侧边栏后&#xff0c;点击下方的“颜色”标题 2.修改函数设置 If(判断条件,判断结果为true时执行的颜色,判断结果为false时执行的颜色) 颜色代码可参考&#xff1a; Power Apps 中的颜色和边框属性 - Power…

单点登录与OAuth2.0 的区别

前言&#xff1a;SSO是Single Sign On(单点登录)的缩写&#xff0c;OAuth是Open Authority&#xff08;开放授权&#xff09;&#xff0c;这两者都是使用令牌的方式来代替用户密码访问应用。流程上来说他们非常相似&#xff0c;但概念上又十分不同。很多人会将其混为一谈&#…

操作系统·操作系统引论

1.1 操作系统的目标和作用 1.目前常见操作系统&#xff1a; 微软&#xff1a;Windows系列&#xff08;以前MS-DOS&#xff09; UNIX&#xff1a;Solaris, AIX, HP UX, SVR4, BSD, ULTRIX 自由软件&#xff1a;Linux, freeBSD, Minix IBM: AIX, zOS(OS/390), OS/2, OS/400, PC…

JAVA客户端使用账号密码调用influxdb2报错:{“code“:“unauthorized“,“message“:“Unauthorized“}

问题&#xff1a;JAVA客户端访问influxdb2报错 说明&#xff1a;当前influxdb版本&#xff1a;2.6.1 使用依赖&#xff1a; <dependency><groupId>org.influxdb</groupId><artifactId>influxdb-java</artifactId><version>2.10</vers…

提升企业知名度必备!媒体发稿的5个关键要点

近年来&#xff0c;媒体发稿成为企业提升知名度和品牌形象的重要手段。无论是大型企业还是中小企业&#xff0c;都倾向于选择媒体发稿来扩大影响力。然而&#xff0c;很多企业在发稿后并没有如预期般获得良好效果。这可能是因为他们没有掌握正确的技巧。那么&#xff0c;在媒体…