VS Code + Vue 开发环境搭建

最新推荐文章于 2025-07-02 11:26:01 发布
原创 最新推荐文章于 2025-07-02 11:26:01 发布 · 821 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js #javascript #前端
该博客介绍了如何下载和安装VisualStudioCode2019，以及如何安装中文汉化包和代码高亮插件。接着，详细说明了Nodejs的安装步骤，并指导了如何通过控制台使用npm命令添加包依赖及运行项目。最后，提到了项目的打包发布命令。

1、下载并安装 Visual Studio Code 2019 

2、Visual Studio Code 2019安装成功后，打开VS Code 工具点击左侧【扩展】菜单，在搜索栏中输入 Chinese 查找中文语言汉化包插件下载安装，然后重启VS Code

3、点击左侧【扩展】菜单，在搜索栏中输入Vuter 查找代码高亮显示插件，下载并安装

4、安装Nodejs，安装教程：Nodejs安装教程_彭佼的博客-CSDN博客_nodejs安装

5、使用快捷键Ctrl+shift+Y呼出控制台，在控制台点击终端输入npm install 或者 npm i 添加包依赖。
在这里插入图片描述

6、最后执行npm run dev代表开始运行项目，这条命令会自动在浏览器上运行项目，运行结果如下图所示：

7、打包发布命令：npm run build:prod

vscode-vite：VS Code中的Vite快一步
03-03
Vite的VS代码 :high_voltage: Vite快一步 :high_voltage: 打开项目后立即启动开发服务器 :rocket: 无需离开编辑器即可预览/调试应用 opening在打开新项目时提示快速安装节点模块（ npm i yarn pnpm i ） :package: 一键式构建和服务 :counterclockwise_arrows_button: 一键重启服务器 :battery: 由提供支持 赞助商 该项目是我的一部分。 执照 麻省理工学院
Vue知识系列-VS Code的安装+Vue环境的搭建+Vue指令
weixin_51725434的博客
01-15 3548
1. VS Code的安装；2.创建工作区和文件夹以及文件;3.v-bind 指令;v-model:双向绑定;v-on 指令绑定事件; 修饰符;条件渲染;列表渲染
VSCode编译器环境下，基于vite+vue调试Cesium
谢公屐的博客
04-19 1605
VSCode编译器环境下，基于vite+vue调试Cesium
【转载】Vs2019开发Vue前端项目
STATICHIT静砸的博客
10-24 4012
npm：相当于.net项目中的引用，可以在这里添加第三方开发包，例如前端架构vant、elementui等。dist：项目生成成功后会在这个文件夹中生成各种打包好的文件和目录，用于以后部署到托管服务中。public：开放的静态资源目录，不会被编译到项目中，部署后会查看到public目录中的内容，程序中可以通过根目录直接引用。经常变化的资源可以放到这里，比如经常修改的图片或者css都可以放到这里。
vscode构建Vue3.0项目(vite,vue-cli)
cai_4的博客
02-17 6750
vscode构建Vue3.0项目(vite,vue-cli)
vs启动vue项目
m0_37108602的博客
07-28 5317
1.安装node.js 2.安装vs启动vue项目插件 3.搭建环境并创建vue项目
VS Code上搭建Vue开发环境
interest_ing_的博客
07-13 1万+
介绍：VS Code上搭建Vue开发环境——超简单你女朋友都可以看得懂的教程，Vue是指一个用于创建用户界面的渐进式框架，旨在更好地组织与简化Web开发；vue也可指iOS和Android平台上的一款视频拍摄和美化工具app，是一个手机端的视频拍摄及编辑工具以及原创Vlog短视频平台，允许用户通过简单的操作实现Vlog的拍摄、剪辑、细调、和发布，记录与分享生活。注：这里可能遇到问题，PowerShell用于控制加载配置文件和运行脚本的条件，为了防止恶意脚本的执行，可能遇到无法运行脚本的问题；
VS Code上搭建VUE开发环境
changhuaiyou的博客
02-15 967
VS Code上搭建VUE开发环境
vs code vue开发环境_vsCode搭建Vue开发环境
weixin_39621794的博客
11-25 295
1.安装node.js直接官网首页下载安装：http://nodejs.cn/download/，根据默认选项，一路下一步即可运行 node -v 和 npm -v ，如果都正常，表示node.js安装成功2.安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org(部分Mac或者Linux系统提示文件夹没权限，在命令...
在VS Code中基于TypeScript使用Vue.js搭建Babylon.js的开发环境
ttod的博客
02-03 1172
在VS Code中基于TypeScript使用Vue.js搭建Babylon.js的开发环境
前端开发部署：Visual Studio Code + vue
xingshanchang的博客
06-10 5420
本教程全部采用默认安装路径，因为在进行自定义路径安装的时候，需要配置各种环境变量，在这个配置过程中，可能出现各种很混乱的问题。 ==C:\Program Files\nodejs== 这里不勾选，后续需要什么tools的时候，再进行安装即可。 Win + R 打开 CMD 输入版本查看命令，查看安装是否成功 2 输入下面指令查看路径 webpack用来项目构建、打包、资源整合等。 注意这里安装新的脚手架。 出现warn没关系，继续执行即可。 查看vue版本及是否成功： 四 基于上述vue创
全网最全！从下载Visual Studio Code开始构建Vue3+Vite+Cesium开发环境
weixin_58570944的博客
08-22 1592
6.配置全局安装的模块路径和缓存路径。首先在NVM的安装目录新建两个文件夹node_global和node_cache，创建完两个文件夹后，在cmd窗口中输入配置命令。5.安装Node.js，可以通过nvm list available，命令查看版本号，（偶数是绝对稳定版本 奇数是不一定稳定版本），这里我选择18.20.4版本。通过 NVM，开发者可以轻松地安装、切换和管理多个 Node.js 版本，确保每个项目在其指定的 Node.js 版本上运行，2.找到文件，在vscode中打开，可以看到工程文件。
Vue项目之配置 Vite + VSCode 使用EditorConfig, Eslint和Prettier实现代码规范
weixin_41669668的博客
11-23 1074
背景每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。如果是一个人独立开发，这些当然都没啥问题，自己想怎么写就怎么写。代码规范化之后可能也没法立即看到带来的好处。并且相反，可能在某些人看来反而是一种束缚。但是如果是团队协同开发，代码规范化所带来的好处就很明显。比如，统一团队成员的代码风格，方便后期维护，避免扰乱Git Diff等等。
如何在vscode中安装vite，并创建vue项目？
weixin_64310895的博客
12-27 5084
如何在vscode中安装vite，并创建vue项目？
VS Code上搭建Vue开发环境超详细教程
热门推荐
weixin_49136054的博客
03-17 3万+
这篇关于在Visual Studio Code上搭建vue开发环境的超详细教程手把手教会你!首先在Visual Studio Code上搭建vue开发环境有几个步骤：1、下载安装node.js2、3、4、安装vue/cli脚手架5、创建vue项目6、运行vue项目。
visual studio Code运行vue项目
最新发布
weixin_44638453的博客
07-02 936
使用 Vite 运行 Vue 项目在 Visual Studio 中相对简单。只需确保正确安装了依赖项并进行基本配置，你就能在本地启动 Vue 项目并开始开发。
VS-Code中Vue3-项目创建--vite
weixin_74143515的博客
04-28 1368
vscode里面有extension.json里面装着插件，推荐Vue - Official但是我发现我的code版本不兼容，按需求选择。>env.d.ts目的是为了让ts认识.jpg和.txt文件(点进去发现飘红，在VScode终端输入。创建一个App组件并将App组件挂载到id为app的容器上面。>index.html 入口文件把src里面main.ts引入了；>vite.config.ts:整个工程的配置文件，里面可以安装插件配置代理之类的。>后面的package就是包的依赖声明文件之类的。
通过VS创建vue项目
weixin_69383502的博客
05-09 998
回车之后等它跑完，进入目录后输入指令 npm run serve 运行项目。1.右击VS code，以管理员身份运行。
【使用工具在Vs-code/WebStorm构建Vue项目】
橙子的博客
08-05 2274
使用App.vue创建Vue组件,将该组件挂载到index.html的div上。(5)Vue3的setup语法糖：不需要使用exports default进行组件的默认导出。(1)public目录：静态资源文件夹.index.html是vue项目启动的首页。② components目录：存放Vue组件(组件扩展名是.vue)a、是一个函数,可以返回对象,对象的属性和方法可以在模板中直接使用。(3)构建响应式数据方法：reactive。(2)初始化函数：ref。③ App.vue组件：主组件(启动组件)...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值