怎样做网站的链接怎样更换网站cms

怎样做网站的链接,怎样更换网站cms,知名购物网站有哪些,网络推广时Vite#xff1a;现代前端构建工具的革命 引言#xff1a;前端构建工具的演进 在 Vite 出现之前#xff0c;Webpack 几乎统治了前端构建工具领域。Webpack 通过静态分析依赖关系#xff0c;将项目中的所有模块打包成少数几个 bundle 文件#xff0c;这种打包优先现代前端构建工具的革命引言前端构建工具的演进在 Vite 出现之前Webpack几乎统治了前端构建工具领域。Webpack 通过静态分析依赖关系将项目中的所有模块打包成少数几个 bundle 文件这种打包优先的策略在早期确实解决了模块化开发的问题。但随着项目规模的增长Webpack 的构建速度逐渐成为开发体验的瓶颈——即使是小型项目冷启动时间也可能达到数十秒热更新也需要几秒钟。正是在这样的背景下Vue.js作者尤雨溪于 2020 年推出了 Vite法语意为快速它彻底改变了前端开发的构建范式带来了革命性的开发体验提升。Vite 的核心架构优势1. 基于原生 ES 模块的急速冷启动Vite 最显著的特点是极快的冷启动速度。与传统打包器不同Vite 在开发环境下直接使用浏览器原生 ES 模块!-- index.html -- script typemodule src/src/main.js/script// main.js - 浏览器直接执行 ES 模块 import { createApp } from vue import App from ./App.vue createApp(App).mount(#app)工作原理Vite 将应用模块分为依赖和源码两部分依赖使用 esbuild 预构建Go 语言编写比 JavaScript 快 10-100 倍源码按需编译并提供浏览器只请求当前页面所需的模块这种方式避免了整个应用的打包过程实现了毫秒级的启动速度2. 高效的热模块替换HMRVite 的热更新同样基于原生 ES 模块系统实现了精准的更新策略// 当修改一个 Vue 组件时 // Vite 只会重新编译该组件并通过 HMR API 快速更新 if (import.meta.hot) { import.meta.hot.accept(./Foo.vue, (newModule) { // 更新逻辑 }) }HMR 优势更新速度不受应用规模影响保持应用状态不变支持 Vue 单文件组件的模板和样式热更新后端node会自动检查文件的修改情况并且自动更新3. 开箱即用的现代化支持# 一键创建项目 npm create vitelatest my-vue-app -- --template vueVite 原生支持TypeScriptJSXCSS 预处理器Sass、Less、StylusPostCSS现代 CSS 功能CSS Modules、CSS Nesting静态资源处理WebAssembly工程化实践构建完整的 Vue 应用项目结构标准化my-project/ ├── src/ │ ├── main.js # 应用入口 │ ├── App.vue # 根组件 │ ├── views/ # 页面组件 │ │ ├── Home.vue │ │ └── About.vue │ ├── components/ # 可复用组件 │ ├── router/ # 路由配置 │ └── store/ # 状态管理 ├── index.html # 入口 HTML └── vite.config.js # Vite 配置Vue Router 集成// router/index.js import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import About from ../views/About.vue const routes [ { path: /, component: Home }, { path: /about, component: About } ] const router createRouter({ history: createWebHistory(), routes }) export default router!-- App.vue -- template nav router-link to/Home/router-link router-link to/aboutAbout/router-link /nav router-view/ /template生产构建优化虽然 Vite 开发体验优秀但生产构建仍使用Rollup// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], build: { // 生产构建配置 rollupOptions: { output: { manualChunks: { // 代码分割策略 vendor: [vue, vue-router], utils: [lodash, axios] } } }, // 构建输出目录 outDir: dist, // 静态资源处理 assetsDir: assets }, server: { // 开发服务器配置 port: 3000, open: true } })Vite 生态系统与插件Vite 拥有丰富的插件生态系统// 常用插件配置 import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx import AutoImport from unplugin-auto-import/vite export default defineConfig({ plugins: [ vue(), vueJsx(), AutoImport({ imports: [vue, vue-router], dts: true // 生成 TypeScript 声明文件 }) ] })4.构建一个vite项目安装项目依赖npm init vite,在终端输入输入项目名称vite-test选择项目框架vue/react都可以选择语言我们选择jsUse rolldown-vite (Experimental)?选择no这个是问我们是否要选择实验性的打包器我们不选择因为其还在实验阶段可能不稳定选择no使用默认的 Rollup 打包器稳定Install with npm and start now?这是 Vite 在询问你是否要使用 npm 安装依赖并立即启动我们选择yes最后按住Ctrl键然后点击Local: http://localhost:5173/,就可以看到我们的初始化项目了如图vite目录解析Vite 项目目录结构解析以下是典型的 Vite Vue 3 项目目录结构及详细解析基础目录结构my-vite-project/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源不参与打包 ├── src/ # 源代码目录 ├── .gitignore # Git 忽略文件 ├── index.html # 项目入口 HTML ├── package.json # 项目配置和依赖 ├── package-lock.json # 依赖锁定文件 ├── vite.config.js # Vite 配置文件 └── README.md # 项目说明详细解析1.node_modules/node_modules/ └── 所有通过 npm/yarn 安装的依赖包作用存放项目依赖的第三方库注意此文件夹不应提交到 Git通过.gitignore忽略2.public/目录public/ ├── favicon.ico # 网站图标 └── robots.txt # 搜索引擎爬虫协议作用存放不会被处理的静态资源特点不会被 Vite 处理或编译通过/根路径直接访问例如public/logo.png可以通过/logo.png访问3.src/目录核心src/ ├── assets/ # 静态资源会被处理 │ ├── logo.png │ └── styles/ │ └── main.css ├── components/ # 组件目录 │ ├── HelloWorld.vue │ └── Navbar.vue ├── views/ # 页面级组件 │ ├── Home.vue │ ├── About.vue │ └── User/ │ ├── Profile.vue │ └── Settings.vue ├── router/ # 路由配置 │ └── index.js ├── stores/ # 状态管理Pinia │ └── counter.js ├── utils/ # 工具函数 │ └── helpers.js ├── api/ # API 接口 │ └── user.js ├── App.vue # 根组件 └── main.js # 应用入口4. 关键文件详解index.html- 项目入口!DOCTYPE html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/vite.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleVite Vue/title /head body div idapp/div !-- 引入 main.js -- script typemodule src/src/main.js/script /body /html特点Vite 将index.html作为入口点ES 模块通过script typemodule支持原生 ES 模块src/main.js- 应用入口import { createApp } from vue import App from ./App.vue import router from ./router import ./assets/main.css // 创建 Vue 应用 const app createApp(App) // 使用插件 app.use(router) // 挂载到 DOM app.mount(#app)src/App.vue- 根组件template div idapp nav router-link to/Home/router-link | router-link to/aboutAbout/router-link /nav router-view/ /div /template script export default { name: App } /script style #app { font-family: Avenir, Helvetica, Arial, sans-serif; } /stylevite.config.js- Vite 配置import { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { port: 3000, // 开发服务器端口 open: true, // 自动打开浏览器 proxy: { // 代理配置 /api: { target: http://localhost:8080, changeOrigin: true } } }, resolve: { alias: { // 路径别名 : /src, components: /src/components } }, build: { outDir: dist, // 打包输出目录 sourcemap: true // 生成 sourcemap } })5.package.json{ name: my-vite-project, version: 0.0.0, type: module, scripts: { dev: vite, // 开发模式 build: vite build, // 生产构建 preview: vite preview // 预览生产版本 }, dependencies: { vue: ^3.3.0, vue-router: ^4.2.0 }, devDependencies: { vitejs/plugin-vue: ^4.2.0, vite: ^4.4.0 } }6. 配置文件详解.gitignore# 依赖 node_modules/ # 构建输出 dist/ dist-ssr/ # 环境变量 .env .env.local # 日志 npm-debug.log* yarn-debug.log* yarn-error.log* # 编辑器 .vscode/ .idea/ *.swp *.swo环境变量文件.env # 所有情况下加载 .env.local # 本地覆盖不提交到 Git .env.development # 开发环境 .env.production # 生产环境 .env.test # 测试环境Vite 特殊目录/文件src/env.d.ts- TypeScript 环境声明/// reference typesvite/client / declare module *.vue { import type { DefineComponent } from vue const component: DefineComponent{}, {}, any export default component }src/auto-imports.d.ts- 自动导入声明/* eslint-disable */ /* prettier-ignore */ // ts-nocheck // Generated by unplugin-auto-import export {} declare global { const ref: typeof import(vue)[ref] const reactive: typeof import(vue)[reactive] // ... 其他自动导入的 API }项目结构建议小型项目src/ ├── components/ ├── views/ ├── App.vue └── main.js中型项目src/ ├── assets/ ├── components/ │ ├── common/ # 通用组件 │ ├── layout/ # 布局组件 │ └── ui/ # UI 基础组件 ├── composables/ # 组合式函数 ├── router/ ├── stores/ ├── utils/ ├── views/ ├── App.vue └── main.js大型项目src/ ├── api/ # API 接口管理 ├── assets/ ├── components/ ├── composables/ ├── directives/ # 自定义指令 ├── filters/ # 过滤器Vue 2 ├── i18n/ # 国际化 ├── layouts/ # 布局组件 ├── middleware/ # 中间件 ├── plugins/ # 插件 ├── router/ ├── stores/ ├── types/ # TypeScript 类型定义 ├── utils/ ├── views/ ├── App.vue └── main.jsVite 的优势总结✅ 显著优势极速启动冷启动时间比 Webpack 快 10-100 倍即时更新HMR 更新几乎无感知延迟开发友好错误提示清晰配置简单现代化原生支持 ES 模块、TypeScript 等生态完善与 Vue、React、Svelte等框架深度集成插件丰富活跃的插件生态系统⚠️ 需要考虑的点浏览器兼容性开发依赖现代浏览器支持原生 ES 模块生产构建会自动转换为兼容格式生态成熟度相比 Webpack部分插件和工具链仍在完善中大型企业级应用迁移需要考虑现有工具链兼容性构建优化生产构建基于 Rollup对于超大型项目可能需要额外优化代码分割策略需要手动配置SSR 支持Vite 的 SSR 支持相对较新部分场景可能需要更多配置实际性能对比指标WebpackVite冷启动小型项目5-10s50-200ms冷启动大型项目30-60s1-3sHMR 更新1-3s10-100ms生产构建优秀优秀配置复杂度高低