利用VSCode创建前端vue项目，详细步骤

最新推荐文章于 2024-05-08 14:57:30 发布
最新推荐文章于 2024-05-08 14:57:30 发布
阅读量1.4k 收藏 18
点赞数 11
文章标签： vscode vue.js 前端框架 前端 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45755709/article/details/135035960
版权

利用VScode创建vue项目，详细步骤

1.先创建项目需要放置的文件夹，打开VSCode

在这里插入图片描述

2.输入终端指令：vue create wms-web，回车即可创建

在这里插入图片描述

3.跳出vue版本选择，根据需要选择版本，这里选择vue2，然后回车

在这里插入图片描述

4.等待创建完成…

在这里插入图片描述

5.创建成功后，最后显示两行命令：cd wms-web，npm run serve

在这里插入图片描述

6.根据命令输入cd wms-web，进入wms-web项目，输入npm run serve回车后即可启动运行项目

在这里插入图片描述

7.项目启动后会出现http://localhost:8080/，http://192.168.43.81:8080/，复制其中一个到浏览器，即可看到项目界面，这里打开谷歌浏览器查看

在这里插入图片描述
在这里插入图片描述
到这里，整个项目就创建并成功运行了

Lucky1311
关注
  • 11
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始
weixin_39839018的博客
01-30 451
2018年12月5日第一阶段虽然网上教程很多，但是还是记录一次完整的步骤1.安装nodejs,网上一堆的教程，基本上下载后傻瓜式一路next2.安装npm,网上一堆的教程，也是基本下载后傻瓜式一路next3.安装完成运行cmd，查看是否安装成功4.安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。在命令行中...
vscode新建一个最简单的vue项目
09-27
vscode新建一个最简单的vue项目
使用VSCode快速创建一个Vue项目
weixin_59230783的博客
03-28 889
简简单单使用VSCode创建一个Vue项目
前端基础从头学——VsCode使用教程+html基础（入门篇）
DecorateCC的博客
05-01 1万+
前端基础从头学——VsCode使用教程+html基础（入门篇）
使用VSC从零开始写一个Vue前端
XiaoCai
07-12 774
使用Visual Studio Code（VSC）进行Vue开发，写一个简单原生的DAG图显示下效果
详解VSCode配置启动Vue项目
10-17
主要介绍了VSCode配置启动Vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vscode中创建vue项目
someday____的博客
09-01 1万+
昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目，今天目标是自己用vscode新建一个vue项目。第三步：在下面步骤中，一些需要填写或选择的选项，我都直接Enter了，一些需要安装的我都直接No了。第一步：打开vscode, 选择 文件 >> 打开文件夹 选择要创建项目的文件目录。第五步：在浏览器输入http://localhost:8080就可以打开项目了。，其中projectName可以自行修改。第四步：按照上图提示进入到项目目录并运行项目。...
使用VSCode创建一个Vue项目
Ethereal的博客
07-12 5992
详细介绍如何创建一个Vue项目，node.js，vue-cli安装，配置淘宝镜像等。
VsCode建立工程
学而不思则罔
09-18 6762
方法一：简单的使用“Open Folder”打开一个文件夹，这样也可以作为工程用。但是这样有个缺点，就是文件夹下所有的文件都会显示在工程中。日常一般只关注代码文件，推荐用方法二。 方法二：打开空的VsCode，直接执行“Add Folder to WorkSpace”,选择一个文件夹后会弹出保存为WorkSpace的窗口，保存之后，就可以继续使用“Add Folder to WorkSpace”自由代码文件夹了。 ...
手把手教会你！如何快速在VSCode创建一个VUE项目|前端菜鸟进阶版
Tangiiiiii的博客
07-06 5665
等待几分钟，自动弹出浏览器界面如下图，如果没有自动弹出浏览器窗口，我们可以手动复制图中倒数第三行local的地址，打开浏览器粘贴到地址栏，回车测试我们是否成功创建了vue项目。什么是JS（JavaScript）：我封装好一个函数，这个函数可以给其他人调用，这个就是一个js。4.运行输出下面这些代码，如果你不确定选项具体是什么，这里的y/n问题全部回车跳过即可。浏览器出现上图的界面，表示成功创建好一个vue项目啦，现在可以开始你的前端小项目之旅啦。桌面创建一个空的文件夹，在这里我将它命名为test1。
使用vscode快速搭建Vue项目步骤
m0_68218656的博客
01-15 5256
①Win+R指令，打开命令框输入cmd②检查nvm是否安装成功(安装成功会显示对应的版本）nvm -v。
VsCode新建VueJs项目的详细步骤
10-19
本篇文章主要介绍了VsCode新建VueJs项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vscode 开发Vue项目的方法步骤
12-09
Vetur : vue的文件代码高亮 Atom One Dark Theme ： 好看的代码颜色主题 Simple icon theme ：清爽文件夹主题 Prettier – code : 代码格式化 ESLint ：代码规范检查 Debugger for Chrome ：断点调试 配置 ...
VSCode创建VUE前端项目
weixin_44740485的博客
06-13 2141
1、下载并安装node.js2、配置npm​ a、设置淘宝镜像 ​ b、安装全局脚手架 二、创建项目 1、创建一个工作空间（就是找个地方创建一个空目录）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ni1Ync7X-1655126454075)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613205909472.png)]2、打开vscode,打开这个文件夹[外链图片转
疑难杂症——如何利用vscode运行vue前端项目
xdk2166的博客
08-12 1万+
如何利用vscode运行vue前端项目vscode运行vue前端项目vscode[下载](https://code.visualstudio.com/)vscode切换中文导入vue项目安装[node.js](https://nodejs.org/en/download/)运行vue项目 vscode运行vue前端项目 vscode下载 vscode切换中文 1.使用快捷键组合【Ctrl+Shift+p】，打开搜索框，输入“configure display language” 2.没切换中文之前，是没
SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目
Django的博客
05-11 1万+
我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目 安装Element 导入后，我们安装以下element 官网：https://element.eleme.cn/#/zh-CN/component/installation 安装命令：npm add element-ui或者也可以用yarn 安装完成后，我们在main.js中引入Element import Vue from 'vue' import App from './A
VsCode怎么运行html界面
热门推荐
Danile-丹丹的博客
06-26 15万+
一般我们安装完VsCode需要安装很多插件。若是想在vscode运行我们编好的代码在各浏览器进行运行修改bug。如下图：那么我们可以安装两个插件：①：open in browers使用它的方式有alt+b运行；或者切换alt+shift+b切换不同浏览器运行；并且可以运行多个界面②view in browers可以在自己想打开的htm目录中右键，出现view in browser即可运行打开；但是...
vscode简易创建工程步骤--可以自己设置工程名
panfei263031的博客
01-07 2137
vscode创建工程
VSCode-vue3.0-安装与配置-export default简单例子
最新发布
插件开发
05-08 546
安装完软件和插件之后，就可以在vscode环境下编写vue3项目代码文件，然后在控制台中进行代码编译，最后在浏览器中调试，运行。确认无bug之后，然后发布成html项目。
vscode 创建uniapp vue3项目
08-19
要在VSCode中创建一个uni-app Vue3项目，你可以按照以下步骤进行操作： 1. 首先，在终端中使用以下命令创建一个uni-app项目： ``` vue create -p dcloudio/uni-preset-vue@next <项目名称> ``` 这个命令会使用uni-app的官方预设模板来创建一个Vue3的uni-app项目。 2. 接下来，进入你的项目目录： ``` cd <项目名称> ``` 3. 然后，使用以下命令安装项目的依赖： ``` npm install ``` 或者如果你使用的是 yarn，可以使用以下命令： ``` yarn install ``` 4. 等待依赖安装完成后，你可以使用以下命令启动开发服务器： ``` npm run dev:＊＊＊-<平台> ``` 这里的 `<平台>` 可以是小程序平台，如`h5＊＊＊-weixin`、`mp-alipay`等。根据你的需求选择对应的平台。 5. 现在，你可以在VSCode中打开你的项目文件夹。在VSCode中，你可以使用uni-app官方的VSCode插件来提供更好的开发支持。你可以通过在VSCode中搜索 "uni-app" 来安装这个插件。 6. 最后，你可以根据需要，在VSCode中进行uni-app项目的开发工作。不过，由于uni-app项目与其他前端项目的差异较大，我还推荐为uni-app项目单独创建一个VSCode工作区。你可以参考相关文章来了解如何创建VSCode工作区。 希望这些步骤对你有帮助！祝你在VSCode中顺利创建和开发uni-app Vue3项目！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [VSCode中如何开发uni-app？](https://blog.csdn.net/weixin_49865737/article/details/126342498)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值