Mac Vue搭建开发环境

简介: Mac Vue搭建开发环境

Vue开发环境视频教程 密码: 3zfw


打开终端,安装brew

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

Homebrew中文安装官网

安装成功后,使用查看版本,验证是否安装成功

brew -v

输出:

1. Homebrew 2.1.11
2. Homebrew/homebrew-core (git revision 748b; last commit 2019-09-03)

安装node.js

brew install nodejs

也可以下载安装下载地址

安装成功后,使用验证

node -v

给nodejs目录赋权限

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

检查是否安装了npm,一般安装 node 的时候会自动帮你安装了的

npm -v

如果检查没有输出版本好,则自己安装npm,如果输出了版本号则跳过 npm 的安装继续下一步。

brew install npm

Mac-npm 安装与更新

安装成功后,使用验证

npm -v

安装 淘宝镜像 (npm),如果你网速好,可以不安装 cnpm,不安装则跳过这一行下面的 cnpm 换成 npm 就行,如果网速不好,推荐使用 cnpm,因为走的淘宝速度会比从国外拿东西快很多。


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

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue-cli -g

开始Vue

创建一个基于 webpack 模板的新项目

如果不知道当前的 vue 是什么版本,运行:

vue -V

vue版本 >= 3.0 创建项目需要看这里 【vue-cli3.x 创建项目方式】,3.0版本以下的可以继续往下看。


然后 cd 到一个指定文件夹,根据当前的版本使用不同的创建命令,运行

1. // vue-cli < 3.0
2. vue init webpack my-project

vue init webpack my-project 选项详解


这里需要进行一些配置,默认回车即可

创建完成之后,进入项目,安装并依次运行:

1. cd my-project
2. 
3. cnpm install
4. 
5. cnpm run dev

cnpm run dev 之后弹出下面这个页面就是成功了,现在你就可以用ide打开这个项目进行开发了


image.png


Vue的环境也就搭建完毕了!!!!

额外在提现一句,就是如果需要用到Git的可以自行安装,百度教程很多。检查是否安装Git

git --version

可以Git官网下载对应版本傻瓜式安装。


相关文章
|
1月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
113 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
2月前
|
Windows Python
【10月更文挑战第2天】「Mac上学Python 2」入门篇2 - 开发环境命令行操作与文件管理
本篇将详细介绍Windows和Mac系统中的常用命令行操作与文件管理,帮助用户掌握如何通过终端或命令提示符进行文件管理和操作开发环境。内容涵盖路径切换、文件与文件夹的创建、删除、查看文件内容等基本操作,这些技能是后续Python开发的基础。
131 6
【10月更文挑战第2天】「Mac上学Python 2」入门篇2 - 开发环境命令行操作与文件管理
|
2月前
|
TensorFlow 算法框架/工具 iOS开发
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
81 0
|
3月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
68 3
|
4月前
|
Python
Mac安装Python3.12开发环境
Mac安装Python3.12开发环境
158 2
|
4月前
|
移动开发 JavaScript 开发工具
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
Mac 10.9x下安装配置phonegap3.0开发环境 (涉及android sdk配置)
|
5月前
|
JavaScript Windows
vue 搭建开发环境(2021版)
vue 搭建开发环境(2021版)
39 1
|
7月前
|
JavaScript 小程序 前端开发
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目(保姆级)
1848 2
|
7月前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
124 1
|
7月前
|
JavaScript
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异
Mac 使用CLI脚手架创建 Vue项目、不同版本创建项目的项目结构差异