VS Code导入Vue项目及调试部署

最新推荐文章于 2024-07-14 03:58:41 发布
最新推荐文章于 2024-07-14 03:58:41 发布
阅读量7k 收藏 20
点赞数 2
分类专栏： 前端 VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mojocube/article/details/112604754
版权

环境：下载并安装VS Code和Node.js

1.导入Vue项目：

2.打开控制台（Ctrl+~），输入：npm install 回车：

3.运行服务并在浏览器打开，输入：npm run serve 回车：

4.停止服务，按 Ctrl+C，输入Y 回车：

5.编译项目，输入：npm run build 回车，编译好的项目放在dist目录，上传到服务器即可：

mojocube
关注
专栏目录
vue项目导入vscode项目，运行项目，vue开发必备软件vscode,nodejs
plqwf19880902的博客
01-19 5499
vs导入vue项目 renren-fast-vue使用
vue项目通过HBuilder打包发布
iiLeon的博客
03-10 2870
vue项目，打包，发布，Hbuilder
VS Code导入已存在的Vue.js工程
11-24 702
打开vscode------->文件--------->打开文件夹--------->选择工程文件夹-------->确定 查看---->终端或者使用“Ctrl+~”调出终端 从终端中输入命令进入程序目录， 输入npm install安装vue插件初始化项目， 完成后执行npm run dev启动项目，就可以在浏览器中打开页面了， 在终端c...
配置VS Code 使其支持vue项目断点调试
最新发布
2401_84434442的博客
07-14 1320
npm跑起项目后，在Chrome浏览器F12在控制台就可以进行相对应的断点调试了注：devtool 设置成eval-cheap-module-source-map打包编译速度会比source-map更快，所以建议在开发环境设置成eval-cheap-module-source-map,生成环境设置成cheap-module-source-map,更多配置可以查看webpack二、VS Code断点调试步骤一：安装Debugger for Chrome插件步骤二：配置launch.json文件。
VSCode导入Vue项目入门部署与启动
m0_54230514的博客
03-04 8176
PS：没有node.js的需要下载，官网提供的版本过高，下载安装后容易出现一些问题导致不能运行，建议下载与项目适配的版本，node.js历史版本可参考以下博客。后者需要将npm下载镜像，使用淘宝镜像- 命令就改为了cnpm，会加快项目的启动速度。@后的数字可以更改为想要的版本 若不加上@6 就默认下载最新版本的镜像cnpm。设置全局模块的安装路径到 “node_global” 文件夹，配置npm的全局模块的存放路径 以及 cache缓存的路径。与idea导入项目一致，选择前端项目的文件夹进行导入。
使用 vscode 导入现有的 vue 项目进行开发的操作步骤 前端初体验
热门推荐
huqiankunlol的博客
07-24 1万+
现在大部分项目都是前后端分离的开发模式，前端接触的越太少了，记录一下个人开发 vue 项目的过程 首先项目是直接从开源社区下载下来的，我这里下载的是 若依的开源项目 使用 vscode 开发要装 node.js ,我们进行管网下载既可 安装的过程默认既可，无需什么配置，接下来我们打开 vscode 工具 , 文件 - 打开文件夹 ，选择项目所在的路径 按 Ctrl + ~ 键 ( Esc 下面的那个 ) 调出终端 ，执行 install 这个过程有点慢，执行完成后，...
vscode引入新建得vue项目
精通前端技术，了解后端接口
03-05 1508
vscode引入vue项目
使用Visual Studio Code 导入并运行vue项目
songjlei的博客
08-17 9904
打开VSCode, 快键键Ctrl+Shift+P ,搜索 Configure Display Language，选择安装其他语言，安装完成选择zh-cn，重启就变成中文了。4.我们再打开我的电脑(右键)->属性->高级->环境配置->添加自己的npm安装路径 ，就是以上第3步获取的路径，一路确定即可。打开控制台（Ctrl+shift+Y）,选择终端，在控制台终端输入npm install添加包依赖 ，可能会出现报错，如下。三、vue插件的安装（方便开发）（Ctrl+shift+X）若有问题，欢迎指正！
vue项目打包优化.zip
05-02
在Vue.js项目开发中，优化打包过程至关重要，它不仅能提高应用的加载速度，还能提升用户体验。Vue项目的打包优化主要包括以下几个方面： ### 1. **配置Webpack** Webpack是Vue项目常用的构建工具，通过优化其配置...
vs 部署 azure_使用VS Code的Azure函数入门：零部署
culiu9261的博客
07-20 953
vs 部署 azureThis article was co-authored by Peter Ekene Eze. He’s a freelance developer evangelist and concatenate.io conference volunteer. 本文 由 Peter Ekene Eze 合着 。 他是一名自由职业的开发人员和concatenate.io会议志愿者。...
vite+vue3+ts从0到1搭建企业级项目
Allen-
08-29 661
vite+vue3+ts搭建一个企业级项目
详解VSCode配置启动Vue项目
01-21
下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置 emmet.syntaxProfiles: { vue-html: html, vue: html } 2、eslint插件的安装 eslint智能错误检测插件，在具体开发中作用很大，能够及时的帮我们发现错误。至于安装，同样打开插件扩展窗
六、Django整合Vue（Mac环境搭建）
weixin_42199646的博客
04-10 424
=>自动运行npm install，选择第三项，不运行，自己执行命令。Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；Vue build ==> 打包方式，回车即可；
vscode导入已存在的vue.js工程
plpldog的博客
05-14 3374
1.安装vue_cli 如果安装了npm，直接在命令行输入npm install -g vue-cli，安装在全局组件目录下 完成后，可以在命令测试下 2.导入工程 打开vscode------->文件--------->打开文件夹--------->选择工程文件夹-------->确定； 然后查看中点击继承终端或者使用“Ctrl+~”调出终端 ...
导入vue项目到vscode
m0_46762668的博客
09-24 656
使用 vscode 开发要装 node.js ,我们进行官网下载既可 vscode 和 node.js 安装的过程中直接使用默认既可，无需什么配置，安装完这两个工具就可以了，不用再安装别的东西 接下来我们打开 vscode 工具 , 文件 - 打开文件夹 ，选择项目所在的路径 按 Ctrl + ~ 键 ( Esc 下面的那个 ) 调出终端 ，执行 install 这个过程有点慢，执行完成后，再 执行命令 npm run dev 既可启动项目， 如果执行 npm install 过程中报错，大概率
VSCode自定义html模板，自动导入Vue框架，附带示例程序
qq_72385952的博客
04-28 1055
自定义模板
vsCode首次加载Vue项目
qq_22325259的博客
08-11 3038
第一步环境搭建 1、去微软官网下载vsCode并安装 vsCode官方下载地址：https://code.visualstudio.com/Download/ 2、安装nodejs，可自行去官网下载安装，推荐下载LTS稳定版 nodejs下载地址：https://nodejs.org/zh-cn/ 3、vsCode安装完成后，安装几个常用的扩展插件： <1> Chinese (Simplified) Language Pack for Visual Studio Code中文语言..
vscode导入vue项目各种报错以及解决方式
2401_83196638的博客
06-02 866
运行vue各种报错
vs code创建vue项目
06-11
好的，以下是在VS Code中创建Vue项目的步骤： 1. 首先确保你已经安装了Node.js，可以在终端中输入 `node -v` 命令来检查是否已经安装。 2. 安装Vue CLI：在终端中输入以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在终端中进入你想要创建Vue项目的目录，然后输入以下命令： ``` vue create my-project ``` 其中 `my-project` 为你的项目名称，你可以根据需要进行修改。 4. 选择配置项：在进入创建项目的命令后，会出现一个交互式命令行界面，让你选择一些配置项，如项目的特性、预设等。你可以根据需要进行选择。 5. 进入项目目录：创建完成后，在终端中进入项目目录： ``` cd my-project ``` 6. 启动开发服务器：在终端中输入以下命令启动开发服务器： ``` npm run serve ``` 运行成功后，在浏览器中输入 `http://localhost:8080` 即可查看你的Vue项目。 以上就是在VS Code中创建Vue项目的步骤，希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值