如何详细操作在Vs-codeWebStorm中构建Vue项目？

本文共计1162个文字，预计阅读时间需要5分钟。

目录：

一、使用Vue脚手架（vue-cli）构建Vue项目

二、使用Vite构建Vue项目工具结构

三、在WebStorm中创建Vue项目（使用Vite构建工具）

一、使用Vue脚手架（vue-cli）构建Vue项目

1.打开cmd，安装或升级Vue脚手架

目录

• 一、使用Vue脚手架(vue-cli)构建Vue项目
• 二、使用Vite构建工具构建Vue项目
• 三、WebStorm中创建Vue项目(使用Vite构建工具)

一、使用Vue脚手架(vue-cli)构建Vue项目

1、打开cmd安装或升级Vue脚手架

npm install -g @vue/cli

2、进入工作目录创建Vue项目

vue create 项目名称

3、进入项目目录，启动项目

npm run serve

4、项目目录用处：

4.1、public目录：静态资源文件夹.index.html是vue项目启动的首页

4.2、src目录：源码文件夹

（1）、 assets目录：静态资源、测试数据

（2）、components目录：存放Vue组件(组件扩展名是.vue)

（3）、App.vue组件：主组件(启动组件)

（4）、main.js文件：核心文件。