东莞建设网站官网登录广饶网站建设

东莞建设网站官网登录,广饶网站建设,学交互设计网站,以网站域名做邮箱在前 5 课中#xff0c;我们已经完成了前后端交互#xff08;Axios#xff09;和企业级界面搭建#xff08;Element Plus#xff09;#xff0c;得到了一个功能完整、界面美观的待办应用。但此时应用仍停留在本地开发环境#xff0c;无法被他人访问。本节课将聚焦 工程化…在前 5 课中我们已经完成了前后端交互Axios和企业级界面搭建Element Plus得到了一个功能完整、界面美观的待办应用。但此时应用仍停留在本地开发环境无法被他人访问。本节课将聚焦工程化优化和项目部署两大核心环节解决 “打包体积过大”“环境区分混乱”“线上部署复杂” 等问题带你完成从 “本地开发” 到 “线上发布” 的全流程让你的应用能被全球用户访问。一、课前准备部署前的基础准备10 分钟搞定本节课需要提前准备 3 类核心工具 / 账号避免部署时手忙脚乱新手直接照做即可确认项目环境确保当前项目能正常启动npm run dev、无报错且已完成第 5 课的前后端交互功能部署平台账号注册 1 个免费部署平台账号推荐 Netlify 或 GitHub Pages新手优先 Netlify操作更简单无需复杂配置代码管理工具可选但推荐注册 GitHub 账号创建仓库将本地项目提交到 GitHub便于后续部署时直接拉取代码也能备份项目。课前知识铺垫通俗理解核心概念工程化简单说就是 “规范化、高效化开发项目的一套流程和工具”—— 比如区分开发 / 测试 / 生产环境避免线上用测试接口、优化打包体积让应用加载更快、统一代码规范避免多人开发混乱这些都是企业开发的必备要求打包将本地开发的 Vue 代码、依赖包等压缩合并成浏览器能直接识别的静态文件HTML/CSS/JS打包后的文件体积更小、加载更快部署把打包后的静态文件放到服务器上让全球用户通过域名访问你的应用比如部署后得到一个类似xxx.netlify.app的在线地址。二、核心实操一工程化优化 —— 让项目更规范、加载更快1. 步骤 1配置环境变量区分开发 / 测试 / 生产实际开发中我们需要区分 3 种环境开发环境dev本地开发用接口用测试地址生产环境prod线上部署用接口用正式地址环境变量存储不同环境的配置比如接口基础地址避免手动修改代码切换环境。实操创建环境变量文件在项目根目录下my-first-vue-project新建 3 个环境变量文件分别对应不同环境.env.development开发环境本地用env# 开发环境变量命名必须以VITE_开头Vite要求 VITE_ENV development VITE_BASE_API https://jsonplaceholder.typicode.com # 测试接口地址.env.production生产环境线上用env# 生产环境变量 VITE_ENV production VITE_BASE_API https://jsonplaceholder.typicode.com # 若有正式接口替换为正式地址.env.test测试环境可选用于测试服务器env# 测试环境变量 VITE_ENV test VITE_BASE_API https://test-jsonplaceholder.typicode.com # 测试服务器接口地址实操在项目中使用环境变量修改src/utils/axios.js用环境变量替换固定的baseURLjavascript运行// src/utils/axios.js import axios from axios import { ElMessage } from element-plus const service axios.create({ // 读取环境变量中的接口基础地址不同环境自动切换 baseURL: import.meta.env.VITE_BASE_API, timeout: 5000 }) // 其他代码不变...验证环境变量是否生效启动开发环境npm run dev在axios.js中添加console.log(import.meta.env.VITE_BASE_API)打开浏览器控制台能看到打印出https://jsonplaceholder.typicode.com说明配置成功。2. 步骤 2Vite 打包优化 —— 缩小体积、提升加载速度Vite 是 Vue 3 的默认构建工具自带基础优化我们只需补充简单配置进一步优化打包效果实操 1配置 Vite 打包选项vite.config.js项目根目录下的vite.config.js是 Vite 的核心配置文件修改内容如下javascript运行import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 1. 配置路径别名简化导入路径比如代表src resolve: { alias: { : path.resolve(__dirname, src) } }, // 2. 打包优化配置 build: { outDir: dist, // 打包输出目录默认就是dist可自定义 assetsDir: assets, // 静态资源图片、CSS、JS存放目录 minify: esbuild, // 用esbuild压缩代码更快、体积更小 rollupOptions: { // 3. Tree Shaking移除未使用的代码 output: { manualChunks: { // 拆分依赖包比如把Vue、Element Plus等第三方库单独打包便于浏览器缓存 vue: [vue, vue-router, pinia], elementPlus: [element-plus, element-plus/icons-vue], axios: [axios] } } } }, // 3. 开发服务器配置可选解决跨域问题 server: { proxy: { // 若开发环境接口跨域可配置代理 /api: { target: import.meta.env.VITE_BASE_API, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } })实操 2图片优化自动压缩 按需加载Vite 默认支持图片优化只需在使用图片时遵循规范即可小图片默认4KB自动转为 Base64 编码嵌入 HTML 中减少网络请求大图片自动复制到打包后的assets目录并用哈希命名避免缓存问题实操在项目中引入图片比如在Home.vue中添加 logo打包后会自动优化vuetemplate div classhome !-- 引入图片Vite自动优化 -- img src/assets/logo.png altVue Logo classlogo !-- 其他代码不变... -- /div /template实操 3执行打包命令查看优化效果打开终端输入打包命令bash运行npm run build打包完成后项目根目录会生成dist文件夹打包后的静态文件。此时可通过dist文件夹的大小对比优化前后的效果优化后体积通常会减少 30%-50%。3. 步骤 3代码规范ESLintPrettier—— 统一编码风格企业开发中代码规范是必备要求避免因编码风格不统一导致的维护困难。我们用ESLint代码语法检查Prettier代码格式化实现自动规范1. 安装依赖终端输入以下指令安装所需依赖bash运行npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D2. 配置 ESLint.eslintrc.js项目根目录新建.eslintrc.js文件添加配置javascript运行module.exports { root: true, env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:vue/vue3-essential, plugin:prettier/recommended // 整合Prettier ], parserOptions: { ecmaVersion: latest, parser: babel/eslint-parser, sourceType: module }, plugins: [vue], rules: { // 自定义规则新手可默认后续根据需求调整 vue/no-unused-components: warn, // 未使用的组件警告 no-console: process.env.NODE_ENV production ? error : off, // 生产环境禁止console no-debugger: process.env.NODE_ENV production ? error : off // 生产环境禁止debugger } }3. 配置 Prettier.prettierrc.js项目根目录新建.prettierrc.js文件添加配置javascript运行module.exports { printWidth: 120, // 一行最大字符数 tabWidth: 2, // 缩进2个空格 useTabs: false, // 不用tab缩进 singleQuote: true, // 单引号 semi: false, // 不加分号 trailingComma: none, // 数组/对象最后一个元素不加分号 bracketSpacing: true, // 对象前后加空格{ a: 1 } vueIndentScriptAndStyle: true // Vue文件中script和style缩进 }4. 添加规范检查脚本修改package.json的scripts部分添加检查和修复命令jsonscripts: { dev: vite, build: vite build, preview: vite preview, // 本地预览打包后的文件 lint: eslint . --ext .vue,.js,.jsx,.ts,.tsx, // 检查代码规范 lint:fix: eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix // 自动修复规范问题 }验证代码规范是否生效终端输入npm run lint若代码有不规范的地方比如用了双引号、加了多余分号会显示警告输入npm run lint:fix会自动修复大部分规范问题新手只需专注开发无需手动调整格式。二、核心实操二项目部署实战 ——3 种主流部署方式新手优先第 1 种1. 方式 1Netlify 部署最简单新手首选Netlify 是免费的静态网站部署平台支持直接拉取 GitHub 代码自动打包部署步骤如下步骤 1将本地项目提交到 GitHub若已提交可跳过GitHub 新建仓库比如命名vue-todo-app终端进入本地项目目录执行以下指令提交代码bash运行# 初始化git仓库 git init # 添加所有文件 git add . # 提交备注 git commit -m 完成待办应用开发准备部署 # 关联GitHub仓库替换为你的仓库地址 git remote add origin https://github.com/你的用户名/vue-todo-app.git # 推送到GitHub git push -u origin main步骤 2Netlify 关联 GitHub 仓库自动部署登录 Netlify点击右上角 “New site from Git”选择 “GitHub”授权后搜索你的仓库vue-todo-app点击选中配置部署参数默认即可新手无需修改Build commandvite build打包命令Publish directorydist打包输出目录点击 “Deploy site”Netlify 会自动拉取代码、执行打包、部署上线部署完成后Netlify 会生成一个随机域名比如xxx.netlify.app点击域名即可访问你的线上应用避坑提示若部署后页面空白检查vite.config.js是否配置base: ./解决路由路径问题javascript运行// vite.config.js 中添加base配置 export default defineConfig({ base: ./, // 部署时的基础路径 // 其他配置不变... })修改代码后只需将代码推送到 GitHubNetlify 会自动重新部署无需手动操作。2. 方式 2GitHub Pages 部署免费适合已用 GitHub 管理代码GitHub Pages 也支持静态网站部署步骤如下安装部署插件简化部署步骤bash运行npm install gh-pages -D修改package.json添加部署脚本jsonscripts: { // 其他脚本不变... deploy: vite build gh-pages -d dist }修改vite.config.js配置基础路径必须和 GitHub 仓库名一致javascript运行export default defineConfig({ base: /vue-todo-app/, // 替换为你的仓库名 // 其他配置不变... })终端执行部署命令bash运行npm run deploy部署完成后访问地址https://你的用户名.github.io/vue-todo-app/即可看到线上应用。3. 方式 3本地打包后手动上传适合无 GitHub 账号的新手若没有 GitHub 账号可手动上传打包后的dist文件到免费服务器比如阿云轻量应用服务器、Vercel 等步骤如下终端执行npm run build生成dist文件夹登录部署平台比如 Vercel点击 “上传文件”选择dist文件夹中的所有文件上传完成后平台会生成在线域名访问即可。三、综合实战完成应用线上发布全流程1. 实战目标工程化优化配置环境变量、优化打包体积、统一代码规范线上部署通过 Netlify 部署应用生成可公开访问的域名验证功能访问线上域名测试所有功能新增 / 删除 / 修改待办是否正常。2. 完整流程测试本地执行npm run lint:fix修复代码规范问题执行npm run build验证打包是否成功将代码推送到 GitHub触发 Netlify 自动部署部署完成后访问 Netlify 生成的域名测试页面是否正常加载无空白新增待办输入内容点击添加是否成功有无提示删除 / 修改待办操作后是否同步生效响应式缩小浏览器窗口界面是否适配手机尺寸。3. 新手优化建议自定义域名Netlify 和 GitHub Pages 都支持绑定自己的域名比如todo.你的域名.com适合个人展示部署环境区分在 Netlify 中配置环境变量对应VITE_BASE_API实现测试 / 生产环境的切换添加访问统计集成百度统计或 Google Analytics查看应用的访问量、用户行为。四、本节课总结与下节课预告1. 本节课核心收获工程化优化掌握环境变量配置、Vite 打包优化、ESLintPrettier 代码规范让项目符合企业开发标准项目部署掌握 3 种主流免费部署方式Netlify/GitHub Pages / 手动上传完成应用线上发布完整流程打通 “开发→优化→打包→部署→上线” 的全链路理解前端项目从本地到线上的完整流程。2. 课后作业必做独立完成工程化优化环境变量、打包配置、代码规范选择一种部署方式推荐 Netlify将你的待办应用部署到线上并获取线上域名测试线上应用的所有功能修复部署中遇到的问题比如页面空白、路由跳转失败整理部署踩坑笔记比如 “路径配置错误导致页面空白”“环境变量未生效” 等。3. 下节课预告下节课我们将学习 “Vue 3 应用性能优化与进阶实战”解决 “应用加载慢”“运行卡顿” 等问题 —— 比如路由懒加载、组件缓存、大型列表优化虚拟列表、性能监控工具使用让你的应用不仅能 “上线”还能 “跑得快、体验好”进一步提升你的前端技术竞争力