怎么在vscode里面搭建vue

PHPz 原创: 2023-04-17 10:26:55 1661浏览

随着前端技术的不断发展，越来越多的公司和团队开始采用Vue框架进行开发。Vue框架的优秀设计和强大的生态系统成为了越来越多开发者选择Vue的原因。在实际项目过程中，一个高效的开发环境能够大大提高开发效率。本文将通过demo演示，介绍在VSCode中搭建Vue项目的实际流程。

环境准备

在开始搭建Vue项目前，必须确保已安装Node.js、Vue-CLI和VSCode等必要软件。如果还未安装，可参考如下步骤进行安装。

安装Node.js

Node.js是一款基于Chrome V8引擎的JavaScript运行时环境，可以让JavaScript在服务器端运行。本文使用的是Node.js版本为14.17.3，下载地址为 https://nodejs.org/en/download/ 。

安装Vue-CLI

Vue-CLI是官方提供的一个脚手架工具，可以帮助我们快速搭建Vue项目。在终端或命令行中输入如下指令进行安装：

# 全局安装Vue-CLI
npm install -g @vue/cli

安装VSCode

VSCode是一款轻量级且功能强大的跨平台代码编辑器，支持多种编程语言。下载地址为 https://code.visualstudio.com/ 。

搭建项目

在安装好必要软件后，我们可以开始搭建Vue项目。在终端或命令行中输入如下指令创建项目：

# 创建项目
vue create demo

其中，demo为项目名称，可以根据实际情况进行修改。创建项目后，会进入如下界面：

Vue项目创建界面

在这里我们可以选择使用默认设置或手动配置选项。手动配置选项包括以下内容：

选择Vue版本，包括2.x和3.x两个版本；
是否使用Babel和TypeScript；
是否使用ESLint、Prettier等代码规范工具；
是否使用Vue Router、Vuex等常用插件。

我们可以根据实际需要进行设置，完成后回车即可等待项目创建完成。

在项目创建完成后，我们可以使用VSCode打开项目目录。在VSCode中选择“文件”→“打开文件夹”，找到我们刚才创建的demo文件夹并打开。

运行项目

在VSCode中打开项目后，我们可以通过终端或命令行进入项目目录并运行项目。在终端或命令行中输入如下指令：

# 进入项目目录
cd demo

# 运行项目
npm run serve

输入项后，会启动一个本地开发服务器，并输出如下信息：

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

在浏览器中访问 http://localhost:8080/ ，我们即可看到刚刚创建的Vue项目页面。