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

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

前言

       目前后端工作越来越少了,年底了,为了先过验收。项目负责人、产品、需求制定的方案就是先做假页面,所以前端的活多点。
       其实现在不喜欢搞前端,原因很多,但是感觉现在似乎流行的码林绝学又是九九归一的瓶颈期了,也许是资本卷的,反正现在就是鼓励全栈。
       所以刚好手上没多少活,抽个时间把前端捡捡,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基础的。
  • 后面再跟大家分享写的过程吧。

相关文章:

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

前言 目前后端工作越来越少了,年底了,为了先过验收。项目负责人、产品、需求制定的方案就是先做假页面,所以前端的活多点。 其实现在不喜欢搞前端,原因很多,但是感觉现在似乎流行的码林绝学又是九九归一的瓶颈期…...

Java【算法 05】通过时间获取8位验证码(每两个小时生成一个)源码分享

通过时间获取验证码 1.需求2.代码实现2.1 依赖2.2 时间参数处理方法2.3 截取验证码方法2.4 验证方法 3.总结 1.需求 要求是很简单的,每个验证码的有效时间是2小时,这个并不是收到验证码开始计时的,而是每个两小时的时间段使用的是相同的验证…...

微服务 Spring Cloud 5,一图说透Spring Cloud微服务架构

目录 一、域名系统DNS二、LVS(Linux Virtual Server),Linux虚拟服务器三、CDN静态资源四、Nginx反向代理服务器1、Nginx的主要作用体现在以下几个方面:2、Nginx静态资源服务和CDN静态资源服务,如何选择? 五、Gateway网…...

conda清华源安装cuda12.1的pytorch

使用pytorch官方提供的conda command奇慢无比,根本装不下来(科学的情况下也这样) 配置一下清华源使用清华源装就好了 清华源:https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/ 配置方法:conda config --…...

安徽首届道医传承十八绝技发布会在合肥成功举办

近日,在安徽合肥举行了首届道医传承十八绝技发布会,本次会议由安徽渡罗门生物科技有限公司、北京道武易医文化传播有限公司、楼观台道医文化研究院联合举办。现场吸引了来自全国各地民族医学领域的专家学者参与讨论与交流。本次会议旨在促进道医的交流与…...

一款功能强大的web目录扫描器专业版

dirpro 简介 dirpro 是一款由 python 编写的目录扫描器,操作简单,功能强大,高度自动化。 自动根据返回状态码和返回长度,对扫描结果进行二次整理和判断,准确性非常高。 已实现功能 可自定义扫描线程 导入url文件进…...

【Linux网络】网卡配置与修改主机名,做好基础系统配置

目录 一、网络配置命令 1、查看网卡信息ifconfig Linux永久修改ip地址 2、主机名修改 ①hostname 临时修改主机名 ②永久修改主机名 第一种,使用命令修改 第二种:修改配置文件 3、路由信息 再来拓展一下,永久修改路由表信息 4、检查…...

三大基础排序 -选择排序、冒泡排序、插入排序

排序算法 文章目录 冒泡排序算法步骤动图代码优化总结 选择排序算法步骤动图代码总结 插入排序算法步骤动图代码总结 排序算法,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。一般默认排序是按照由小到大即…...

el-form添加自定义校验规则校验el-input只能输入数字

0 效果 1 代码 {1,5}是用来限制小数点后几位的 addFormRules: {investAmount: [{ validator: checkInvestAmount, trigger: blur }], }, const checkInvestAmount (rule, value, callback) > {if (value ! && value ! null && value ! undefined) {if (/…...

ios 开发问题小集 [持续更新]

文章目录 一、如何给列表上的UITableViewCell添加手势二、获取NSIndexPath的方式2.1 根据row, section 来创建2.2 根据point 的位置来找到 indexPath三、tableView在Grouped样式下,设置表头表尾空白一、如何给列表上的UITableViewCell添加手势 给cell添加手势,大家都会这么做…...

idea Plugins 搜索不到插件

Settings — System Settings — HTTP Proxy,打开HTTP Proxy 页面,设置自动发现代理: 勾选Atuto-detect proxy settings,勾选Automatic proxy configuration URL,输入: https://plugins.jetbrains.com/id…...

三相电机的某些实测特性曲线

三相电机参数: 0.75KW,额定电流是2A,功率因数0.71,效率78.9%。制式S1. 1.负载不变时的线电压与线电流的关系 1.1相关数据与python代码: 这里记录了一系列的实验: 第一组实验:近乎空载&#xf…...

Essential C++ 面向对象4.1 ~ 5.4

个人认为,结合网上对《Essential c》的评论,它不适合初学者: (1)过于精炼,很多内容不会细讲 (2)中文版翻译较生硬,逻辑不够连贯清晰 (3)课后作业有…...

数组【数据结构与算法】

什么是线性表?什么是非线性表?什么是数组?数组如何实现根据下标随机访问数组元素?为什么数组从下标0开始,不从下标1开始? 什么是线性表? 数据结构元素只有前后关系。 线性表包括:数…...

Python克隆单个网页

网上所有代码都无法完全克隆单个网页,不是Css,Js下载不下来就是下载下来也不能正常显示,只能自己写了,记得点赞~ 效果如图: 源码与所需的依赖: pip install requests pip install requests beautifulsoup4…...

电脑硬盘数据恢复哪个好?值得考虑的 8 个硬盘恢复软件解决方案

借助硬盘恢复软件,任何人都可以在家中恢复丢失的文件,而无需任何特殊技能。事实上,最困难的一步是选择最佳解决方案,因为可用选项的数量可能有点多。幸运的是,这篇文章可以为您提供帮助。 8 款顶级硬盘数据恢复软件解决…...

第二十三节——路由守卫

一、概念 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。简单理解:导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这…...

在gitlab中的使用kaniko打造流水线

文章目录 kaniko工具介绍环境说明系统版本组件版本组件部署参考链接 部署harbor下载解压、创建相关目录配置部署 gitlab集成harbor集成项目ci配置最终结果 kaniko工具介绍 kaniko 是一种从容器或 Kubernetes 集群内的 Dockerfile 构建容器镜像的工具。 kaniko 解决了使用 Doc…...

【C语言 | 预处理】C语言预处理详解(一) —— #define、#under、#if、#else、#elif、#endif、#include、#error

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…...

19、Flink 的Table API 和 SQL 中的自定义函数及示例(2)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

oracle和金仓区别,个人睬坑

1、select中使用相关子查询,oracle中正常执行效率,在金仓中严重影响性能。以下是出现问题原SQL修改之后,可在金仓执行效率好,但在oracle效率不好 思路将”select相关子查询“修改成left join多表连接。注意:分页情况时…...

避坑指南:Win11下用VS2022配置PCL1.12.1,环境变量和VTK警告都帮你搞定了

Win11下VS2022配置PCL1.12.1实战避坑手册 最近在帮团队搭建点云处理开发环境时,发现网上大多数PCL安装教程都存在两个致命问题:要么对环境变量配置一笔带过,要么对VTK版本警告视而不见。这直接导致新手开发者卡在环境配置环节数小时甚至数天。…...

三指数平滑与网格搜索在时间序列预测中的实践

1. 时间序列预测中的三指数平滑方法解析三指数平滑(Triple Exponential Smoothing),又称Holt-Winters方法,是时间序列预测中最经典的技术之一。我在实际业务预测项目中多次使用这种方法,特别是在处理具有明显趋势和季节…...

【ArkUI】使用 Grid/GridItem 组件构建网格显示

一、概述 网格布局是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。 ArkUI提供了 Grid 容器组件和子组件 …...

Elasticsearch核心架构:集群(Cluster)原理详解与核心作用

Elasticsearch核心架构:集群(Cluster)原理详解与核心作用一、前言二、什么是 Elasticsearch Cluster?1. 官方定义2. 通俗理解3. 核心特点三、Elasticsearch Cluster 核心架构流程图四、ES 集群三大核心角色(节点类型&a…...

3分钟专业解锁Mac NTFS读写:Free-NTFS-for-Mac深度实战指南

3分钟专业解锁Mac NTFS读写:Free-NTFS-for-Mac深度实战指南 【免费下载链接】Free-NTFS-for-Mac Nigate: An open-source NTFS utility for Mac. It supports all Mac models (Intel and Apple Silicon), providing full read-write access, mounting, and manageme…...

保姆级教程:在Windows上部署字节跳动Piano Transcription,把MP3钢琴曲一键转成MIDI

零基础Windows部署指南:用字节跳动Piano Transcription将钢琴曲转为MIDI 你是否收藏了许多优美的钢琴曲MP3,却苦于无法直接用于音乐创作或学习?字节跳动开源的Piano Transcription项目能将这些音频一键转换为可编辑的MIDI文件。本教程将手把…...

告别混乱视图:用Imaris的Section与Free Rotate功能快速‘摆正’你的3D图像

告别混乱视图:用Imaris的Section与Free Rotate功能快速‘摆正’你的3D图像 当你面对一个角度歪斜的3D细胞图像时,是否曾为无法在标准解剖平面上进行精确测量而苦恼?在神经突触的共聚焦扫描数据中,一个微小的旋转偏差可能导致突触间…...

告别单向控制:用RDM协议给你的DMX灯光系统做个‘体检’和‘点名’

告别单向控制:用RDM协议给你的DMX灯光系统做个‘体检’和‘点名’ 灯光控制系统的运维人员常常面临一个尴尬局面:当舞台上的灯具突然罢工时,你只能靠肉眼和经验去排查故障。传统DMX512协议的单向通信特性,让系统维护变成了"盲…...

如何永久保存微信聊天记录?WeChatMsg终极免费工具完全指南

如何永久保存微信聊天记录?WeChatMsg终极免费工具完全指南 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/W…...