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

环境变量配置成功后，可以输入如下进行验证，具体如下：

[root@centos-master ~]# node -v
v16.17.0
[root@centos-master ~]# 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♪(･ω･)ﾉ
本文采用原创方式发布，转载请注明出处。🏆