欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!
相关栏目

文档中心

VS Code开发Vue3项目之开发环境配置

作者:qvdv 来源:www.qvdv.net 更新时间:2025-01-13

要想实现Vue3项目的高效开发,需要先在本地配置Vue开发环境,另外需要选择一款趁手的IDE,我们推荐将VS Code作为开发工具,下面几个步骤进行介绍VS Code开发发布Vue3流程和安装node和npm搭建Vue3开发环境详细步骤:

一、VS Code开发发布Vue3需要安装必要插件:

1、 在VS Code中搜索安装插件Vue – Official,该插件的功能包括:模板和表达式的智能提示、Vue代码语法高亮等。

2、 安装Eslint插件,这个插件用来规范代码保持代码的一致性,提高代码的质量。

3、 安装插件Vue 3 Snippets,这是一个提供Vue3代码片段的插件,有大量默认内置代码片段,你也可以自定义代码片段,让你编写代码更加便捷、快速、高效。

二、 安装node和npm搭建Vue3开发环境:

虽然Vue.js并不依赖node环境,但我在这里介绍搭建的开发环境需要用到构造工具Vite,该工具可以快速创建一个Vue项目、可以高度优化代码打包输出用于生产环境……下面开始介绍如何在Win系统安装配置开发环境:

1、 安装node和npm

官方下载最新版node安装包,安装过程中,一般默认就可以,但是当到了下面界面(版本不同可能会有差异),就把下面的框打上勾,自动装上npm等必要工具。

安装node和npm搭建Vue3开发环境

2、 安装完后,在CMD命令下确认安装结果。

查看node版本

node -v

查看npm版本

npm -v

3、 配置npm:

使用命令:

npm config get prefix

查看安装路径,默认是C:Users用户名AppDataRoamingnpm

可以自定义设置npm全局安装路径,执行如下命令:

npm config set prefix 'E:DevToolsnodejsnode_global'

查看缓存路径命令:

npm config get cache

默认是C:Users用户名AppData Localnpm-cache

可以自定义设置npm缓存路径:

npm config set cache 'E:DevToolsnodejsnode_cache'

三、 创建Vue3应用开发项目再到打包发布

这里讲述如何使用VS Code终端(命令行界面)构建Vue单页面应用(其实也可以使用CMD命令行工具)

1、 打开VS Code,在工具栏点击“终端”,选择“新建终端”,或者按下快捷键Ctrl+Shift+`,打开命令行界面,进入相应文件夹,例如要把项目放在G盘Vue目录,输入以下指令:

cd G:Vue

2、 基于 Vite构建Vue单页面应用,输入以下指令:

npm create vue@latest

    再按下回车键,根据提示做完基本配置完成创建Vue项目。在项目被创建后,输入以下命令安装依赖:

npm install

3、 启动开发服务器,运行Vue项目

npm run dev

我们能在命令行中看到项目运行的URL,再在命令行中输入o,再按回车即可调用浏览器打开该网址预览。

Vue项目的所有源文件都在src文件夹,我们可以在此开发、完善项目。

4、 当Vue项目开发完成后,我们需要发布到生产环境上线运行,使用以下命令打包输出:

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本用于发布。

至此,安装node和npm搭建Vue3开发环境和VS Code开发发布Vue3流程的全部内容介绍完毕,希望对你有所帮助。


本文版权所有,转载须注明:来源  https://www.qvdv.net/doc-906.html