Linux系统安装Vue环境并启动服务

最新推荐文章于 2024-08-13 12:33:09 发布

傅安安

最新推荐文章于 2024-08-13 12:33:09 发布

阅读量8.4k

点赞数 7

文章标签： linux vue.js npm

本文链接：https://blog.csdn.net/fhp123/article/details/122042432

版权

Linux安装nodejs
npm包管理器
安装cnpm国内资源镜像
安装vue-cli脚手架构建工具
用vue-cli构建项目

一、Linux安装nodejs

安装环境

本机系统：CentOS Linux release 7.9.2009 (Core)
Node.js：v16.13.1（包含npm 8.1.2版本）

（1）获取node.js安装包

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

（2）Linux 上安装 Node.js

wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz // 下载

tar xf node-v16.13.1-linux-x64.tar.xz // 解压

cd node-v16.13.1-linux-x64
解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以修改linux系统的环境变量（profile）来设置直接运行命令：

cp /etc/profile /etc/profile.bak
老规矩先备份，养成修改重要文件之前先备份的好习惯。

vim /etc/profile
在最下面添加 export PATH=$PATH: 后面跟上 node 下 bin 目录的路径:

export PATH=$PATH:/root/vue/node-v16.13.1-linux-x64/bin

source /etc/profile 立即生效

node -v 查看node版本
---------------------------------------------------------------------
[root@localhost bin]# node -v
v16.13.1
---------------------------------------------------------------------
OK！安装成功！

二、npm包管理器

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。
在这里插入图片描述

三、安装cnpm国内资源镜像

OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像 ---- cnpm。(因为 npm 安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常。所以淘宝团队创造了个 cnpm 。)

在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待安装完成。

四、安装vue-cli脚手架构建工具

在命令行中运行命令 cnpm install -g vue-cli ，然后等待安装完成。(注意，这里使用cnpm来替代npm，不然速度超级慢，会导致卡在那)
通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

五、用vue-cli构建项目

在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在/vue生成该文件夹），如下图。

在这里插入图片描述