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;
        }
}
相关文章
|
12天前
|
NoSQL 关系型数据库 MySQL
Windows、Linux、Mac安装数据库(mysql、MongoDB、Redis)#0
不同系统下进行MySQL安装、MongoDB安装、Redis安装
55 5
Windows、Linux、Mac安装数据库(mysql、MongoDB、Redis)#0
|
14天前
|
JSON 缓存 JavaScript
vue脚手架安装方法——2023年5月28日版本
vue脚手架安装方法——2023年5月28日版本
48 0
|
16天前
|
关系型数据库 MySQL 数据安全/隐私保护
【MySQL】 Docker 安装 MySQL8.0(mac)
【MySQL】 Docker 安装 MySQL8.0(mac)
|
16天前
|
JavaScript
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用
|
17天前
|
Go
Mac安装Angular并部署运行应用
Mac安装Angular并部署运行应用
|
17天前
|
域名解析 JavaScript 关系型数据库
使用宝塔面板安装wiki.js详细教程
使用宝塔面板安装wiki.js详细教程
|
17天前
|
自然语言处理 搜索推荐 iOS开发
Mac安装和使用GitBook
Mac安装和使用GitBook
|
17天前
mac安装homebrew失败:Failed to connect to raw.githubusercontent.com port 443: Connection refused
mac安装homebrew失败:Failed to connect to raw.githubusercontent.com port 443: Connection refused
|
19天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
46 0
|
19天前
|
JavaScript
总结vue3 的一些知识点:Vue.js 安装(下)
选取 Runoob,输出效果如下所示:

相关产品

  • 云迁移中心