做三国mod的网站,龙岩网吧,温州微网站制作多少钱,网站建设中的时尚资讯Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】 vite目录结构#xff1a; dist // 打包后生成的文件目录 node_modules // 环境依赖 public // 公共资源目录 favicon.ico …Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】 vite目录结构 dist // 打包后生成的文件目录 node_modules // 环境依赖 public // 公共资源目录 favicon.ico // 网站图标 src // 项目核心文件夹 assets // 静态资源目录 components // 组件目录 router // 路由配置文件目录 index.js // 路由配置文件 stores // pinia配置文件目录 counter.js // pinia配置文件 views // 页面文件目录 App.vue // 根组件 main.js // 入口文件 .gitignore // git忽略提交配置文件 index.html // 入口页面 package-lock.json // 插件版本锁定文件 package.json // 插件管理文件 README.md // 项目说明文件 vite.config.js // vite的配置文件 dist 文件夹用于存放我们使用 npm run build 命令打包后的项目文件。 node_modules 文件夹用于存放项目的各种依赖比如 axios 等。没有 node_modules 文件夹项目就没法运行可以使用 npm install 安装项目依赖。 public 文件夹用于存放公共的静态资源这里的资源不会被 vite 打包处理。 public / favicon.ico 图标网站标签页中的小图标。 src 文件夹项目的核心文件夹我们所写的代码都放在这个文件夹里。 src / assets 文件夹用于存放各种静态资源img、css 等等。 src / components 文件夹用于存放我们的公共组件如 header、footer 等自定义组件。 src / router 文件夹用于存放路由配置文件路由配置文件可以理解为各个页面的地址路径用于让我们访问同时也可以在里边编写全局路由守卫。 src / stores 文件夹用于存放 pinia 配置文件pinia 就是一个公共的数据管理文件里边存放着项目需要用到的数据。 src / views 文件夹用于存放我们开发的 vue 页面如 login、home 等页面。 src / App.vue 文件根组件是项目的主组件所有的页面都要通过 App.vue 组件显示。 src / main.js 文件入口文件主要用于初始化 Vue 实例也可以在此文件中引入一些组件库或者全局挂载一些变量。 .gitignore 文件用于配置 git 上传时需要忽略上传的文件。 index.html 文件项目入口页面vite 打包后的 js、css 也会自动引入到该页面中浏览器访问项目的时候会默认打开生成好的 index.html 文件。 package-lock.json 文件在 npm install 时生成的一份文件用于记录当前项目实际安装的各个插件具体来源地址和版本号。并且在 npm install 时会根据该文件生成 node_modules 文件夹。 package.json 文件插件的基本信息包含项目开发时所需要的插件版本项目名称等等。 README.md 文件项目的说明文件可以记录项目开发时的版本和开发内容。 vite.config.js 文件vue 的配置文件可以用来设置代理、打包等配置。 vite 项目运行流程
一、项目运行时会先执行 index.html 文件
!DOCTYPE html
html langenheadmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titleVite App/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/html
如果开发移动端可以将 meta 标签换成以下内容禁止用户手动缩放。
meta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno 二、执行 src / main.js 文件在此文件中引入 Vue 与各种插件并创建 Vue 实例。
// 引入公共 CSS 文件如果不想要可以删掉
// 也可以将 src/assets 目录中的 base.css 和 main.css 一并删掉。
import ./assets/main.css;// 引入 Vue 中的 createApp 工厂函数
import { createApp } from vue;
// 引入 pinia 状态管理
import { createPinia } from pinia;
// 引入 App 根组件
import App from ./App.vue;
// 引入路由配置
import router from ./router;// 创建 Vue 实例并将 App 根组件添加到页面中
const app createApp(App);
// 应用 pinia
app.use(createPinia());
// 应用路由
app.use(router);
// 将 id 为 app 的元素挂载到 Vue 实例上
app.mount(#app);
三、执行 main.js 中引入的各种插件包括 src / router / index.js 路由配置文件
import { createRouter, createWebHistory } from vue-router;// 引入组件方式一
import HomeView from ../views/HomeView.vue;const router createRouter({history: createWebHistory(import.meta.env.BASE_URL), // 历史模式routes: [{path: /, // 这个 / 表示首页name: home, // 路由名称component: HomeView, // 使用组件方式一},{path: /about, // 路由路径name: about, // 路由名称// 路由懒加载方式二component: () import(../views/AboutView.vue),},],
});export default router;
四、执行 App.vue 根组件通过 RouterView 加载路由配置的首页path 为 / 的页面。
templateRouterView /
/template 五、执行路由配置的首页 src / views / HomeView.vue 文件
template!-- Vue3 可以不写根标签 --p classtitle{{ title }}/p
/templatescript
// Vue3 支持 Vue2 的写法
export default {name: HomeView,data() {return {title: 首页}}
}
/scriptstyle scoped
.title {background-color: aqua;
}
/style
注vite 的目录结构并非一成不变具体的执行流程还需要结合实际情况。 原创作者: 吴小糖
创作时间2023.8.14
