vue的创建、启动以及目录结构详解目录

一. vue项目的创建

二. vue的目录结构

三. src的目录结构

四. vue项目的启动

4.1 方法1

4.2 方法2

---

一. vue项目的创建

创建一个工程化的Vue项目，执行命令：npm init vue@latest

注意：如果你在这个目录下有同名的文件，他会提示是否要覆盖这个文件，别一直无脑回车，今天我把同名的springboot项目覆盖了，找不回来了...血泪教训！

 进入该项目：cd vue-project

下载该项目的依赖：npm install

 输入 code . 打开项目

二. vue的目录结构

VUE-PROJECT
.vscode
node_modules	下载的第三方包存放路径
public	公共资源
src	源代码存放目录 （以后写代码的文件夹）
.gitignore
index.html	默认首页
package-lock.json
package.json	项目配置文件，包括项目名、版本号、依赖包、版本等。
README.md
vite.config.js	Vue项目的配置信息，如：端口号等

三. src的目录结构

src
assets	静态资源目录，存放图片、字体…
components	组件目录，存放通用组件
App.vue	根组件
main.js	入口文件

四. vue项目的启动

4.1 方法1

进入vue项目的根目录，打开cmd，输入：npm run dev

4.2 方法2

用vscode打开项目，点击左下角的NPM SCRIPTS → dev vite右边的run

 笔记参考