linux中搭建vue环境

悠悠 2023-02-21 06:18 10阅读 0赞

## 1.安装nodejs环境 ##

首先在[nodejs官网][nodejs]选择自己需要下载的版本。进入文件后选择tar.xz，复制下载的链接。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70]  
使用wget下载对应的tar.xz文件。

wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.xz
    ## 创建目录
    mkdir -p /usr/local/nodejs
    ## 解压到指定目录
    tar -xf node-v12.18.1-linux-x64.tar.xz -C /usr/local/nodejs
    ## 进入解压后的目录
    /usr/local/nodejs
    ## 重命名文件夹
    mv node-v12.18.1-linux-x64/ node-v12.18.1
    ## 进入node-v12.18.1中查看版本情况
    cd node-v12.18.1
    ./bin/node -v

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 1]  
建立软连接将nodejs变为全局

ln -s /usr/local/nodejs/node-v12.18.1/bin/npm /usr/local/bin/
    ln -s /usr/local/nodejs/node-v12.18.1/bin/node /usr/local/bin/

完成后使用`node -v`查看版本信息。  
![在这里插入图片描述][20200629095044235.png]

## 2.安装cnpm ##

cnpm是淘宝对npm的镜像服务器，这样依赖的包安装起来就快多了。

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

安装完成后会在你的nodejs的bin下有一个cnpm的目录，我们需要将其软连接到/usr/local/bin/中。  
![在这里插入图片描述][20200629095903627.png]  
建立软连接：

## 如果不确定之前/usr/local/bin有无cnpm可以先切换到目录中查看，如果有先删除再建立软连接
    ln -s /usr/local/nodejs/node-v12.18.1/bin/cnpm /usr/local/bin/cnpm

建立连接后/usr/local/bin目录内容如下：  
![在这里插入图片描述][20200629100118911.png]  
查看版本：`cnpm -v`  
![在这里插入图片描述][20200629100156659.png]

## 3.安装vue-cli ##

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。  
安装命令：`cnpm install -g vue-cli`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 2]  
完成后同样在/usr/local/nodejs/node-v12.18.1/bin会多出一个vue的目录，我们需要建立软连接。  
![在这里插入图片描述][20200629100725222.png]

ln -s /usr/local/nodejs/node-v12.18.1/bin/vue /usr/local/bin/

完成后我们使用`vue --version`查看版本信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 3]

## 4.安装pm2 ##

pm2是管理后台服务运行的一个组件。安装命令`npm install -g pm2`，完成后同样可以在/usr/local/nodejs/node-v12.18.1/bin查看安装情况。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 4]  
看见目录下有pm2后，需要我们建立全局的软连接。

ln -s /usr/local/nodejs/node-v12.18.1/bin/pm2 /usr/local/bin/

完成后输入pm2查看相关信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 5]  
pm2的相关操作：

1.  启动服务  
    比如我需要启动一个server.js，则切换到对应的vue工程根目录中，使用pm2 start server.js去启动项目即可。  
    ![在这里插入图片描述][20200701114013564.png]
2.  查看服务日志 `pm2 log`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 6]
3.  停止pm2：`pm2 stop`
4.  列举pm2列表：`pm2 list`

## 5.初始化vue项目 ##

创建一个文件夹命名为vue-pdf，切换到该目录中，执行`vue init webpack vue-pdf`来初始化项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 7]  
完成后进入目录中，运行`npm install`去安装依赖。

[nodejs]: https://nodejs.org/dist/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629092340833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629093234813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[20200629095044235.png]: https://img-blog.csdnimg.cn/20200629095044235.png
[20200629095903627.png]: https://img-blog.csdnimg.cn/20200629095903627.png
[20200629100118911.png]: https://img-blog.csdnimg.cn/20200629100118911.png
[20200629100156659.png]: https://img-blog.csdnimg.cn/20200629100156659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020062910063025.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[20200629100725222.png]: https://img-blog.csdnimg.cn/20200629100725222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200629100851848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200701113509922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200701113706149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[20200701114013564.png]: https://img-blog.csdnimg.cn/20200701114013564.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200701114111368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200629102138818.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zODkyNDY5NQ==,size_16,color_FFFFFF,t_70