在Mac上配置Vue开发环境

因为Vue是NodeJS的模块,要想使用Vue需要先安装NodeJS

  1. 在Mac中安装NodeJS通过brew包管理器就会很方便, 因为访问源速度问题建议使用5(阿里),Homebrew开源项目地址:https://gitee.com/cunkai/HomebrewCN/blob/master/README.md

    在终端输入, 在安装过程中提示选择下载镜像源,选择阿里即可

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

    使用brew安装NodeJS

    brew install nodejs 
    

    安装完毕后,执行以下命令查看nodejs的版本

    apple@apple ~ % node -v
    v19.3.0
    apple@apple ~ % npm -v
    8.19.2
    ```
    
         打开终端,执行以下俩条命令修改Node仓库位置,注意引号中的路径要换成你创建的文件夹所在的路径(xxx是用户名)
    
    npm config set prefix “/Users/xxx/kaifa/nodejs/node_global”
    npm config set cache “/Users/xxx/kaifa/nodejs/node_cache”
    
     修改nodejs模块安装目录访问权限
    
    sudo chmod -R 777 /Users/xxx/kaifa/nodejs
    
  2. 配置环境变量

    因为改变了全局安装路径,所以需要配置环境变量,不然出现新安装的工具命令找不到的问题。

    a. 执行命令vim ~/.bash_profile或者vim ~/.zshrc(建议执行后一个命令)

    b. 输入 i`,在文件的最后一行加入我们的命令位置如:

    export PATH="/usr/local/Cellar/node/19.3.0/bin:$PATH"
    
    # xxx 要换成当前用户名 和 上面配置的 路径相同
    export NODE_MODULES='/Users/xxx/nodejs/node_global'
    
    export PATH=$NODE_MODULES/bin:$PATH
    

    c. 按esc-> 输入 :wq 保存退出

    d. source ~/.bash_profile 或者source ~/.zshrc (根据上面操作的文件选择不同的同步方式)

  3. 使用npm安装Vue, 这里同样需要切换源,咱们使用淘宝源

    http://npm.taobao.orghttp://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。

    所以咱们使用http://registry.npmmirror.com

    npm config set registry http://registry.npmmirror.com
    

    检测是否安装成功:

    apple@apple ~ % npm config get registry
    http://registry.npmmirror.com/
    
  4. 先查看电脑里有没有安装vue

    vue -V //注意V大写,若提示 command not found 则进行下一步;若提示版本号为:2.9.6 ,则需要卸载这一版本

    ps:很多人用npm install vue-cli -g 命令,安装的都是2.9.6版本,最新的版本安装命令是“npm install -g @vue/cli”;另,3.0以上版本集成了图形界面,所以放弃2.9.6吧

    卸载2.9.6等旧版本的命令:sudo npm uninstall vue-cli -g

    新版vue脚手架安装命令:sudo npm install -g @vue/cli

    注:前面加sudo 是获取系统的权限,之后需要输入密码,不加sudo可能因为权限的问题安装失败。

    如果安装vue出现一些警告和错误,别管他,清除一下缓存就行

    npm cache clean --force
    
  5. 最后还需要安装下打包工具安装webpack

    npm install webpack -g
    
  6. 大功告成 开始使用

    创建新项目

    cd 本地文件夹
    
    sudo vue create test-demo 注意,项目名称不能有大写字母和汉字
    
    然后用箭头选择默认的即可
    

启动项目

cd 项目文件夹

npm run serve

用以上命令,启动后,会给你一个本地url地址,和一个网络地址,打开 http://localhost:8080/即可见到效果
启动项目
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容