河南做网站公司哪家专业杭州便宜的手机网站建设

当前位置： 首页 > news >正文

河南做网站公司哪家专业,杭州便宜的手机网站建设,网站建设站点,wordpress调用侧边栏5.1 使用vite vue搭建 win r 打开终端 切换到你想要搭建的盘 npm init vitelatest跟着以下步骤取名即可 cd fullStackBlognpm installnpm run dev默认在 http://localhost:5173/ 下启动了 5.2 用vscode打开项目并安装需要的插件 1、删除多余的 HelloWorld.vue 文件 2、安装…5.1 使用vite vue搭建 win r 打开终端 切换到你想要搭建的盘 npm init vitelatest跟着以下步骤取名即可 cd fullStackBlognpm installnpm run dev默认在 http://localhost:5173/ 下启动了 5.2 用vscode打开项目并安装需要的插件 1、删除多余的 HelloWorld.vue 文件 2、安装需要的插件 网络请求我直接用fetch了你需要用axios的话就执行以下命令安装使用也很简单 npm i axios -S安装Element-Plus并引入到入口文件 main.js 这里使用了全局引入按需引入的参考官网很简单 安装element-plus/icons-vue图标 npm install element-plus/icons-vue全局引入 npm install element-plus –save在main.js中引入 import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vue import * as ElementPlusIconsVue from element-plus/icons-vueconst app createApp(App)app.use(ElementPlus) for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component) } app.mount(#app)按需引入需要装两个插件然后在vite.config.js中配置打开注释部分即可 npm install -D unplugin-vue-components unplugin-auto-import unplugin-iconsimport { defineConfig } from vite import vue from vitejs/plugin-vue // import AutoImport from unplugin-auto-import/vite // import Components from unplugin-vue-components/vite // import { ElementPlusResolver } from unplugin-vue-components/resolvers // import Icons from unplugin-icons/vite // import IconsResolver from unplugin-icons/resolver// https://vitejs.dev/config/ export default defineConfig({plugins: [vue(),// AutoImport({// resolvers: [// ElementPlusResolver(),// IconsResolver({// prefix: Icon,// })// ],// }),// Components({// resolvers: [// ElementPlusResolver(),// IconsResolver({// enabledCollections: [ep],// }),// ],// }),// Icons({// autoInstall: true,// }),], }) 安装tailwindcss并配置 执行以下命令安装tailwindcss和相应的插件 npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p会生成 tailwind.config.js 和 postcss.config.js 文件即可 然后在assets文件夹下创建一个 tailwind.css 文件名称可以自定义 写上以下代码并引入到入口文件main.js // tailwind.config.js / type {import(tailwindcss).Config} / export default {content: [./index.html,./src/**/.{vue,js,ts,jsx,tsx},],theme: {extend: {},},plugins: [], } // postcss.config.js export default {plugins: {tailwindcss: {},autoprefixer: {},}, } // tailwind.css文件 tailwind base; tailwind components; tailwind utilities;// main.js import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import ./assets/css/tailwind.css import ./style.css import App from ./App.vueconst app createApp(App)app.use(ElementPlus) app.mount(#app)3、在App.vue中验证element 与 tailwind 是否生效 // App.vue templatedivh4 classtext-3xl font-blod underlinedemo/h4el-button classmt-24 typeprimarybutton/el-button/div /templatescript setup /scriptstyle scoped /style 验证没问题 5.3 页面布局 安装vue-router路由 npm install vue-router4在src目录下新建router文件夹新建index.js路由文件 // router/index.js import { createRouter, createWebHistory } from vue-router;const route [{path: /,component: () import(../views/blog/List.vue)},{path: /add,component: () import(../views/blog/Add.vue)} ]const router createRouter({history: createWebHistory(),routes: […route] });export default router; 在src下新建views文件夹在views下新建blog文件夹在blog下新建List.vue 和 Add.vue 文件 // List.vue templatedivlist/div /templatescript setup/scriptstyle scoped/style// Add.vue templatedivadd/div /templatescript setup/scriptstyle scoped/style在main.js中引入路由并挂载 // main.js import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import ./assets/css/tailwind.css import ./style.css import App from ./App.vue import router from ./routerconst app createApp(App)app.use(router) app.use(ElementPlus) app.mount(#app)在components下新建Header.vue Main.vue Footer.vue Nav.vue 并添加如下代码
// Header.vue templatedivel-header classh-16 p-4 header-wrapperel-rowel-col :span12button classbutton data-textAwesome clickgoToHomespan classactual-textnbsp;blognbsp;/spanspan aria-hiddentrue classhover-textnbsp;blognbsp;/span/button/el-colel-col :span12 classflex justify-endNav //el-col/el-row/el-header/div /templatescript setup import Nav from ./Nav.vue/scriptstyle scoped .header-wrapper{line-height: 64px; } /stylestyle scoped .button {margin: 0;height: auto;background: transparent;padding: 0;border: none;cursor: pointer; }.button {–border-right: 6px;–text-stroke-color: #1da1f2;–animation-color: #1da1f2;–fs-size: 2em;letter-spacing: 3px;text-decoration: none;font-size: var(–fs-size);font-family: Arial;position: relative;text-transform: uppercase;color: transparent;-webkit-text-stroke: 1px var(–text-stroke-color); }.hover-text {position: absolute;box-sizing: border-box;content: attr(data-text);color: var(–animation-color);width: 0%;inset: 0;border-right: var(–border-right) solid var(–animation-color);overflow: hidden;transition: 0.5s;-webkit-text-stroke: 1px var(–animation-color); }.button:hover .hover-text {width: 100%;filter: drop-shadow(0 0 23px var(–animation-color)) } /style// Main.vue templatedivel-main classflex justify-center items-center containerRouterView //el-main/div /templatescript setup/scriptstyle scoped .container {min-width: 100%;height: calc(100vh - 128px); } /style// Footer.vue templatedivel-footer classh-16 flex justify-center items-center bg-black text-whiteFooter/el-footer/div /templatescript setup/scriptstyle scoped/style// Nav.vue templatediv classbutton-containerbutton classbutton clickgoHomeList/buttonbutton classbutton clickgoAddAdd/button /div/templatescript setup import { useRouter } from vue-routerconst router useRouter()const goHome () {router.push({ path: / }) }const goAdd () {router.push({ path: /add }) } /scriptstyle scoped .button-container {display: flex;background-color: rgba(0, 73, 144);width: 250px;height: 40px;align-items: center;justify-content: space-around;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,rgba(0, 73, 144, 0.5) 5px 10px 15px;transition: all 0.5s; } .button-container:hover {width: 300px;transition: all 0.5s; }.button {outline: 0 !important;border: 0 !important;width: 40px;height: 40px;border-radius: 50%;background-color: transparent;display: flex;align-items: center;justify-content: center;color: #fff;transition: all ease-in-out 0.3s;cursor: pointer; }.button:hover {transform: translateY(-3px); }.icon {font-size: 20px; }/style// App.vue改造为以下结构 templatedivHeader/HeaderMain/MainFooter/Footer/div /templatescript setup import Header from ./components/Header.vue import Main from ./components/Main.vue import Footer from ./components/Footer.vue/scriptstyle scoped /style 初步布局完成页面如图
5.4 新增博客页面 前端部分 页面使用了markdown语法安装以下插件 编写markdowmmavon-editor 展示markdownmarkdown-it、highlight.js vue2下安装mavon-editorvue3下安装mavon-editornext npm install mavon-editornext markdown-it highlight.js –save// Add.vue 四个字段 ​ 标题title ​ 作者 auth ​ 文档mdoc ​ 创建时间createtime // markdowm 暂时对图片没做处理 templatediv classadd-wrapperdiv classtop-anonymousel-input v-modeltitle placeholder标题选填/el-inputel-input classmt-4 v-modelauth placeholder作者选填/el-input/divdiv classbottom-anonymousmavon-editor classh-full :toolbarsmarkdownOption v-modelmdoc //divbutton classmt-8 button_submit clicksavediv classbutton_submitintspan classbutton_submitspanSubmit/span/div/button/div /templatescript setup import { ref } from vue import { ElNotification } from element-plus import { useRouter } from vue-router import { dayjs } from element-plus import { mavonEditor } from mavon-editor import mavon-editor/dist/css/index.cssconst router useRouter()let mdoc ref()let markdownOption ref({bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: false, // 全屏编辑readmodel: false, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存触发events中的save事件navigation: true, // 导航目录alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐subfield: true, // 单双栏模式preview: true, // 预览 })let title ref() let auth ref()const save async () {if (!mdoc.value) {ElNotification({message: 请录入内容,type: error}) return}const params {title: title.value || 标题–${dayjs().format(YYYY-MM-DD HH:mm:ss)},auth: auth.value || 恋爱单排选手,mdoc: mdoc.value,createtime: dayjs().format(YYYY-MM-DD HH:mm:ss)}const response await request(params)console.log(response)if (!response.ok) {ElNotification({message: response.message,type: error}) return}ElNotification({message: 写入成功,type: success})router.push({ path: / })}const request async (params) {const url \({import.meta.env.VITE_API_BASE_URL}/api/addconst response await fetch(url, {method: POST,headers: {Content-Type: application/json},body: JSON.stringify(params)})return response }/scriptstyle scoped .add-wrapper {width: 90%;height: 96%;display: flex;flex-direction: column;justify-content: space-between;align-items: center; } .top-anonymous {width: 100%; } .bottom-anonymous {margin-top: 32px;width: 100%;height: 100%; }/stylestyle scoped .button_submit {background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);border: none;font-size: 1.2em;border-radius: 1.5em;padding: 4px;transition: border-top-left-radius 0.2s ease-in, border-top-right-radius 0.2s ease-in 0.15s, border-bottom-right-radius 0.2s ease-in 0.3s,border-bottom-left-radius 0.2s ease-in 0.45s, padding 0.2s ease-in;position: relative; }.button_submit__int {background-color: #212121;color: white;border-radius: 1.3em;padding: 10px 40px;transition: all 0.2s ease-in,border-top-left-radius 0.2s ease-in, border-top-right-radius 0.2s ease-in 0.15s, border-bottom-right-radius 0.2s ease-in 0.3s,border-bottom-left-radius 0.2s ease-in 0.45s,padding 0.2s ease-in;font-weight: 600;z-index: -1;box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),15px -10px 30px -5px rgba(255, 0, 212, 0.8),15px 10px 30px -5px rgba(255, 174, 0, 0.8),-15px 10px 30px -5px rgba(255, 230, 0.8); }.button_submit:active .button_submit__int {padding: 10px 30px; }.button_submit:hover {border-radius: 0; }.button_submit:hover .button_submit__int {border-radius: 0; }.button_submit:hover .button_submit__int {box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),25px -10px 30px -5px rgba(255, 0, 212, 0.7),25px 10px 30px -5px rgba(255, 174, 0, 0.7),-25px 10px 30px -5px rgba(255, 230, 0, 0.7); }/style5.4 列表页面展示前端部分 // List.vue 页面数据目前是伪造的后面后端写完后直接调用 templatediv classw-full h-full pt-10 box-border flex justify-between list-wrapperdiv classw-3/5 h-full mr-4 relative left-wrapperdivinputclassw-full bg-[#004990] text-white font-mono ring-1 ring-zinc-400 focus:ring-2 focus:ring-blue-400 outline-none duration-300 placeholder:text-white placeholder:opacity-50 rounded-full px-4 py-1 shadow-md focus:shadow-lg focus:shadow-blue-400autocompleteoffplaceholdertitle...nametitletypetextv-modelinputblursearch//divdiv classmt-8 overflow-y-scroll blog-listdiv v-foritem in blogList :keyitemdiv classtext-3xl cursor-pointer span classhover:text-[#1da1f2]{{ item.title }}/span/divdiv classflex flex-row my-4el-text classbasis-2/4 typeinfoel-iconPosition //el-icon{{ item.auth }}/el-textel-text classbasis-2/4 typeinfoel-iconCompass //el-icon{{ item.createtime }}/el-text/divdiv classmt-2 border rounded-md p-4div v-htmlmd.render(item.mdoc)/div/divel-divider //div/divel-pagination classabsolute bottom-0 :hide-on-single-pageisShowPage background layoutprev, pager, next :page-size5:default-page-size5 :current-pagecurrentPage :totaltotalNum current-changecurrentChange //divdiv classw-2/5 h-full right-wrapperdiv classh-24/divdiv class/div/div/divdiv classwrite-btn-wrapper clickgoWriteWriteBtn //div /templatescript setup import { ref } from vue import WriteBtn from ../../components/WriteBtn.vue import markdownit from markdown-it import hljs from highlight.js/lib/core import highlight.js/styles/atom-one-dark.css import { useRouter } from vue-router const router useRouter()const goWrite () {router.push({ path: /add }) } let input ref() let blogList ref([{title: title1,auth: auth1,createtime: 2024-06-04,mdoc: ## 132\nlanguage\nlet a 1 1\n\n},{title: title2,auth: auth2,createtime: 2024-06-04,mdoc: ## 这是一个测试2},{title: title1,auth: auth1,createtime: 2024-06-04,mdoc: ## 132\nlanguage\nlet a 1 1\n\n},{title: title1,auth: auth1,createtime: 2024-06-04,mdoc: ## 132\nlanguage\nlet a 1 1\n\n},{title: title1,auth: auth1,createtime: 2024-06-04,mdoc: ## 132\nlanguage\nlet a 1 1\n\n},{title: title1,auth: auth1,createtime: 2024-06-04,mdoc: ## 132\nlanguage\nlet a 1 1\n\n}, ]) let totalNum ref(100) let currentPage ref(1) // let isShowPage computed(() blogList.value.length 5) let isShowPage falseconst currentChange async (page) {currentPage.value pageconsole.log(page, )requestData()}const md markdownit({html: true,linkify: true,typographer: true,breaks: true,highlight: function (str, lang) {if (lang hljs.getLanguage(lang)) {try {return precode classlanguage-\){lang} hljs hljs.highlight(str, { language: lang, ignoreIllegals: true }).value /code/pre;} catch (__) { }}return precode classlanguage-none hljs md.utils.escapeHtml(str) /code/pre;} })const search () {requestData() }const requestData async () {console.log(import.meta.env.VITE_API_BASE_URL, )const url \({import.meta.env.VITE_API_BASE_URL}/api/listconsole.log(input.value, input.value)const params {currentPage: currentPage.value - 1,title: input.value.trim()}const queryString new URLSearchParams(params).toString();const requestUrl \){url}?${queryString};const response await fetch(requestUrl, {method: GET,headers: {Content-Type: application/json}})if (!response.ok) {throw new Error(Failed to fetch data)}const data await response.json()// console.log(Data from backend:, data)const { data: resData, total } datablogList.value resDatatotalNum.value total }/scriptstyle scoped .write-btn-wrapper {position: fixed;top: 120px;right: 40px; } .blog-list {height: 90%; }/style