【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

简介: 【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)

概要介绍

首先,了解一下,Vue 的整体开发环境。

  • Homebrew:Mac 系统下的包管理器,类似于 Linux 下的 apt-get,Windows 的控制面板 - 安装删除程序
  • Node.js JavaScript 运行环境(runtime),不同系统之间不能直接运行各种编程语言,Runtime类似于各国会议上的同声传译
  • npm Nodejs 下的包管理器,类似于 Mac 下的 Homebrew
  • webpack Vue的组件都是通过 .vue 或者像微信小程序的.wxml 和.wcss 等自定义的,组件都无法被用户通过各种浏览器解析,需要被翻译打包成 js文件
  • vue-cli 用来生成模版的 Vue 工程,相当于按照设计好的图纸来盖房子

使用终端安装Vue运行环境

1、安装 Homebrew

Homebrew是osx下面最优秀的包管理工具,没有之一。先在终端查看是否已安装brew

brew -v

如果返回 Homebrew 的版本号 例如:Homebrew 1.3.6 那么恭喜你,可以跳过这一步,如果没有,则执行第一步。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2、安装 node.js

附加:切换node版本可参该文章:(node版本不一致会导致依赖包不同)

brew install nodejs

如果为了避免使用brew命令经常出错的情况,可以采用手动安装  

下载地址:https://nodejs.org/en/download/ (选择mac os)

验证:

由于node安装的时候就自带npm了。如果出现版本信息,就说明安装成功了。

node -v #查看node版本
npm -v #查看npm版本

3、 获取nodejs模块安装目录访问权限 (必须执行)

sudo chmod -R 777 /usr/local/lib/node_modules/

然后输入用户密码即可(由于是sudo)

4、安装 淘宝镜像 (cnpm)

使用sudo目的是npm安装在了/usr/local/lib下,没有对应的操作权限

npm install -g cnpm --registry=https://registry.npm.taobao.org

5、安装webpack

sudo cnpm install webpack -g

注意:使用上面语法执行npm run dev 可能报错!

解决方法:MAC电脑出现 .bin/webpack-dev-server permission denied 提示权限问题,为了避免出现这个问题你可以采取下面语法

sudo cnpm install webpack-dev-server -g 

6、安装vue脚手架

npm下载速度比较慢,目前cnpm已经成功替代npm

sudo cnpm install -g vue-cli

以上基本的安装完成

可以使用下面命令进行查看结果:

vue list

7、安装项目依赖

首先,如果已经有vue项目,则进入项目根目录 ,安装项目依赖

cnpm install

如果没有Vue项目,则可参考这篇文章下载vue项目:

8、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

9、启动项目

npm run dev
cnpm run dev

cnpm run dev 后面的dev在项目中表示的是dev环境,是在package.json文件里面,scripts字段定义的对象脚本,当然了,还可以有其他的环境,不同的环境对应的配置不同,在各境上运行只需要执行对应的命令即可。(可能有的是cnmp run sever,根据自己项目的配置启动即可)

相关文章
|
17天前
|
监控 Java Shell
「Mac畅玩鸿蒙与硬件7」鸿蒙开发环境配置篇7 - 使用命令行工具和本地模拟器管理项目
本篇将讲解在 macOS 上配置 HarmonyOS 开发环境的流程,聚焦 hvigorw 命令行工具的使用。我们将以创建 HelloWorld 项目为例,演示使用 hvigorw 进行项目构建、清理操作,并通过 DevEco Studio 的本地模拟器进行预览,帮助提升项目开发与调试效率。
51 3
「Mac畅玩鸿蒙与硬件7」鸿蒙开发环境配置篇7 - 使用命令行工具和本地模拟器管理项目
|
1月前
|
Windows Python
【10月更文挑战第2天】「Mac上学Python 2」入门篇2 - 开发环境命令行操作与文件管理
本篇将详细介绍Windows和Mac系统中的常用命令行操作与文件管理,帮助用户掌握如何通过终端或命令提示符进行文件管理和操作开发环境。内容涵盖路径切换、文件与文件夹的创建、删除、查看文件内容等基本操作,这些技能是后续Python开发的基础。
124 6
【10月更文挑战第2天】「Mac上学Python 2」入门篇2 - 开发环境命令行操作与文件管理
|
1月前
|
TensorFlow 算法框架/工具 iOS开发
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
57 0
|
2月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
51 3
|
3月前
|
Python
Mac安装Python3.12开发环境
Mac安装Python3.12开发环境
142 2
|
3月前
|
Java 应用服务中间件 Maven
Mac使用Idea配置传统SSM项目(非maven项目)
Mac使用Idea配置传统SSM项目(非maven项目)
54 1
|
3月前
|
芯片 iOS开发 MacOS
Mac上运行windows软件-GPTK
Mac上运行windows软件-GPTK
178 1
|
3月前
|
移动开发 JavaScript 开发工具
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
|
5月前
|
开发工具 git
MAC如何使用Git命令行上传本地项目及理解,failed to push some refs to ‘https://gitee.com/brother-barking/spxx.git
MAC如何使用Git命令行上传本地项目及理解,failed to push some refs to ‘https://gitee.com/brother-barking/spxx.git
|
6月前
|
JavaScript
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异