vite创建项目、目录结构分析以及构建应用

一、vite创建项目

npm create vite@latest

项目启动完成

二、目录结构分析

• node_modules 目录用来存放第三方依赖包
• public是公共的静态资源目录
• src是项目的源代码目录

• assets 目录用来存放项目中所有的静态资源文件（css、font等）
• components 目录用来存放项目中所有的自定义组件
• App.vue 项目的根组件
• main.js 整个项目的打包入口文件
• style.css 项目的全局样式表文件

• .gitignore 是Git的忽略文件
• index.html 是SPA单页面应用程序中唯一的HTML文件
• package.json是项目的包管理配置文件

三、vite项目的运行流程

在项目中，vue只要做：通过main.js把App.vue渲染到index.html的指定区域中。
①App.vue用来编写待渲染的模板结构

<template>
  <h1>这是app.vue根组件</h1>
</template>

②inde.html中需要预留一个el区域
index.html页面，确认挂载区域
id为app的div元素，就是vue要控制的区域

<div id="app"></div>

③main.js把App.vue渲染到了index.html所预留的区域中
1）按需导入createApp函数

import { createApp } from 'vue'

2）导入待渲染的App组件

import App from './App.vue'

3）指定vue实际控制的区域

createApp(App).mount('#app')


//调用create函数，创建SPA应用实例
const app = createApp(App)
//调用mount把App组件的模板结构，渲染到指定的el区域中
app.mount('#app')

四、构建应用

1、构建

npm run build

2、本地预览测试

npm run preview

//vite preview 命令会在本地启动一个静态 Web 服务器，将 dist 文件夹运行在http://localhost:4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。你可以通过 --port 参数来配置服务的运行端口。
{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}