VSCode搭建Vue项目及服务器部署

最新推荐文章于 2024-01-15 16:16:14 发布
最新推荐文章于 2024-01-15 16:16:14 发布
阅读量3.1k 收藏 11
点赞数 2
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_vivian/article/details/116262226
版权

一、安装nodeJs

在我之前的博客《idea搭建vue-cli项目》里有详细安装教程，这里进入！

二、在VSCode搭建Vue项目

1.安装全局脚手架

npm i -g @vue/cli

在这里插入图片描述

2.安装webpack，js打包工具

npm install -g webpack

在这里插入图片描述

3.安装eslint插件

在这里插入图片描述

4.开始初始化Vue项目

这里需要选择自己需要创建项目的目录然后执行下面命令初始项目

vue init webpack vue_test

在这里插入图片描述

5.启动Vue项目

npm run dev

在这里插入图片描述

6.打包Vue项目

npm run build

在这里插入图片描述

6.服务器部署

1）将打好的包压缩上传服务器

在这里插入图片描述

2）解压Vue打包文件

在这里插入图片描述

3）nginx配置静态代理

在这里插入图片描述

4）就这样一个点单的Vue项目就部署完了，测试访问，如下：

在这里插入图片描述

懒惰虫儿
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
VSCode部署vue-cli项目全过程记录
jeansmy111的专栏
06-24 9615
一、环境准备 1.1、nodejs安装 打开官网：https://nodejs.org/en/download/ 下载对应的版本 直接点击安装，下一步，next 其中有个步骤中，有一个automatically install the necessary tools,note that this will also install chocolatey, the script will pop-up in a new window after the inatallation complete
VUE之基本部署及VScode常用插件
qq_23095607的博客
07-14 475
VUE简单的部署及环境准备
gohttpserver：最好的HTTP静态文件服务器，使用golang + vue编写
02-03
gohttpserver 目标：打造最佳的HTTP文件服务器。 功能：友好的用户界面，文件上传支持，Apple和Android安装包的直接QR码生成。 目标：做最好的HTTP文件服务器 功能：人性化的UI体验，文件的上传支持，安卓和苹果安装包的二维码直接生成。 可以从此下载二进制文件 要求 已通过go-1.10，go-1.11测试 屏幕截图 产品特点 支持QRCode代码生成 面包屑路径快速更改 所有资产打包为独立二进制文件 不同的文件类型不同的图标 支持显示或隐藏隐藏文件 上传支持（通过令牌或会话进行身份验证） README.md预览 HTTP基本认证 目录更改时部分重新加载页面 当dir下只有一个dir时，路径会将两个组合在一起 目录zip下载 Apple ipa自动生成.plist文件，iPhone可以识别qrcode（需要https） Plist代理 下载计数统计 启用CORS 离线下载 代码文件预览 编辑文件支持 全局文件搜索 小屏幕中隐藏的工作download和qrcode 主题选择支持 可以正常使用Nginx .ghs.
vscode新建一个最简单的vue项目
09-27
vscode新建一个最简单的vue项目
VSCode搭建Vue Element Admin的项目环境
04-11
VSCode搭建Vue Element Admin的项目环境 版本： node：v18.20.2 npm:：10.5.0 git：2.19.1 vue-element-admin：https://panjiachen.gitee.io/vue-element-admin-site/zh/
记录下如何部署vue项目——（三）部署Vue项目
huaqianzkh的专栏
10-10 947
本文介绍在vscode中开发完成的vue项目如何部署到nginx服务器中。
详解tomcat热部署和热加载的方法
09-30
主要介绍了详解tomcat热部署和热加载的方法的相关资料,这里提供两种tomcat热部署和热加载的方法，需要的朋友可以参考下
使用vscode快速搭建Vue项目步骤
m0_68218656的博客
01-15 3896
①Win+R指令，打开命令框输入cmd②检查nvm是否安装成功(安装成功会显示对应的版本）nvm -v。
手把手教你如何把vue项目打包后部署到服务器（小白教程）
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
VScode中vue的安装及项目的搭建
ShootingStar_1998的博客
11-29 2万+
VScode中vue的安装及项目的搭建一、vue的安装1. 1 安装node.js1.2 配置淘宝cnpm镜像1.3 安装vue-cli脚手架构建工具二、VScode中搭建vue项目2.1 VScode安装插件2.2 使用vue-cli脚手架构建工具构建项目三、启动vue-element-admin工程 一、vue的安装 1. 1 安装node.js 从node.js官网下载并安装node.js...
VSCode搭建Vue项目的方法
10-15
主要介绍了VSCode搭建Vue项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vscode 开发Vue项目的方法步骤
12-09
Vetur : vue的文件代码高亮 Atom One Dark Theme ： 好看的代码颜色主题 Simple icon theme ：清爽文件夹主题 Prettier – code : 代码格式化 ESLint ：代码规范检查 Debugger for Chrome ：断点调试 配置 ...
vscode搭建vue开发环境(vue入门)
热门推荐
JSH的博客
03-20 2万+
一.安装VScode 从官网下载，安装就行。以下操作在win+r -> cmd 命令行界面讲解， 在vscode中就是在项目空白处右键open in Integrated Terminal(在内部终端中打开)执行即可。 二.安装node.js 从nodejs官网下载。安装就行。 安装完成之后，可以在命令行中输入node -v ，如果出现相应的版本号，则说明安装成功。 npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。 其中npm
mac的vscode配置vue项目环境
叮当的猫猫的博客
07-26 4759
搭建vue项目
vscode搭建vue环境
fortune_mz的博客
04-03 1万+
1.在nodejs安装目录下新建node_cache（nodejs缓存）、node_global（全局包存放）两个文件夹，如下图所示。根据个人电脑型号显示进行下载，安装时注意指定安装路径，然后一直选择next即可。可关闭vscode，选择以管理员身份再次打开，或者检查环境变量是否配置正确。，用于统一JavaScript代码风格的工具。运行vue文件时报错。
vue项目vscode插件，运行脚本及热更新
JavaBigData的博客
11-05 514
启动脚本插件 热更新
vue2篇（1）准备工作
qq_58487756的博客
12-01 404
vue项目基础搭建
VSCode中开发JavaWeb项目（Maven+Tomcat+热部署）
tosyh66的博客
08-02 3569
1.安装插件首先需要安装所用到的插件，分别用来支持Java、热部署和Tomcat服务器的插件在插件市场中搜索Java，第一个就是Extension Pack for Java，内置了6个依赖插件，直接一键安装即可。然后是热部署插件，市场搜索Deploy安装即可。最后是Tomcat服务器插件，因为之前的Tomcat for Java被弃用了，官方推荐使用Community Server Connectors来进行代替，同样是搜索安装即可。就是下图的这三个插件。2.配置全局的Java与Maven。
Rain Water Algorithm雨水优化算法附matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
vscode搭建vue
07-27
回答: 要在VSCode上搭建一个Vue项目，首先需要安装VSCode和node.js。然后，你可以按照以下步骤进行操作： 1. 全局安装vue-cli，这是一个用于快速构建Vue项目的工具。你可以在VSCode的终端中输入以下命令进行安装：npm install -g vue-cli。 2. 安装webpack，它是一个用于打包JavaScript的工具。同样在终端中输入以下命令进行安装：npm install -g webpack。 3. 创建一个文件夹来存放你的项目，并在VSCode中打开该文件夹。然后在终端中使用cd命令切换到该文件夹。 4. 使用vue-cli初始化一个Vue项目。在终端中输入以下命令：vue init webpack 项目名称。其中，项目名称可以根据你的喜好自行取名。 5. 在初始化过程中，你可以根据需要进行一些配置，或者直接按回车键使用默认配置。等待依赖项安装完成后，一个基本的Vue项目就搭建完成了。 6. 接下来，你可以运行项目。在终端中输入cd 项目名称，然后输入npm run dev命令。成功后，在浏览器中输入http://localhost:8080，你将看到项目的运行结果。 7. 如果你想将项目打包发布上线，可以使用npm run build命令。打包完成后，你会在项目文件夹中看到一个名为dist的文件夹，里面包含了打包后的内容，你可以直接部署该文件夹。 以上是在VSCode上搭建Vue项目的基本步骤。希望对你有帮助！\[2\] #### 引用[.reference_title] - *1* [在vscode中创建vue项目](https://blog.csdn.net/someday____/article/details/126639851)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [2020-11-20](https://blog.csdn.net/u014620304/article/details/109853686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [VSCode创建Vue项目完整教程](https://blog.csdn.net/embelfe_segge/article/details/126080377)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值