开发环境

权限准备

为避免后续流程出现权限不足的相关提示，首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护：

csrutil status

若结果为csrutil enabled，则需通过以下步骤关闭保护模式：

1. 重新启动，并按住command + R组合键进入macOS的恢复模式
2. 点击主界面上方菜单栏实用工具→终端
3. 执行csrutil disable以关闭保护模式
4. 执行csrutil status，结果为System Integrity Protection status：disabled，即保护模式已关闭
5. 执行reboot以退出恢复模式并重启系统

若保护模式未开启或已通过上述步骤关闭，则继续修改local用户权限

sudo chown -R $(whoami) /usr/local

Homebrew

Homebrew通过Ruby语言（macOS已预装）执行，用于安装和管理macOS未预装的软件包，例如wget、composer、node(node.js)等，我们将通过Homebrew安装npm，用于后续安装Vue.js本地开发环境并创建webpack项目等。

安装

在终端中执行下述语句以安装Homebrew：

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

P.S:如果需要重装Homebrew，则执行以下语句即可卸载已安装的Homebrew：

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

npm

npm是JavaScript的软件包管理器，通过node.js执行（通过homebrew安装npm时，若本地未安装过node.js，将根据依赖关系自动安装）。

安装

brew install npm

授予npm相应操作权限

sudo chown -R $USER:$GROUP ~/.npm
sudo chown -R $USER:$GROUP ~/.config

vue.js

安装vue-cli

vue-cli是通过webpack创建vuejs项目所必须的命令行工具；webpack、webpack-cli将作为依赖项被一并安装

sudo npm install -g @vue/cli

通过PhpStorm/WebStorm创建Vue.js项目

为避免PhpStorm更新引起的流程变动，与PhpStorm相关的流程直接查看PhpStorm官方相关文档即可。

通过命令行创建Nuxt.js项目

// 安装Nuxt.js的项目创建工具
npm install -g create-nuxt-app

// 通过项目创建工具初始化新项目；这一步会询问项目名称、简介、作者名、包管理器、UI框架、后端框架等信息
create-nuxt-app name_of_project

按需安装非核心组件

通过命令行工具在项目根目录下执行相应语句即可：

// vue.js路由管理组件
npm install --save vue-router

// vue.js状态管理组件
npm install --save vuex

// 网络请求组件
npm install --save axios

// 表单验证组件
npm install --save vuelidate

// SASS/SCSS编译器
npm install --save --dev sass-loader node-sass

部署vue.js项目

// 本地通过webpack进行打包
npm run build

// 注：若服务器端使用Nginx管理服务，则需做相应配置；以宝塔Linux面板的站点配置文件为例：
upstream nodejs {
    server localhost:3000; // 端口号需与Node.js端口号一致
    keepalive 64;
}

server
{
    listen 80;

    // blablabla......

    // 确保这是最后一条location规则
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host  $http_host;
        proxy_set_header X-Nginx-Proxy true;
        proxy_set_header Connection "";
        proxy_pass      http://nodejs;
    }
}

原生vue.js项目

完成打包后，将在项目根目录下生成/build文件夹，将该文件夹及index.html文件上传到环境即可。

Nuxt.js项目universal模式

完成打包后，将在项目根目录的/.nuxt、/static、/store文件夹，nuxt.config.js、package.json文件上传到环境后，在项目目录下执行下列语句进行部署：

// 安装依赖包并启动环境
npm cache clear --force // 清理npm缓存
npm install // 根据当前package.json文件安装依赖
npm run start // 根据package.json和nuxt.config.js文件启动项目

PM2守护进程

// 安装PM2
npm install pm2

// 若提示“-bash: pm2: command not found”，则需要调整全局变量的PM2软连接
ln -s /root/.nvm/versions/node/v11.8.0/bin/pm2 /usr/local/bin/pm2
// 若提示“ln: creating symbolic link `/usr/local/bin/pm2': File exists”，则需删除已有软连接，然后再次运行上述“ln -s...”语句
mv /usr/local/bin/pm2 /tmp/

// 确认PM2安装情况
pm2 -v
// 通过PM2启动项目
pm2 start npm -- start
// 确认项目启动情况
pm2 list

日常发布流程

上传项目文件到环境后，删除环境中的package-lock.json，并运行以下语句即可

npm cache clear --force // 清理npm缓存
npm install // 根据当前package.json文件安装依赖
pm2 start npm -- start // 通过PM2运行npm的start命令启动项目