首页 » 网站建设公司 » nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录

nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录

访客 2024-10-19 0

扫一扫用手机浏览

文章目录 [+]

Nuxt的优点:基于 Vue.js自动代码分层做事端渲染强大的路由功能,支持异步数据静态文件做事ES6/ES7 语法支持打包和压缩 JS 和 CSSHTML头部标签管理本地开拓支持热加载集成ESLint支持各种样式预处理器: SASS、LESS、 Stylus等等Nuxt.js安装:

npm install vue-cli -g(注:如果你已经安装过了,可以省略这步)

vue init nuxt/starter(注:初始化项目)

npm install(注:安装依赖包)

npm run dev(注:启动项目)

nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录 nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录 网站建设公司

Nuxt配置:nuxt.config.js文件;头部SEO索引:关键字、描述等配置

中间差价:例如Swiper的引用:中间差价:

例如Swiper的引用:

nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录 nuxt做seo若何进步收录_Nuxt最简入门让vue项目快速被搜索引擎收录 网站建设公司
(图片来自网络侵删)

在项目plugins这个文件新建vue-swiper.js,里面内容:

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'Vue.use(VueAwesomeSwiper)

在nuxt.config.js引用:

plugins: [ { src: "~/plugins/vue-swiper.js", ssr: false }],

css: [ { src: "swiper/dist/css/swiper.css" }],

在nuxt.js中跳转可以利用:

<nuxt-link to="/shoppingCart" class="cartNum"><span class="iconfont icon-dingbu-gouwuche"></span>跳转</nuxt-link>

ansycData的利用方法:

async asyncData({$axios}){ const keyCode = await $axios.$get('/verify_code') return { keyCode:keyCode.key }},

Vuex的利用:

export const state = () => ({ headers: true, footers: true})export const mutations = { isHeader (state, data) { state.headers = data; }, isFooter (state, data) { state.footers = data; }}export const actions = {}

感谢您的阅读,如果对您有帮助,欢迎关注"CRMEB"头条号。
码云上有我们开源的商城项目,知识付费项目,均是基于PHP+vue开拓,学习研究欢迎利用,关注我们保持联系!

标签:

相关文章

网站设计,构建企业数字形象的基石

随着互联网的飞速发展,网站已经成为企业展示形象、传播信息、拓展业务的重要平台。一个优秀的网站设计,不仅能提升企业的品牌形象,还能为...

网站建设公司 2024-12-15 阅读0 评论0

网站设计,构建数字世界的艺术与科学

随着互联网的飞速发展,网站已经成为人们获取信息、交流互动的重要平台。一个优秀的网站设计不仅能够提升用户体验,还能够为企业或个人带来...

网站建设公司 2024-12-15 阅读0 评论0

大IT小票,见证数字时代下的创新与变革

随着科技的飞速发展,我国IT产业取得了举世瞩目的成就。在这其中,大IT小票作为IT产业的一个重要缩影,不仅见证了我国IT产业的成长...

网站建设公司 2024-12-15 阅读0 评论0

探索IT行业16款经典产品,影响时代的力量

随着科技的飞速发展,IT行业在过去的几十年里涌现出了无数令人瞩目的产品。这些产品不仅改变了人们的生活方式,更推动了社会的进步。本文...

网站建设公司 2024-12-15 阅读0 评论0