从零搭建vue+express开发环境
1、express,vue运行环境,2建express项目,3建vue项目,4将vue项目(3)输出文件拷贝到express静态根目录里
一:---------PC全局安装express 和 vue-cli基础运行环境(不是俱体app,只是PC所需软件)-------
1、安装node.js (自行百度)
2、全局安装express
npm install express -g
3、全局安装express生成器 express-generator
npm install express-generator -g
4、查看 express 版本,可以检查生成器 express-generator 是否安装成功
express -v
5、(可选)查看express 所有帮助指令及用法
express -h
6、全局安装vue生成器 vue-cli 脚手架
npm install -g vue-cli
二:---------创建俱体express应用APP(服务器端) --------------
7、cd 进入指定目录 workspace(任意命名)--------------这是系统cmd指令,不是node指令
8、在指定目录 workspace(任意命名) 创建项目 nodejs-demo(任意命名)
express -e nodejs-demo
9、由当前目录 workspace(任意命名) 进入 项目目录 nodejs-demo(任意命名)--------------这是系统cmd指令,不是node指令
cd workspace
10、安装依赖
npm install
11、启动项目------检查express有无安装成功
npm start
三:---------创建俱体VUE应用(前端静态页面) --------------
12、进入express项目的静态文件根目录public文件夹
13、创建基于webpack模版的项目 vue_prj (任意命名项目名称vue_prj)
vue init webpack vue_prj
14、进入项目 vue_prj 文件夹
cd vue_prj
15、安装vue项目依赖
npm install
16、(可选)测试并运行vue前端项目,在浏览器上输入localhost:8080,检查基于vue-cli脚手架的项目是否创建完成
npm run dev
17、每次改动 vue_prj 里的文件之后,均要执行一次 build
npm run build
四:---------将VUE项目放到EXPRESS项目并建立联系 --------------
18、将express项目的服务器静态文件根目录 指向 vue 执行build后的输出文件夹 dist
https://blog.csdn.net/u012414590/article/details/79043757
前端模板渲染vue,后端express提供接口服务,合并成一个项目。同样是前后端分离,互不影响。
项目发布只是把vue经过webpack打包当做express的静态文件夹发布
将VUE 项目的所有文件放入 public
或者修改 app.use(express.static(path.resolve(__dirname, '../dist')));
前端测式调式过程的临时服务器
npm run dev
前端输编译成最后文件
npm run buil
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体