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

Nuxt最简入门,让vue项目快速被搜索引擎收录

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开发,学习研究欢迎使用,关注我们保持联系!

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