seo助力网站转化率提升,防城港seo公司,安全员考试成绩查询网,商业网站策划方案目录
一、环境安装
二、创建项目
三、前端工程化配置
四、引入组件库
五、选择 API 风格
1、选项式 API (Options API)
2、组合式 API (Composition API)
六、页面信息修改
七、通用布局选择
1、基础布局结构
2、全局底部栏
3、动态替换内容
4、全局顶部栏 …目录
一、环境安装
二、创建项目
三、前端工程化配置
四、引入组件库
五、选择 API 风格
1、选项式 API (Options API)
2、组合式 API (Composition API)
六、页面信息修改
七、通用布局选择
1、基础布局结构
2、全局底部栏
3、动态替换内容
4、全局顶部栏
八、引入 Axios 请求库
1、请求工具库
2、全局自定义请求
3、自动生成请求代码
4、测试请求
补充
一、环境安装
截止2025.2.6 官网发布的vue 3 稳定版本是 V 3.5.13 根据此时的官方文档要求node 版本需要大于等于 V 18.3 于是使用 nvm 安装 v 20.18.0 二、创建项目
使用 Vue 官方推荐的脚手架 create-vue 快速创建 Vue3 的项目: 快速上手 | Vue.js 在终端中输入命令: npm create vuelatest 但若后续文档升级还想创建现在版本的框架的话输入 npm create vue3.12.1 接下来按照如下选项创建项目脚手架会自动帮我们安装 Vue Router 路由、Pinia 全局状态管理等实用类库 : 然后用 Webstorm 打开项目先在终端执行 npm install 安装依赖然后执行 npm run dev 能访问网页就成功了。 运行项目之后会发现Vue 脚手架提供了一个调试工具 devtools(http://localhost:5173/devtools/)可以使用它来调试分析项目 : 三、前端工程化配置 脚手架已经帮我们整合了 Prettier 代码美化、ESLint 自动校验、TypeScript 类型校验无需再自行整合。但是需要在 webstorm 里开启代码美化插件 : 在 vue 文件中执行格式化快捷键不报错表示配置工程化成功。如果发现格式化效果不好也没关系之后可以使用另外一种格式化快捷键 修改 eslint.config.js、.prettierrc.json、tsconfig.json 文件可以改变校验规则。如果不使用脚手架就需要自己整合这些工具: 代码规范:https://eslint.org/docs/latest/use/getting-started 代码美化:https://prettier.io/docs/en/install.htm! 直接整合:https://github.com/prettier/eslint-plugin-prettier#recommended-configuration(包括https://github.com/prettier/eslint-config-prettier#installation) 对于前端新手来说不需要深入了解这些纯当工具去使用即可尽快上手项目。
四、引入组件库 引入 Ant Design Vue 组件库参考 官方文档 快速上手 - Ant Design Vue 快速上手。 注意本教程使用的是 v4.2.6 的组件库版本如果后续阅读本教程中发现有组件或语法不一致以官方文档为主或者在网站右上角切换对应版本的文档即可: 执行命令
npm i --save ant-design-vue4.x 改变主入口文件 main.ts全局注册组件((为了方便)
import App from ./App.vue
import router from ./router
import Antd from ant-design-vue;
import ant-design-vue/dist/reset.css;const app createApp(App)
app.use(Antd);
app.use(createPinia())
app.use(router)app.mount(#app)然后在 App.vue 中增加一个按钮组件测试 Ant Design Vue 组件是否安装成功。 五、选择 API 风格
1、选项式 API (Options API) 使用选项式 API可以用包含多个选项的对象来描述组件的逻辑例如 data,methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上它会指向当前的组件实例。
script
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 this 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(The initial count is ${this.count}.)}
}
/script
templatebutton clickincrementCount is: {{ count }}/button
/template
2、组合式 API (Composition API) 通过组合式 API可以使用导入的 API 函数来描述组件逻辑。在单文件组件中组合式 API 通常会与 script setup 搭配使用。这个 setup attribute 是一个标识告诉 Vue 需要在编译时进行一些处理让我们可以更简洁地使用组合式 API。比如script setup 中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与 script setup 改造后和上面的模板完全一样的组件
script setup
import { ref, onMounted } from vue// 响应式状态
const count ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value
}// 生命周期钩子
onMounted(() {console.log(The initial count is ${count.value}.)
})
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template
建议遵循 Vue3 的组合式 API(Composition API)而不是 选项式 AP!,开发更自由高效一些。
六、页面信息修改
修改 html 文件中的 title 和 ico 部分设置成适合自己项目的信息
!DOCTYPE html
html lang
headmeta charsetUTF-8link relicon href/bitbug_favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0title智能云图库平台/title
/head
body
div idapp/div
script typemodule src/src/main.ts/script
/body
/html还可以替换 public 目录下默认的 ico 图标为自己的有很多 现成的网站如在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net 可以制作 ico 图标。效果如图: 七、通用布局选择
1、基础布局结构
在 layouts 日录下新建一个布局 BasicLayout.vue在 App.vue 全局页面入口文件中引入。App.vue 代码如下 :
templatediv idappBasicLayout//div
/templatescript langts setup
import BasicLayout from /layouts/BasicLayout.vue;
/script可以移除页面内的默认样式、并且移除 main.ts 中默认引入的 main.css防止样式污染 :
style
#app {
}
/style选用 Ant Design 组件库的 Layout 组件 布局 Layout - Ant Design Vue先把【上中下】布局编排好然后再填充内容 :
templatediv idbasicLayouta-layout stylemin-height: 100vha-layout-headerHeader/a-layout-headera-layout-contentContent/a-layout-contenta-layout-footerFooter/a-layout-footer/a-layout/div
/templatescript setup langts/scriptstyle scoped
#basicLayout {
}
/style
并且移除脚手架自带的样式 这些都用不上。 2、全局底部栏
通常用于展示版权信息 :
a-layout-footer classfootera hrefhttps://www.baidu.com target_blank 智能云图库 by Asukabai/a
/a-layout-footer#basicLayout .footer {background: #efefef;padding: 16px;position: fixed;bottom: 0;left: 0;right: 0;text-align: center;
}3、动态替换内容 项目使用了 Vue Router 路由库 介绍 | Vue Router可以在 router/index.ts 配置路由能够根据访问的页面地址找到不同的文件并加载渲染。比如此处当路由是 / 时 加载的组件是 HomeView , 而 HomeView 组件中又加载了 TheWelcome 于是 router-view / 将会把 TheWelcome 的内容显示出来 于是修改 BasicLayout 内容部分的代码如下 :
a-layout-content classcontentrouter-view /
/a-layout-content修改样式要和底部栏保持一定的外边距否则内容会被遮住
style scoped
#basicLayout .content {background: linear-gradient(to right, #fefefe, #fff);margin-bottom: 28px;padding: 20px;
}
/style修改之后发现即使页面拉倒底也不会有内容被 footer 所挡住 4、全局顶部栏 由于顶部栏的开发相对复杂可以基于 Ant Design 的菜单组件 导航菜单 Menu - Ant Design Vue来创建 GlobalHeader 全局顶部栏组件组件统一放在 components 日录中 。先直接复制现成的组件示例代码到 GlobalHeader 中即可 此处选择了“水平的顶部导航菜单” 在基础布局中引入顶部栏组件 :
a-layout-header classheaderGlobalHeader /
/a-layout-header效果如下 : 样式代码如下:可以修改下全局 Header 的样式清除一些默认样式(比如背景色等) 接下来要修改 GlobalHeader 组件完善更多内容。 1) 给菜单外套一层元素用于整体控制样式 :
div idglobalHeadera-menu v-model:selectedKeyscurrent modehorizontal :itemsitems /
/div2) 根据我们的需求修改菜单配置key 为要跳转的 URL 路径, 并且在组件中选择 icon 切换自己想要的图标 script langts setup
import { h, ref } from vue
import { HomeOutlined } from ant-design/icons-vue
import { MenuProps } from ant-design-vueconst current refstring[]([home])
const items refMenuProps[items]([{key: /,icon: () h(HomeOutlined),label: 主页,title: 主页,},{key: /about,label: 关于,title: 关于,},{key: others,label: h(a, { href: https://www.baidu.com, target: _blank }, 百度一下),title: 百度一下,},
])
/script效果如图: “主页” 前多了一个图标显示 3) 完善全局顶部栏左侧补充网站图标和标题。 先把 logo.png 放到 src/assets 日录下替换掉原本的默认 Logo : 修改 GlobalHeader 代码补充 HTML :
RouterLink to/div classtitle-barimg classlogo src../assets/logo.png altlogo /div classtitle鱼皮云图库/div/div
/RouterLink其中RouterLink 组件的作用是支持超链接跳转(不刷新页面) 补充 CSS 样式
style scoped
.title-bar {display: flex;align-items: center;
}.title {color: black;font-size: 18px;margin-left: 16px;
}.logo {height: 48px;
}
/style得到的效果如图所示 4) 完善顶部导航栏右侧展示当前用户的登录状态 (暂时用登录按钮代替)
div classuser-login-statusa-button typeprimary href/user/login登录/a-button
/div5) 优化导航栏的布局采用 栅格组件 的自适应布局 (左中右结构左侧右侧宽度固定中间菜单栏自适应)
a-row :wrapfalsea-col flex200pxRouterLink to/div classtitle-barimg classlogo src../assets/logo.png altlogo /div classtitle智能云图库/div/div/RouterLink/a-cola-col flexautoa-menuv-model:selectedKeyscurrentmodehorizontal:itemsitems//a-cola-col flex120pxdiv classuser-login-statusa-button typeprimary href/user/login登录/a-button/div/a-col
/a-row效果如图可以尝试缩小浏览器窗口观察导航条的变化: 6) 修改路由配置, 目标: 点击菜单项后可以跳转到对应的页面;并且刷新页面后对应的菜单自动高亮。按需修改 router/index.ts 文件的 routes 配置定义我们需要的页面路出每个 path 对应一个component (要加载的组件)
routes: [{path: /,name: home,component: HomeView,},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(../views/AboutView.vue),},
],观察上述代码会发现 component 支持直接传入组件、或者使用 impor 按需懒加载组件按需加载是一种优化首次打开站点性能的方式 。路由跳转: 给 GlobalHeader 的菜单组件绑定跳转事件 :
import { useRouter } from vue-router;
const router useRouter();// 路由跳转事件
const doMenuClick ({ key }: { key: string }) {router.push({path: key,});
};修改 HTML 模板绑定事件 :
a-menuv-model:selectedKeyscurrentmodehorizontal:itemsitemsclickdoMenuClick
/刷新页面后你会发现当前菜单项并没有高亮所以需要同步路由的更新到菜单项高亮 同步高亮原理: 1.点击菜单时Ant Design 组件已经通过 v-model 绑定 current 变量实现了高亮。 2.刷新页面时需要获取到当前 URL 路径然后修改 current 变量的值从而实现同步。 使用 Vue Router 的 afterEach 路由钩子实现每次改变路由或刷新页面时都会自动更新 current 的值从而实现高亮:
const router useRouter();
// 当前选中菜单
const current refstring[]([]);
// 监听路由变化更新当前选中菜单
router.afterEach((to, from, next) {current.value [to.path];
});但目前 路由和菜单配置中有一些是重复的 有没有更好地方式来配置路由和菜单项不用每次修改时都要改两边的代码呢? ( 答案就是将路由配置数组传递给菜单组件 )
八、引入 Axios 请求库 一般情况下前端只负责界面展示和动效交互尽量避免写复杂的逻辑;当需要获取数据时通常是向后端提供的接口发送请求由后端执行操作(比如保存数据)并响应数据给前端。 前端如何向后端发送请求呢?最传统的方式是使用 AJAX 技术。但其代码有些复杂我们可以使用第三方的封装库来简化发送请求的代码比如主流的请求工具库 Axios。
1、请求工具库
安装请求工具类 Axios参考官方文档: https://axios-http.com/docs/intro Getting Started | Axios Docs npm install axios 2、全局自定义请求 需要自定义全局请求地址等参考 Axios 官方文档编写请求配置文件 request.ts 。包括全局接口请求地址、超时时间、自定义请求响应拦截器等。 响应拦截器的应用场景: 需要对接口的 通用响应 进行统一处理比如从 response 中取出 data; 或者根据 code 去集中处理错误。这样不用在每个接口请求中都去写相同的逻辑。比如可以在全局响应拦截器中读取出结果中的 data并校验 code 是否合法如果是未登录状态则自动登录。示例代码如下其中 withcredentials:true 一定要写否则无法在发请求时携带 Cookie就无法完成登录。代码如下 :
import axios from axios
import { message } from ant-design-vue// 创建 Axios 实例
const myAxios axios.create({baseURL: http://localhost:8123,timeout: 60000,withCredentials: true,
})// 全局请求拦截器
myAxios.interceptors.request.use(function (config) {// Do something before request is sentreturn config},function (error) {// Do something with request errorreturn Promise.reject(error)},
)// 全局响应拦截器
myAxios.interceptors.response.use(function (response) {const { data } response// 未登录if (data.code 40100) {// 不是获取用户信息的请求并且用户目前不是已经在用户登录页面则跳转到登录页面if (!response.request.responseURL.includes(user/get/login) !window.location.pathname.includes(/user/login)) {message.warning(请先登录)window.location.href /user/login?redirect${window.location.href}}}return response},function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response errorreturn Promise.reject(error)},
)export default myAxios3、自动生成请求代码
如果采用传统开发方式针对每个请求都要单独编写代码很麻烦。推荐使用 OpenAP| 工具直接自动生成即可:https://www.npmjs.com/package/umijs/openapi按照官方文档的步骤先安装: npm i --save-dev umijs/openapi openapi.config.js 根据自己的需要定制生成的代码: 在 **项目根目录 **新建
import { generateService } from umijs/openapigenerateService({requestLibPath: import request from /request,schemaPath: http://localhost:8123/api/v2/api-docs,serversPath: ./src,
})注意要将 schemaPath 改为自己后端服务提供的 Swagger 接口文档的地址。 在package.json的script 中添加openapi:node openapi.config.js 执行即可生成请求代码还包括 TypeScript 类型: 如果生成过程中出现环境没装根据提示安装即可 如此处执行 npm install tslib --save-dev 即可以后每次后端接口变更时只需要重新生成一遍就好非常方便
4、测试请求
可以尝试在任意页面代码中调用 AP1 :
import { healthUsingGet } from /api/mainControllerhealthUsingGet().then((res) {console.log(res)
})按 F12 打开开发者工具查看请求由于我们后端已经添加了全局跨域配置正常情况下应该能看到如下响应 : 解决跨域 (可选) 如果发现请求错误要查看错误信息具体分析。比如遇到跨域问题这是由于前端网页地址和后端请求接口地址不同导致的 : 这种情况下可以通过修改后端代码增加全局跨域配置或者跨域注解来解决如果后端代码无法修改还可以通过前端代理服务器来解决如果项目使用 Vite内置了代理服务器。可以修改 vite.config.ts 文件增加代理配置 :
export default defineConfig({server: {proxy: {/api: http://localhost:8123,}},
})同时修改 request.ts移除请求前缀 :
// 创建 Axios 实例
const myAxios axios.create({baseURL: ,timeout: 60000,withCredentials: true,
})这样一来前端发送的请求域名就等同于当前 URL 的域名就不会出现跨域。但是访问到 /api开头的接口时会被代理到请求 8123 端口的后端服务器从而完成请求。当然前端还有很多代理工具比如 Whistle 。
补充
在后续开发中你会发现Ant Design Vue 默认使用的是英文文案如果需要替换为中文可以参考 国际化文档只需给整个应用包裹一层组件即可完成。
