nuxt.js项目初始化
Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO。
非常方便做vue ssr:省去了很多配置的过程
安装项目:
1. 由于使用的是vue3,vue2的很多命令不能用
npm install -g @vue/cli-init
2. 然后进行初始化项目
vue init nuxt-community/koa-template nuxt-learn
3. 进入项目文件,安装模块
cd nuxt-learn
npm install
4. 启动项目
npm run dev
如果vue是vue3以上的版本,会出现初始化模板错误 必须调整三个插件的版本才能继续跑通
backpack-core 升级到最新版本
eslint3+ 和 eslint-loader 2+也需要升级.
cnpm i backpack-core@latest eslint-loader@latest -D
说明项目启动成功:用 http://localhost:3000/ 访问
怎么关闭nuxt的eslint
找到文件nuxt.config.js,删掉build中的以下内容即可。
build: { /* ** Run ESLINT on save */ /* extend (config, ctx) { if (ctx.isClient) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/ }) } } */ }
nuxt.js项目目录结构介绍
1. 在page文件夹里创建一个 .vue文件就是一个路由
2. layouts文件里面的全部都是模板文件
3. components文件里的全部都是公共组件
4. server文件里都是请求接口相关配置
5. nuxt.config.js文件里是nuxt的全局配置文件,全局配置文件在这里配置,可以点击这里查看api文档
自定义模板实现
- 在layouts文件里面新建layouts/search.vue
<template> <div class="layout-search"> <h2>search layout header</h2> <nuxt /> <footer>search layout footer</footer> </div> </template> <script> export default {}; </script> <style lang="css" scoped> .layout-search { color: red; } </style>
- 在pages文件里面新建layouts/search.vue
<template> <div> <h3>search page</h3> </div> </template> <script> export default { layout: "search", }; </script>
效果如下
接口路由配置实现
- 在server目录新建interface/city.js
import Router from 'koa-router' const router = new Router({ prefix: '/city' }) router.get('/list', async (ctx) => { ctx.body = { list: ['北京', '上海', '江西'] } }) export default router
- 在server/index.js中引入新建路由
import Koa from 'koa' import { Nuxt, Builder } from 'nuxt' // 引入新建接口路由 import cityInterface from './interface/city' // 使用新建接口路由 app.use(cityInterface.routes()).use(cityInterface.allowedMethods())
- 从新建接口中获取数据
<template> <div> <h3>search page</h3> <ul> <li>我是接口获取的数据</li> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> </template> <script> import axios from "axios"; export default { layout: "search", data() { return { list: ["11", "22", "33"] }; }, /* async mounted() { let res = await axios.get('/city/list') console.log(res) if(res.status===200){ this.list = res.data.list } } */ async asyncData() { let res = await axios.get("http://localhost:3000/city/list"); if (res.status === 200) { return { list: res.data.list }; } } }; </script>
结果如下
注意
asyncData 方法
当调用接口是,如果使用mounted方法,页面渲染数据会发生闪烁
async mounted() { let res = await axios.get('/city/list') console.log(res) if(res.status===200){ this.list = res.data.list } }
应该私用asyncData方法:使得我们可以在设置组件的数据之前能异步获取或处理数据。
async asyncData() { let res = await axios.get("http://localhost:3000/city/list"); if (res.status === 200) { return { list: res.data.list }; } }
fetch 方法
fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
使用 Vuex 状态树
对于每个大项目来说,使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了 Vuex。
1. 在项目根目录中新建文件夹 store,里面新建文件夹modules
2. 新建文件store/modules/city.js
const state = () => ({ list: ['路飞','索隆','娜美'] }) const mutations = { add(state, text) { state.list.push(text) } } const actions = { add: ({ commit }, text) => { commit('add', text) } } export default { namespaced: true, state, mutations, actions }
- 新建文件store/modules/navbar.js
const state = () => ({ appList: ['蒙奇D','罗罗诺亚'] }) const mutations = { add(state, text) { state.appList.push(text) } } const actions = { add: ({ commit }, text) => { commit('add', text) } } export default { namespaced: true, state, mutations, actions }
- 新建文件store/index.js
import Vue from 'vue' import Vuex from 'vuex' import city from './modules/city' import navbar from './modules/navbar' Vue.use(Vuex) const store = () => new Vuex.Store({ modules: { city, navbar }, actions: { //严格模式,不需要二次登录 /* nuxtServerInit({ commit }, { req }) { if (req.session.user) { commit('city', req.session.user) } } */ } }) export default store
vuex仓库建立完成
5. 在页面中渲染,找到pages/search.vue
<template> <div> <h3>search page</h3> <ul> <li>我是接口获取的数据</li> <li v-for="(item, index) in list" :key="index">{{item}}</li> <li>我是vuex中city模块里获取的数据</li> <li v-for="(item, index) in $store.state.city.list" :key="index">{{item}}</li> <li>我是vuex中mavbar模块里获取的数据</li> <li v-for="(item, index) in $store.state.navbar.appList" :key="index">{{item}}</li> </ul> </div> </template> <script> import axios from "axios"; export default { layout: "search", data() { return { list: ["11", "22", "33"] }; }, /* async mounted() { let res = await axios.get('/city/list') console.log(res) if(res.status===200){ this.list = res.data.list } } */ async asyncData() { let res = await axios.get("http://localhost:3000/city/list"); if (res.status === 200) { return { list: res.data.list }; } } }; </script>
效果如下
总结
最近学了很多新东西,但是都只停留在会简单安装,简单使用的阶段,对于这些刚学的内容(koa2,redis,nuxt等等)还需要经过漫长的总结,使用,才能更深入的了解其原理,只是会用是不够的。也不可能总依靠有人能会教你怎么使用,自己学会看api,查文档,自学,实践才是唯一的方法。虽然现在很多东西都不懂,但希望:这条路上一直有光!!!