文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-10-24 05:27

关注

概要介绍

首先,了解一下,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,根据自己项目的配置启动即可)

来源地址:https://blog.csdn.net/qq_47831505/article/details/132779685

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯