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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

Nuxt的优点：

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES6/ES7 语法支持
• 打包和压缩 JS 和 CSS
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus等等

Nuxt.js安装：

npm install vue-cli -g（注：如果你已经安装过了，可以省略这步）

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!vue init nuxt/starter（注：初始化项目）

npm install（注：安装依赖包）

欢迎大家来到IT世界,在知识的湖畔探索吧!npm run dev（注：启动项目）

Nuxt配置：nuxt.config.js文件；

• 头部SEO索引：关键字、描述等配置

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

中间差价：

例如Swiper的引用：

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

欢迎大家来到IT世界,在知识的湖畔探索吧!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 } ],

欢迎大家来到IT世界,在知识的湖畔探索吧!css: [   { src: "swiper/dist/css/swiper.css" } ],

在nuxt.js中跳转可以使用：

 
   
   跳转 
  

ansycData的使用方法：

欢迎大家来到IT世界,在知识的湖畔探索吧!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开发，学习研究欢迎使用，关注我们保持联系！