M1 pro芯片启动Vue项目的方法步骤

目录
  • 引言
  • 安装Homebrew
  • 安装nvm
  • 安装Node
  • 安装结束

引言

双十一剁手，买了m1 pro的MacBook Pro，所有环境需要重新搭一遍，后端项目比较容易，装个idea就可以启动，前端vue真的是不太通，所以研究了一下，搭建环境并启动vue。

安装Homebrew

homebrew是mac本很好的管理软件安装的工具，所以拿到mac本的第一时间我就安装了homebrew，由于网络原因很有可能安装失败，用下面的命令可以使用国内镜像，安装速度比较快。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

输入1后，按照提示一步一步进行安装就可以。

安装nvm

Nvm 是一个管理 Node 版本的工具，当项目多了以后，总会碰到需要切换 Node 环境的时候，所以推荐大家使用 Nvm 来安装 Node。通过下面的命令可以安装。

brew install nvm

安装完成后，需要配置环境变量。通过下面的命令编辑.bash_profil配置文件。

vi ~/.bash_profile

将下面的配置脚本写入文件中。

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

写入后需要让配置生效，执行下面的命令。

source ~/.bash_profile

安装Node

接下来通过nvm安装Node，适配M1 pro芯片的node版本是v15。

nvm i v15

该命令运行完后，会执行很久，编译 node ，大家耐心等就好了，大概需要 5-10 分钟，就会提示安装成功。再提醒一句，报任何错误，首先先检查是不是网络问题，例如 443 、 connect timeout 等。

安装结束

至此，git+homebrew+Node+npm的搭建已经完成了。接下来就可以在本地执行npm install和npm run ...命令来启动前端Vue项目，正常访问了。

npm包安装失败：可以通过修改国内镜像安装所需依赖。执行下面代码成功后，可以执行npm install下载依赖正常启动项目，亲测有效。

npm config set registry https://registry.npm.taobao.org
npm info underscore

到此这篇关于M1 pro芯片启动Vue项目的方法步骤的文章就介绍到这了,更多相关M1 pro启动Vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • macOS M1(Apple Silicon)安装配置Conda环境的具体实现

    macOS M1(Apple Silicon)安装配置Conda环境的具体实现

    目录 下载软件 安装过程 由于常用的Anaconda和Miniconda现在都没有提供M1处理器支持的conda环境(截止于2021/2/4),虽然也不影响正常使用,但如果能有支持的版本会更好.以下是conda-forge提供的miniforge,目前有支持Apple Silicon的版本软件.下文将演示如何安装及使用. 下载软件 首先,下载 miniforge3,下载地址为:https://github.com/conda-forge/miniforge/#download 在页面中选择 Ap

  • MacBook m1芯片采用miniforge安装python3.9的方法示例

    MacBook m1芯片采用miniforge安装python3.9的方法示例

    因为m1芯片是arm版本的架构,以前在mac上的很多软件都是基于Intel架构的软件,apple开发了rossta2,可以在m1上运行intel架构的软件,但是性能会有损失 python的3.9版本已原生支持m1芯片,更多支持m1芯片的软件可以查看网址:https://isapplesiliconready.com/ 使用miniforge GitHub地址:https://github.com/conda-forge/miniforgeGitee 地址:https://gitee.com/ph

  • 苹果M1芯片安装nginx 并且部署vue项目步骤详解

    苹果M1芯片安装nginx 并且部署vue项目步骤详解

    brew安装nginx 苹果mac安装使用 brew 安装,如果brew没有安装的话,请到搜索其他地方. 执行命令 第一步当然是更新我们的brew库,可以认为这个玩意就是个软件仓库,类似于安卓市场,苹果appStore brew update 第二步直接查找我们的brew库中有没有nginx这个玩意儿 brew search nginx 如果出现,证明库中已经有了,直接进行安装命令 brew install nginx 安装完 只要没有报错,你的nginx就是已经安装成功了... mac环境下的

  • M1 mac安装PyTorch的实现步骤

    M1 mac安装PyTorch的实现步骤

    目录 第一步 -安装和配置Miniforge 第二步-创建虚拟环境 第三步 -安装PyTorch 第四步 -测试 最后总结 M1 macbook已经不是什么新产品了.TensorFlow官方已经给出了安装指南和效率评测. 本文将介绍如何在M1机器上本地安装和运行PyTorch.你使用的M1机型(Air.Pro.Mini或iMac)没有区别. 第一步 -安装和配置Miniforge 我花了很多时间为数据科学需求配置我的M1 Mac.但是都不能完美的解决我的问题.直到我找到了这个.根据网速的不同,完

  • macOS M1(AppleSilicon) 安装TensorFlow环境

    目录 创建conda环境 下载Apple提供的tensorflow支持 安装环境前准备工作 安装依赖及相关库 测试 参考资料 苹果为M1芯片的Mac提供了TensorFlow的支持,可以使用M1芯片进行硬件加速,以下是如何给使用M1芯片的macOS安装TensorFlow的环境. 首先,在安装之前,我们需要先安装好conda-forge的miniforge3.具体可参考<MacOS M1(Apple Silicon) 安装配置 Conda 环境>. 创建conda环境 miniforge3默认

  • M1 Macbook vscode C++ debug调试实现

    M1 Macbook vscode C++ debug调试实现

    目录 版本说明 扩展 配置文件 运行调试 这里给出自己摸索的最基本的调试方式,需要进阶调试感觉还是需要一定的学习成本的,尝试了几个网上的博客,暂时没遇到直接可以运行的.所以这里记录一下大概方法. 主要是需要在目录文件下配置两个 json 文件(tasks.json,launch.json) 版本说明 VS code 版本是在官网直接下载的 M1 版本的 February 2021 (version 1.54) 官方下载 扩展 主要是要下载 codeLLDB 的下载,直接在 VS code 里面搜

  • Mac M1安装Homebrew的方法步骤

    Mac M1安装Homebrew的方法步骤

    最常用命令 搜索软件: brew search 软件包名称 安装软件: brew install 软件包名称 卸载软件: brew uninstall 软件包名称 错误解决 问题1 : curl: (7) Failed to connect to http://raw.githubusercontent.com port 443: Connection refused" 错误 解决方法: 打开 www.ipaddress.com 网站查询 raw.githubusercontent.com 主机

  • M1 pro芯片启动Vue项目的方法步骤

    M1 pro芯片启动Vue项目的方法步骤

    目录 引言 安装Homebrew 安装nvm 安装Node 安装结束 引言 双十一剁手,买了m1 pro的MacBook Pro,所有环境需要重新搭一遍,后端项目比较容易,装个idea就可以启动,前端vue真的是不太通,所以研究了一下,搭建环境并启动vue. 安装Homebrew homebrew是mac本很好的管理软件安装的工具,所以拿到mac本的第一时间我就安装了homebrew,由于网络原因很有可能安装失败,用下面的命令可以使用国内镜像,安装速度比较快. /bin/zsh -c "$(cu

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    简介 Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行(这个比较抽象,暂且写上,不做解释).Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行.通常与版本管理工具(SCM).构建工具结合使用.常用的版本控制工具有SVN.GIT,构建工具有Maven.Ant.Gradle. jenkins安装 1.安装JDK yum install

  • pycharm新建Vue项目的方法步骤(图文)

    1.首先安装Node.js 官网:https://nodejs.org/zh-cn/ 1)根据自己电脑型号下载好 2)点击安装,傻瓜式一步一步最后完成安装 3)打开CMD,检查是否正常,如果显示了如下则安装正常 2.使用淘宝NPM镜像 大家都知道国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 这样就可以使用cnpm命令来安装模块了 3.项目初始

  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    目录 创建项目 添加electron-builder electron下载失败 窗体运行 打包exe 白屏 创建项目 点击这里 添加electron-builder 1.在项目目录下运行命令:vue add electron-builder2.electron-builder添加完成后会选择electron版本,直接选择最新版: electron下载失败 vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron 窗体运行 1

  • nginx下部署vue项目的方法步骤

    今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来. 首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放的文件夹下 运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了: 然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf 点击进去然后找到一个ngi

  • webstrom Debug 调试vue项目的方法步骤

    第一种,使用vue插件 1.下载插件:https://www.jb51.net/softs/588080.html 这样直接run一个vue项目,你就会看见插件标亮了 打开调试模式,你就会看见最后有个vue标记,打开能看见当前vue页面渲染相关数据 第二种,使用webstrom调试下载插件 下载地址:https://www.jb51.net/softs/171905.html 打开webstrom Debugger, 记住端口号 打开刚才安装的插件,选项,填入刚才看见的端口号 添加一个debug

  • 9102年webpack4搭建vue项目的方法步骤

    前言 首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客.因为公司使用vue比较多,构建vue项目使用vue-cli显得有点臃肿,感觉还是自己配置比较好些,所以就有了这篇教程.由于水平有限,欢迎大家指正,一起进步. 新建项目 1.新建名为webpackconfig文件夹 2.使用命令 npm init -y 在webpackconfig文件夹中生成package.josn 3.下载依赖包 npm i webpac

  • 用Cordova打包Vue项目的方法步骤

    现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 现在的打包Vue项目目前流行的就是使用weex和cordova.weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下.下面说说怎么使用cordova打包Vue项目: 第一步:安装cordova,创建好cordova项目. 第二步:修改vue项目 首先修改vue项目的index.html,引入cordova.js.这个引入在浏览器打开会报错.要打包后运行在真机

  • babel7.x和webpack4.x配置vue项目的方法步骤

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了.看来每日沉迷项目,已经跟不上节奏了.这里记录一下遇到的问题以及解决方案. 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use ne

  • vscode 开发Vue项目的方法步骤

    下载地址: vscode https://marketplace.visualstudio.com/VSCode或者本地地址:https://www.jb51.net/softs/606746.html 开始安装插件 Vetur : vue的文件代码高亮 Atom One Dark Theme : 好看的代码颜色主题 Simple icon theme :清爽文件夹主题 Prettier - code : 代码格式化 ESLint :代码规范检查 Debugger for Chrome :断点调

随机推荐