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开发环境

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

Linux环境搭建vue开发环境

cnpm的安装

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

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

cnpm 安装命令

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

若是直接 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安装成功

Linux环境搭建vue开发环境

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

Linux环境搭建vue开发环境

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

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

vue init webpack vue-demo

Linux环境搭建vue开发环境

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

npm run dev

Linux环境搭建vue开发环境

 

理论上启动了就能用 http:\\localhost:8080 启动了, 若是在centOS上没有办法运行

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

Linux环境搭建vue开发环境

Linux命令校验效果(...)

curl  http://localhost:8080

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

Linux环境搭建vue开发环境

 

 

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

npm install -g http-server

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

http-server
上一篇:NPM包管理器入门(附加cnpm : 无法加载文件错误解决方案)


下一篇:clon远程项目后,npm install 报错——cb() never called!This is an error with npm itself. Please report this err