Linux环境搭建vue开发环境
2021/5/25 7:25:14
本文主要是介绍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.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安装成功
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上没有办法运行
解决方式: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
这篇关于Linux环境搭建vue开发环境的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21Vue3教程:新手入门与实战指南
- 2024-09-21VueRouter4教程:入门与实践指南
- 2024-09-21Vuex4项目实战:新手入门教程
- 2024-09-21Vue3项目实战:初学者指南
- 2024-09-21Vue3项目实战:从零开始构建你的第一个Vue3应用
- 2024-09-21VueRouter4项目实战入门教程
- 2024-09-21Vue3入门:新手必读指南
- 2024-09-20Vue3教程:初学者快速入门指南
- 2024-09-20Vue资料入门教程:从零开始学习Vue.js
- 2024-09-20Vuex4入门教程:轻松掌握Vue状态管理