Mac安装vue.js开发环境

待我称王封你为后i 2022-04-22 00:16 260阅读 0赞

本来以为在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][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默认的模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1eXV5YW5nNjY4OA_size_16_color_FFFFFF_t_70]

对于用惯了idea的同学可能想在idea中开发vue，idea配置vue开发环境网上有很多教程，这里就不重复了，随便贴一篇：[https://www.cnblogs.com/phpdragon/p/7216994.html。][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;
            }
    }

[https_registry.npm.taobao.org]: https://registry.npm.taobao.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1eXV5YW5nNjY4OA_size_16_color_FFFFFF_t_70]: /images/20220422/8460e67476df44aeac12bc80f3546be8.png
[https_www.cnblogs.com_phpdragon_p_7216994.html]: https://www.cnblogs.com/phpdragon/p/7216994.html%E3%80%82