Mac安装vue.js开发环境

简介: 本来以为在Mac上搭建vue.js的环境挺简单的,谁知遇到各种问题(可能是RP问题),网上解决的方法也寥寥无几,这里就记录下遇到的坑。

一、vue.js开发环境


1、安装 brew,这个简单,直接执行远程脚本


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

2、安装 nodejs,这一步时间可能略长(执行时间长短也有可能跟网络有关系)

brew install nodejs

3、获取nodejs模块安装目录访问权限

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


4、安装淘宝镜像,国内直接使用 npm 的官方镜像是非常慢的,所以这里使用淘宝 NPM 镜像

1)更改npm源:

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

(2)配置后可通过下面方式来验证是否成功,如果显示“https://registry.npm.taobao.org”则说明配置成功

npm config get registry


(3)然后安装淘宝的cnpm(如果该步骤报错“rollbackFailedOptional”,可以尝试执行步骤4或步骤5,否则跳过步骤4或步骤5)


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

(4)先删除原有的所有代理,再重新安装淘宝的cnpm

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


(5)报错“rollbackFailedOptional”,还可能是权限问题,用sudo执行:


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


以下是安装淘宝cnpm成功的结果:

MacBook-Pro:~ hu$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.0.0
added 632 packages from 843 contributors in 22.264s

5、用淘宝的cnpm安装vue

cnpm install vue
cnpm install --global vue-cli


到这里vue.js环境就算ok了。



二、初始化一个vue.js项目



1、自己创建并进入一个项目目录,创建一个名为VueDemo的vue项目

cd /usr/local/projects/vue/
vue init webpack VueDemo

创建项目可能会报错“vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=Parse Error”,可以尝试如下:

(1)清空npm代理,重新执行


npm config set proxy null
vue init webpack VueDemo

(2)或者sudo执行(webpack是构建工具,也就是整个项目是基于webpack的)


sudo vue init webpack VueDemo


创建项目成功的结果:

? Project name VueDemo
? Project description A Vue.js project
? Author danny <danny@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no
   vue-cli · Generated "VueDemo".
# Project initialization finished!
# ========================
To get started:
  cd vue-demo-01
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack


2、启动项目

(1)安装项目依赖,启动项目需要先安装项目所需依赖,就跟java的maven项目需要先更新dependencies一样,具体项目都依赖了什么,在项目根目录下package.json中的devDependencies标签下可以看到


cd /usr/local/projects/vue/VueDemo
sudo cnpm install


在Mac下,有些项目执行install时可能会报错“libtool: unrecognized option `-static’”,解决方法:在~/.bash_profile中添加“PATH="/Library/Developer/CommandLineTools/usr/bin:$PATH”,再重新打开一个终端,重新运行install命令。


安装成功之后,项目根目录会多出一个node_modules文件夹,这里边就是项目需要的依赖包资源(文件挺多的)。


(2)运行项目,用热加载的方式启动项目,在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。


cnpm run dev


启动成功的结果:

> vue-demo-01@1.0.0 dev /usr/local/projects/vue/VueDemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 95% emitting
 DONE  Compiled successfully in 3084ms                                                                                                                                   下午10:58:20
 I  Your application is running here: http://localhost:8080

打开http://localhost:8080就是vue默认的模板

106.png


对于用惯了idea的同学可能想在idea中开发vue,idea配置vue开发环境网上有很多教程,这里就不重复了,随便贴一篇:https://www.cnblogs.com/phpdragon/p/7216994.html



三、vue.js项目打包部署




当vue.js项目开发完成需要部署时,先打包,再部署。


1、打包


在项目目录下,执行

cnpm run build


执行完之后,项目根目录会出现一个dist文件夹,里面有一个index.html,直接打开就可以看到页面效果。


2、部署


上面步骤,dist就是打好的包,可以直接把dist部署在nginx等服务器下,以nginx为例,把nginx.conf中的location指向dist文件夹,就可以了。


server {
        listen  80;
        server_name  127.0.0.1;
        location / {
            root /data/delploy/dist/;
            index  index.html index.htm;
        }
}
相关文章
|
23天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
100 1
|
3月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
49 2
2024年5月node.js安装(winmac系统)保姆级教程
|
3月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
173 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
|
4月前
|
机器学习/深度学习 Python
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
本篇将详细介绍如何在Mac系统上安装和配置Anaconda,如何创建虚拟环境,并学习如何使用 `pip` 和 `conda` 管理Python包,直到成功运行第一个Python程序。通过本篇,您将学会如何高效地使用Anaconda创建和管理虚拟环境,并使用Python开发。
146 4
【10月更文挑战第5天】「Mac上学Python 6」入门篇6 - 安装与使用Anaconda
|
3月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
4月前
|
NoSQL Shell MongoDB
Mac OSX 平台安装 MongoDB
10月更文挑战第11天
44 4
|
4月前
|
应用服务中间件 Linux nginx
Mac os 安装 nginx 教程(success)
这篇文章是关于如何在Mac OS系统上使用Homebrew安装nginx及其依赖,并解决安装过程中可能出现的权限问题。
339 0
Mac os 安装 nginx 教程(success)
|
4月前
|
TensorFlow 算法框架/工具 iOS开发
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
手把手教你-MAC虚拟环境搭建TensorFlow开发环境
102 0
|
4月前
|
存储 缓存 资源调度
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
193 0
|
4月前
|
Web App开发 JavaScript 前端开发
JavaWeb 22.Node.js_简介和安装
JavaWeb 22.Node.js_简介和安装

热门文章

最新文章