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，查文档，自学，实践才是唯一的方法。虽然现在很多东西都不懂，但希望：这条路上一直有光！！！
