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.mzph.cn/news/134702.shtml

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

相关文章

Vue实现面经基础版案例(路由+组件缓存)

一、面经基础版-案例效果分析 1.面经效果演示 2.功能分析 通过演示效果发现,主要的功能页面有两个,一个是列表页,一个是详情页,并且在列表页点击时可以跳转到详情页底部导航可以来回切换,并且切换时,只有…

掌握未来:PureBasic for Mac引领BASIC语言编辑器的新潮流

PureBasic for Mac是一种创新的BASIC语言编辑器,它赋予了编程更多的可能性。在这个充满机遇的时代,掌握编程就等于掌握了一种强大的工具,能够更好地理解和塑造世界。而PureBasic for Mac,正是这样一个让你轻松上手,高效…

如何开发一个求职招聘小程序?详细步骤解析与教程

一、确定需求和功能 在开发求职招聘小程序之前,需要明确需求和功能。通过对市场和用户需求的调研和分析,确定小程序需要具备哪些功能,如职位发布、简历投递、在线沟通、面试安排等。 二、选择开发方式 求职招聘小程序的开发方式有多种选择…

【C#枚举 Enum】

C#枚举 Enum 一、枚举 1、枚举是将变量的值罗列出来,变量的值只限于列举出来的值的范围。 2、枚举使用enum关键字来声明,与类同级。枚举本身可以有修饰符,但枚举的成员始终是公共的,不能有访问修饰符。枚举本身的修饰符仅能使用public和int…

【理解链表指针赋值】链表中cur->next = cur->next->next->next与cur =cur->next->next的区别

最近在做链表的题目的时候,对于所定义的cur链表指针产生了一些疑惑,查阅资料后整理一下我的理解: /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(n…

Android 常用 UI 组件

目录 ​编辑 1. View 和ViewGroup 2. Android UI 开发概述 2.1 界面布局开发 2.2 控件开发 2.3 AdapterView 与 Adapter 开发 2.4 UI 组件开发 2.5 自定义 View、图形图像和动画 1. View 和ViewGroup Android中所有的UI元素都是使用View和ViewGroup对象建立的,…

汽车标定技术(二)--基于XCP的标定测量实战

目录 1.工程创建 1.1 新建工程 1.2 设备配置 1.3 标定观测 1.4 刷写 2.原始hex文件与标定文件的合并 2.1 修改memory segment file 2.2 标定量地址偏移 ​编辑 2.3 标定后与原始hex文件合并 2.4 标定后直接merge 2.5 不用对ram地址进行偏移实现hex文件合并 本文使用…

Jdk 1.8 for mac 详细安装教程(含版本切换)

Jdk 1.8 for mac 详细安装教程(含版本切换) 官网下载链接 https://www.oracle.com/cn/java/technologies/downloads/#java8-mac 一、选择我们需要安装的jdk版本,这里以jdk8为例,下载 macOS 版本,M芯片下载ARM64版本…

Presentation Prompter 5.4.2(mac屏幕提词器)

Presentation Prompter是一款演讲辅助屏幕提词器软件,旨在帮助演讲者在公共演讲、主持活动或录制视频时更加流畅地进行演讲。以下是Presentation Prompter的一些特色功能: 提供滚动或分页显示:可以将演讲稿以滚动或分页的形式显示在屏幕上&a…

【Solidity】Remix在线环境及钱包申请

好久没有学习区块链方面的知识了,目前通过自学大致掌握了Fabric联盟链的搭建,链码编写、部署,api调用,可以独立开发出一些基于fabric的应用,感觉开发出去中心化的应用还是很有意思的,因为他与之前开发的ssm…

数据集:机器人理解世界的关键

原创 | 文 BFT机器人 传统的机器人和工业自动化解决方案已经颇有成效。在工厂中入驻自动化机器人可以快速地帮助工人们完成长时间重复劳动的任务。随着用工成本上涨、技能人才短缺、工作环境恶劣等问题的凸显,社会更迫切地需要采用自动化设备代替人工来完成该类操作…

Pod控制器详解

目录 一、Pod控制器及其功用 二、Deployment控制器 三、StatefulSet控制器 四、DaemonSet控制器 五、Job控制器 六、CronJob 控制器 一、Pod控制器及其功用 Pod控制器,又称之为工作负载(workload),是用于实现管理pod的中间层…

解析找不到msvcr100.dll文件的解决方法,4个方法修复msvcr100.dll

msvcr100.dll是Microsoft Visual C 2010运行库的组成部分,一些基于Visual C开发的软件运行时会依赖这个dll文件。出现“找不到msvcr100.dll”的错误提示,往往意味着这个文件在你的计算机系统中丢失或损坏,导致相关程序无法正常运行。以下是找…

MSQL系列(十四) Mysql实战-SQL语句 left join inner join On和Where语句的区别

Mysql实战-SQL语句On和Where语句的区别 前面我们讲解了Join的底层驱动表 选择原理,也知道了基本的内连接外连接两种SQL查询表连接方式 但是我们再查询多表的时候on和where语句到底有什么区别? where是过滤条件 ,不满足where的一定不会出现在结果中on是连接条件, …

[MICROSAR Adaptive] --- Hello Adaptive World

Automotive E/E Architecture and AUTOSAR Adaptive Platform Vector Solution: MICROSAR Adaptive First project: Hello Adaptive World Summary 1 引言 1.1 AP诞生的历史背景 新一代电子电器架构通常将车内的节点分为三类。计算平台,预控制器和传感器执行器相关的节点,…

怎样选择文件外发控制系统,让数据实现高效安全交换?

制造型企业都非常重视其知识产权(IP)的安全性,尤其是其最有价值的产品设计数据的安全问题。基于复杂的供应链生态,每天可能要与几十家甚至上百家供应商及合作伙伴进行数据交换。不管是一级还是二级供应商,合作伙伴还是…

【黑马程序员】SpringCloud——微服务

文章目录 前言一、服务架构演变1. 单体架构2. 分布式架构2.1 服务治理 3. 微服务3.1 微服务结构3.2 微服务技术对比3.3 企业需求 二、SpringCloud兼容性 三、服务拆分及远程调用1. 服务拆分1.1 服务拆分注意事项1.2 导入服务拆分 Demo 2. 远程调用2.1 根据订单 id 查询订单功能…

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…

IDEA插件分享:代码零入侵,后端神器

今天给大家介绍一款好用的IDEA插件&#xff1a;Apipost-Helper-2.0。非常好用&#xff01;主要包含以下功能&#xff1a; 1、无侵入生成API文档 编写完代码后&#xff0c;只需右键upload同步接口即可快速将源码中包含的API以及注解自动生成API文档&#xff0c;并生成可以访问…

说说你在React项目是如何捕获错误的?

一、是什么 错误在我们日常编写代码是非常常见的 举个例子&#xff0c;在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏&#xff0c;导致整个应用崩溃&#xff0c;这是不应该出现的现象 作为一个框架&#xff0c;react也有自身对于错误的处理的解…