用vue写的网站会被收录_如何用vue开发网站

2021-08-08 18:50:24LanceLee江苏197

- N +

Nuxt.js是vue.js的通用框架，最常用的就是作ssr ，一般的vue-cli不利于搜索引擎的seo操作，但是nuxt很好的解决了这一大问题。

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配置：nuxt.config.js文件；头部SEO索引：关键字、描述等配置中间差价：例如Swiper的引用：中间差价：

例如Swiper的引用：

在项目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开发，学习研究欢迎使用，关注我们保持联系！

本文版权归趣KUAI排www.SEOguruBlog.com 所有,如有转发请注明来出,竞价开户托管,seo优化请联系QQ→61910465

标签：用vue写的网站会被收录