Linux环境Vue搭建开发环境

node.js安装

Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。2016年，Vue同Angular、React形成三足鼎立的局面，让前端的开发者顾不暇接，接下来了解一下Vue的环境搭建。

Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。

node.js的官方地址为：https://nodejs.org/en/download/

Linux服务器上创建vue文件夹，切换到vue文件目录

mkdir /usr/local/mjtabu/vue

cd vue

Linux环境下载node.js，链接为刚刚在官网复制的下载链接

wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz

解压已下载文件

tar -xf node-v14.15.4-linux-x64.tar.xz

赋予解压后文件执行权限

chmod -R +x node-v14.15.4-linux-x64

建立软连接，变为全局

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/npm /usr/local/bin/

rm -f /usr/local/bin/node

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/node /usr/local/bin/

检验nodejs是否已变为全局，若出现以下界面则表示node.js安装成功。

node -v

npm -v

cnpm的安装

安装完node之后，npm包含的很多依赖包是部署在国外的，下载速度超级慢。所以最好安装cnpm。

cnpm：是淘宝对npm的镜像服务器。

cnpm 安装命令

npm install -g cnpm --registry=https://registry.npmmirror.com

若是直接 cnmp -v 则会失败，原因需要再加一步 建立软连接

rm -f  /usr/local/bin/cnpm

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/cnpm /usr/local/bin/cnpm 

cnpm

cnpm -v

若出现以下信息，则表示cnpm安装成功

vue-cli的安装

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

vue-cli 安装命令

cnpm install -g vue-cli

同理，创建 vue-cli 软链接

rm -f /usr/local/bin/vue

ln -s /usr/local/mjtabu/vue/node-v14.15.4-linux-x64/bin/vue /usr/local/bin/vue

输入vue，查看是否安装完成

vue

新建一个Vue项目测试（以下操作未测试完成)

新建一个项目文件夹，命名为 vue-demo，cd到此文件夹，按照如下操作进行初始化

vue init webpack vue-demo

cd到vue-demo这个项目的目录中，执行以下命令

npm run dev

理论上启动了就能用 http:\localhost:8080 启动了

若是在centOS上没有办法运行,指定一下IP就可以了

解决方式：vue-demo >config>index.js 修改host为127.0.0.1 指定ip地址就可以了

Linux命令校验效果（...）

curl  http://localhost:8080

Linux服务器开放以上配置端口后就可以在浏览器访问了

当然也可以用npm安装http-server测试你写的网页的效果

npm install -g http-server

命令行输入http-server，然后在浏览器上就可以访问

http-server