Nuxt最简入门。

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

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/408870.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
网络营销专员网络营销专员订阅用户
上一篇 2023年12月4日 22:30
下一篇 2023年12月4日

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息