Linux centerOS安装vue详细教程
**PS：笔者为已刚毕业大学生，最近被许多站长开发的vue项目着实着迷，想着自己也学习一下，但是就安装这一块踩了许多坑，在此将安装过程分享出来，后续还会持续更新。**当然可以通过CDN使用VUE，你可以借助 script 标签直接通过 CDN 来使用 Vue：
```
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
如果你不考虑使用CDN方式的话请你继续往下看：
# 安装Vue环境
首先，在安装Vue环境之前，我们首先需要安装npm这个玩意。
那么npm这个玩意是什么呢？官方的说法是：npm是基于Nodejs的资源包（package）管理器。
就好比你是一个顾客，想购买商品，而npm就是一个超市，里面有各种各样的商品，Vue就是其中的一个商品，你要想购买Vue这个商品就先要到npm这个商店去。因此我们首先来安装npm
## 安装node.js
npm是包含在nodejs里面的，考虑到项目后续的需要，我们不如直接安装nodejs更加省事，安装好了nodejs也就安装好了npm，因此我们首先访问nodejs的官网：(https://nodejs.org/en/download/)
根据上图所示，如果你的主机是Linux X64哪直接选择Linux Binaries (x64)它就对了。
1.为了方便直接在终端安装，代码如下:
```
wgte https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
```
2.完成后，使用命令`ls`查看/root下存放的压缩包
3.解压上图的压缩包，使用命令：
```
tar xvf node-v16.17.0-linux-x64.tar.xz
```
解压成功后，把node.js的整体目录移动到`/usr/local`的目录下统一管理，具体操作的命令如下：
```
mv node-v16.17.0-linux-x64 /usr/local/nodejs
```
一般情况下会自动创建软连，如果`/usr/local/bin`目录下没有node和npm文件的话需要手动创建软连，代码如下：
```
sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
```
### 配置环境变量
node.js安装成功后，在`/etc/profile`下配置node.js的环境变量，具体如下：
```
#node.js的环境
export PATH=/usr/local/nodejs/bin:$PATH
```
添加文件后,再执行`source`立即生效
```
source /etc/profile
```
环境变量配置成功后，可以输入如下进行验证，具体如下：
```
# node -v
v16.17.0
# npm -v
8.15.0
```
如果终端提示有版本号则是安装成功了。
## 安装cnpm
NMP安装插件是从NPM官网下载对应的插件包，该网站的服务器在国外，经常会出现下载缓慢或出现异常，这时便需要找到另外的方法提供稳定的下载，这个方法就是CNPM。阿里巴巴的淘宝团队把NMP官网的插件都同步到了在中国的服务器，提供给我们从这个服务器上稳定下载资源。
CNMP同样是NMP的一个插件，通过cnpm来安装vue（**切记一定要使用cnpm安装vue否则可能会失败**），具体安装的命令如下：
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
**注意：安装完成后同样要建软链接，否则在使用cnpm时会报`No command 'cnpm' found`的错误。**
执行cnpm软连代码如下：
```
sudo ln -s /usr/local/node/node_global/bin/cnpm /usr/local/bin/cnpm
```
接下来验证cnpm是否安装好，验证具体如下：
有时使用cnpm初始化vue项目时会报错，所以还是使用npm，把源换下就行
```
npm config set registry https://registry.npm.taobao.org
```
至此，cnpm已经完成安装，继续🤞
## 安装Vue
接下来进行安装vue，具体安装过程如下：
```
cnpm install -g vue-cli
```
上述代码说明：参数： -g 表示全局安装。不加的话，就是当前目录安装。
完成后同样要建立软连，否则报错
```
sudo ln -s /usr/local/node/node_global/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue
```
### 验证vue环境
安装成功后，接下来可以验证vue的环境，输入如下命令来验证，具体如下：
或者输入`vue -V`查看
### 创建vue项目
在vue环境搭建好的基础上，开始创建一个vue的项目来进行测试，具体如下：
输入创建项目命令：
```
vue init webpack testproject1 #testproject1为项目名
```
等待完成
接下来可以开始启动这个项目，具体安装如上的操作进行，具体操作过程如下：
```
cd /root/testproject1 #进入项目目录
```
启动项目：
```
npm run dev
```
如上图所示即代表成功完成本次教程的所有！！！撒花✨
# 如何在宝塔面板部署我们创建的项目供万维网访问
> 折腾了许久的前端项目终于要上线了 … ^_^
如果你的项目是使用vue开发的前端工程，开发之后，需要上线，要怎么操作呢？？哪我们记录一下用宝塔面板部署vue项目上线的过程。
## 部署方式
将vue项目进行打包
运行以下命令：
```
npm run build
```
或者在webstorm的package.json运行build
运行之后会在项目下生成dist文件夹
生成的dist文件夹则是本项目最终的产物，可以将它部署到常见的web服务器中，如：
Ngxin，Apache，tomcat，IIS，Node.js等...
### 在宝塔面板进行部署网站
* 登录宝塔面板，新建网站
* 输入域名，创建FTP，因为没有用到PHP，选择纯静态即可。
* 创建完成之后去FTP上传dist文件夹的内容到相应的路径
### 验证网站
* 在上传完网站文件之后，输入设定的域名就可以访问网站了。
## 踩坑记录
vue项目部署后刷新页面出现404错误
原因是由于vue项目使用`history`模式，只需要将之改成`hash`重新打包上传即可。
另一个解决方法是在服务端解决：
在宝塔面板网站菜单，找到部署的vue站点，打开设置，在配置文件设置中添加以下代码：
```
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
```
添加到如下位置：
# 后话
当然如何部署到web方法应该有很多，大家可以自行研究，后续不断更新共同进步，因为刚刚接触到vue框架不是很懂这一块，有不足的地方望指点改正。Thanks♪(･ω･)ﾉ
本文采用`原创方式`发布，转载请注明出处。🏆
页:
[1]