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基础的。
  • 后面再跟大家分享写的过程吧。

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

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

相关文章

Prometheus接入AlterManager配置企业微信告警(基于K8S环境部署)

文章目录 一、创建企业微信机器人二、配置AlterManager告警发送至企业微信三、Prometheus接入AlterManager配置四、部署PrometheusAlterManager(放到一个Pod中)五、测试告警 注意:请基于 PrometheusGrafana监控K8S集群(基于K8S环境部署)文章之上做本次实验。 一、创…

RLHF的替代算法之DPO原理解析:从Zephyr的DPO到Claude的RAILF

前言 本文的成就是一个点顺着一个点而来的,成文过程颇有意思 首先,如上文所说,我司正在做三大LLM项目,其中一个是论文审稿GPT第二版,在模型选型的时候,关注到了Mistral 7B(其背后的公司Mistral AI号称欧洲…

HTML5的语义元素

HTML5语义元素&#xff1a; HTML5提供新的语义元素来明确一个web页面的不同部分&#xff1a;<head>、<nav>、<section>、<article>、<aside>、<figcation>、<figure>、<footer>。 1&#xff09;、<section>元素&#x…

【数智化人物展】觉非科技CEO李东旻:数据闭环,智能驾驶数智时代发展的新引擎...

李东旻 本文由觉非科技CEO李东旻投递并参与《2023中国企业数智化转型升级先锋人物》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 数智化的主要作用是帮助决策。它的核心是大数据&#xff0c;以大数据为基础&#xff0c;匹配合适的AI技术&#xff0c;促使数…

Java连接Redis并操作Redis中的常见数据类型

目录 一. Java连接Redis 1. 导入依赖 2. 建立连接 二. Java操作Redis的常见数据类型存储 1. Redis字符串(String) 2. Redis哈希(Hash) 3. Redis列表&#xff08;List&#xff09; 4. Redis集合&#xff08;Set&#xff09; 一. Java连接Redis 1. 导入依赖 pom依赖…

Java版本电子招标采购系统源码:—实现多寻源比价,风险预警

营造全面规范安全的电子招投标环境&#xff0c;促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标…

使用Scrapy的调试工具和日志系统定位并解决爬虫问题

目录 摘要 一、Scrapy简介 二、Scrapy的调试工具 1、Shell调试工具 2、断点调试 三、Scrapy的日志系统 四、实例解析 1、启用详细日志 2、断点调试 3、分析日志 4、解决问题 五、代码示例 总结 摘要 本文详细介绍了如何使用Scrapy的调试工具和日志系统来定位并解…

QML 仪表盘小示例

本次项目已发布在CSDN->GitCode,下载方便,安全,可在我主页进行下载即可,后面的项目和素材都会发布这个平台。 个人主页:https://gitcode.com/user/m0_45463480怎么下载:在项目中点击克隆,windows:zip linux:tar.gz tar # .pro TEMPLATE = appTARGET = dialcontrol​#…

Figma 怎么切图?新手入门教程详解

Figma 是一个基于浏览器的协作的UI设计工具&#xff0c;其以轻量、便捷、跨平台使用、协同便捷的特点&#xff0c;迅速吸引了广大UI/UX 设计师们的喜欢。但是设计师经常遇到反复切图、交付开发等问题&#xff0c;所以借此机会分享一篇关于 Figma 切图的必要知识点和交付经验。 …

【广州华锐互动】VR综合布线虚拟实验教学系统

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活和工作带来了前所未有的便利。在建筑行业中&#xff0c;VR技术的应用也日益广泛&#xff0c;尤其是在综合布线方面。 广州华锐互动开发的VR综合布线虚拟实…

数据资产与自助BI的一体化实践

01 数据资产中的数据治理 随着数据资源被提高到数据资产的高度&#xff0c;数据治理成为确保有效管理和利用数据资产的一组流程和技术&#xff0c;而数据资产目录是包含企业数据资产的全息描述信息的存储库&#xff0c;并充当有效管理数据资产的&#xff08;逻辑上的&#xff…

LeetCode | 206. 反转链表

LeetCode | 206. 反转链表 OJ链接 这里有两个思路 我们先来看第一个思路&#xff1a; 创建一个新的链表&#xff0c;然后将原链表头插头插需要保存下一个的地址&#xff0c;再头插 代码如下&#xff1a; struct ListNode* reverseList(struct ListNode* head) {struct ListN…

Java自学第2课:Java语言基础知识要点

1 Java主类结构 任务&#xff1a;创建新项目名为item&#xff0c;包名为number&#xff0c;类名为first。 1.1 包声明 不指定包时&#xff0c;默认就是工程名&#xff0c;指定后&#xff0c;类文件可以分类了&#xff0c;是这意思吧。包就大概等于一个文件夹。而且在类文件中…

多人游戏小程序源码系统 带完整的搭建教程

现如今&#xff0c;人们对于娱乐和社交的需求也在不断提高。多人游戏作为一种能够满足人们社交需求的游戏类型&#xff0c;越来越受到用户的欢迎。同时&#xff0c;小程序作为一种轻量级的应用程序&#xff0c;在微信等平台上得到了广泛的应用和推广。因此&#xff0c;开发多人…

电商API接口文档|1688API接口的接入获取获得1688商品详情it按关键字搜索商品 按图搜索1688商品(拍立淘)

API接口文档 前面讲到的关于接口的请求方式、类型、原理、安全机制等&#xff0c;产品经理能够简单了解一些就可以满足日常工作中的需要。接口文档是产品经理日常工作中经常会使用到的&#xff0c;特别是做开放平台或B端的产品经理&#xff0c;需要经常的看和写接口文档。 那如…

【rust/esp32】初识slint ui框架并在st7789 lcd上显示

文章目录 说在前面关于slint关于no-std关于dma准备工作相关依赖代码结果参考 说在前面 esp32版本&#xff1a;s3运行环境&#xff1a;no-std开发环境&#xff1a;wsl2LCD模块&#xff1a;ST7789V2 240*280 LCDSlint版本&#xff1a;master分支github地址&#xff1a;这里 关于s…

计算机视觉基础——基于yolov5-face算法的车牌检测

文章目录 车牌检测算法检测实现1.环境布置2.数据处理2.1 CCPD数据集介绍2.1.1 ccpd2019及20202.1.2 文件名字解析 2.2数据集处理2.2.1 CCPD数据处理2.2.2 CRPD数据集处理 2.3 检测算法2.3.1 数据配置car_plate.yaml2.3.2 模型配置2.3.3 train.py2.3.4 训练结果 2.4 部署2.4.1 p…

【计算机组成与设计】Chisel取指和指令译码设计

本次试验分为三个部分&#xff1a; 目录 设计译码电路 设计寄存器文件 实现一个32个字的指令存储器 设计译码电路 输入位32bit的一个机器字&#xff0c;按照课本MIPS 指令格式&#xff0c;完成add、sub、lw、sw指令译码&#xff0c;其他指令一律译码成nop指令。输入信号名…

基于Matlab的yolo算法行人检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 # 基于Matlab编写的Yolo算法行人检测系统介绍 基于Matlab编写的Yolo算法行人检测系统是一种用于自动检测图像或视频…

了解web3,什么是web3

Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;将各种在线活动更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;它包括了很多方面&#xff0c;如数字货币、去中心化应用、智能合约等等。听不懂且大多数人听到这个东西&#xff0c;直觉感觉就像骗子…