Nuxt最简入门，让vue项目快速被搜索引擎收录
Nuxt.js是vue.js的通用框架，最常用的就是作ssr，一般的vue-cli不利于搜索引擎的seo操作，但是nuxt很好的解决了这一大问题。
Nuxt的优点：
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成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开发，学习研究欢迎使用，关注我们保持联系！