Linux 下搭建Vue开发环境

本文详细介绍如何在Linux环境下安装Node.js并配置全局环境,接着安装cnpm以加速依赖包下载,最后通过vue-cli快速搭建Vue.js项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

node.js安装

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



Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.jsnode.js的官方地址为:https://nodejs.org/en/download/,下载相应版本

 

Nodejs 版本为9.11

 

 

 

https://nodejs.org/download/release/v9.11.2/node-v9.11.2-linux-x64.tar.xz

在Linux里面输入命令行:wget +你复制的链接       获取安装包,这里注意wget 到目录中 存在权限的问题,最好使用root权限用户,这里我wget到/opt/software中

创建nodejs安装目录,这里我放到 /usr/lib/nodejs/

[root@ding /]# mkdir -p /usr/lib/nodejs/

解压安装包到 nodejs中

[[root@ding software]# tar -xf node-v9.11.2-linux-x64.tar.xz -C /usr/lib/nodejs/

重名解压后文件名:

[[root@ding nodejs]# mv node-v9.11.2-linux-x64/ node-v9.11.2

进入nodejs-v9.11.2

./bin/node -v                               // 执行node命令 查看版本

 

 

 

3)建立软连接,变为全局

 

   ln -s /app/software/nodejs/bin/npm /usr/local/bin/ 

 

 

   ln -s /app/software/nodejs/bin/node /usr/local/bin/

 [root@ding node-v9.11.2]# rm -f /usr/local/bin/node

[root@ding node-v9.11.2]# ln -s /usr/lib/nodejs/node-v9.11.2/bin/node /usr/local/bin/

[root@ding node-v9.11.2]# node -v

v9.11.2

4)最后一步检验nodejs是否已变为全局

 

   Linux命令行node -v 命令会显示nodejs版本,如图所示为大功告成

 

 

 

 

 

 

cnpm的安装

 

 

 


安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpmcnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。
安装命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org

但是事实是

控制台:

https://i-blog.csdnimg.cn/blog_migrate/9c8ec3e5affcaa52169a48559cbfda12.png

这里还需要再加一步 软链接

[[root@ding node-v9.11.2]# rm -f  /usr/local/bin/cnpm

[root@ding node-v9.11.2]# ln -s /usr/lib/nodejs/node-v9.11.2/bin/cnpm  /usr/local/bin/cnpm

[root@ding node-v9.11.2]# cnpm

继续查看版本:

[root@ding node-v9.11.2]# cnpm -v

cnpm@6.0.0 (/usr/lib/nodejs/node-v9.11.2/lib/node_modules/cnpm/lib/parse_argv.js)

npm@6.8.0 (/usr/lib/nodejs/node-v9.11.2/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)

node@9.11.2 (/usr/lib/nodejs/node-v9.11.2/bin/node)

npminstall@3.20.2 (/usr/lib/nodejs/node-v9.11.2/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)

prefix=/usr/lib/nodejs/node-v9.11.2

linux x64 3.10.0-957.el7.x86_64

registry=https://registry.npm.taobao.org

[root@ding node-v9.11.2]#
 

 

vue-cli的安装


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

创建vue-cli软链接

[root@ding node-v9.11.2]# rm -f /usr/local/bin/vue

[root@ding node-v9.11.2]#  ln -s /usr/lib/nodejs/node-v9.11.2/bin/vue /usr/local/bin/vue

[root@ding node-v9.11.2]#

5,试试新建一个Vue项目
(1),新建一个项目文件夹,命名为 vue-democd到此文件夹,输入:vue init webpack vue-demo,回车,按照如下操作进行初始化

(2),项目目录结构如下图

(3)cdvue-demo这个项目的目录中,执行以下命令

npm run dev

cnpm install  --装载
cnpm run dev  --运行

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

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

 

(4),接下来就可以在浏览器中访问了

6,当然你也可以用npm安装http-server测试你写的网页的效果
npm install -g http-server
将你的网页放在当前的目录下

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

效果如下图

 

<think>好的,用户想在Linux环境下搭建Vue和Express的开发环境。首先,我需要回忆一下Vue和Express的基本安装步骤。根据用户提供的引用,Vue可以使用vue-cli来创建项目,比如引用[2]里提到用vue create命令。而Express可能需要Node.js环境,所以首先要确保系统里安装了Node.js和npm。 接下来,用户是Linux系统,可能需要检查Node.js的安装情况。通常可以用nvm来管理Node版本,或者直接通过包管理器安装。比如用apt-get安装Node.js和npm。然后,安装Vue CLI,可能需要全局安装,这样就能使用vue命令了。 然后是创建Vue项目,比如vue create frontend,这里要确认用户是否需要Vue2或者Vue3。引用[2]中用的是Vue2,所以可能需要指定版本。之后是进入项目目录并运行npm run serve启动前端服务。 接下来是Express后端部分。需要新建一个目录,初始化npm项目,安装Express和其他可能需要的中间件,比如body-parser或者cors。然后创建入口文件,比如app.js,设置基本的路由和监听端口。引用[5]中提到了路由配置,可能用户之后需要配置路由,但当前主要是搭建环境,所以基础示例即可。 然后,用户可能需要同时运行前端和后端,这时候需要两个终端窗口或者使用并发工具,比如npm-run-all或者concurrently。不过用户可能知道怎么处理,所以步骤里可以提到如何分别启动。 另外,用户可能需要配置跨域请求,因为前端和后端可能运行在不同端口。这时候可以用Express的CORS中间件,引用[5]里的路由配置可能相关,但具体需要安装cors包并添加到Express应用中。 最后,用户可能需要测试环境是否搭建成功,访问前端和后端的端口,看看是否正常响应。如果有问题,可能需要检查端口是否被占用,依赖是否正确安装。 还要注意引用里的信息,比如引用[1]提到mpvue是美团开发的,但用户的问题是关于Vue和Express,所以可能不需要涉及mpvue。引用[3]和[4]提到Vue的特点,如易用性和性能,这些可以作为背景信息,但重点在步骤。 可能用户是刚开始学习,所以步骤要详细,包括每个命令和可能遇到的常见问题,比如权限问题需要sudo,或者node版本过低需要升级。此外,确保npm的包安装正确,避免权限错误,建议使用nvm或者正确配置npm的全局安装路径。 总结步骤应该是:安装Node.js和npm -> 安装Vue CLI -> 创建Vue项目 -> 初始化Express项目 -> 分别启动前后端 -> 配置跨域。同时生成相关问题,比如如何连接前后端,如何部署,性能优化等,参考用户之前的示例问题。</think>### 如何在Linux系统上配置Vue与Express开发环境? #### 1. **安装Node.js和npm** - Vue和Express均基于Node.js环境运行。通过以下命令安装: ```bash sudo apt update sudo apt install nodejs npm ``` - 验证安装: ```bash node -v # 检查Node.js版本 npm -v # 检查npm版本 ``` - 若版本过旧,建议使用`nvm`管理Node版本[^4]。 #### 2. **安装Vue CLI并创建前端项目** - 全局安装Vue CLI(Vue脚手架工具): ```bash npm install -g @vue/cli ``` - 创建Vue项目(例如命名为`frontend`): ```bash vue create frontend ``` 选择Vue2或Vue3模板(根据需求选择,引用[2]使用Vue2)[^2]。 - 启动前端开发服务器: ```bash cd frontend npm run serve ``` 访问`http://localhost:8080`验证前端运行状态。 #### 3. **初始化Express后端项目** - 新建后端目录并初始化npm: ```bash mkdir backend && cd backend npm init -y ``` - 安装Express和相关依赖: ```bash npm install express cors body-parser ``` - 创建入口文件`app.js`,编写基础代码: ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 允许跨域请求 app.use(express.json()); app.get('/api/data', (req, res) => { res.json({ message: "Hello from Express!" }); }); const PORT = 3000; app.listen(PORT, () => { console.log(`Express server running on port ${PORT}`); }); ``` - 启动后端服务: ```bash node app.js ``` 访问`http://localhost:3000/api/data`验证接口响应。 #### 4. **前后端联调配置** - 在Vue项目中通过`axios`调用Express接口: ```bash cd frontend && npm install axios ``` - 在Vue组件中发起请求: ```javascript import axios from 'axios'; export default { methods: { fetchData() { axios.get('http://localhost:3000/api/data') .then(response => console.log(response.data)); } } } ``` #### 5. **配置生产环境部署** - 构建Vue生产版本: ```bash npm run build ``` - Express中托管静态文件: ```javascript const path = require('path'); app.use(express.static(path.join(__dirname, '../frontend/dist'))); ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值