看到nuxt可以解决seo的问题，根据www.nuxtjs.cn/guide/insta… 官网地址开搞。 我安装的nuxt版本是2.15.7 按照官网的步骤一顿操作后，我们会得到以下目录结构（除红色框框以外）
相关目录的接口信息我这里就不在赘述，官网讲的很详细
通信采用axios
安装@nuxt/axios模块： npm install @nuxtjs/axios -S
配置：nuxt.confifig.js
modules: [
'@nuxtjs/axios',
],
axios: {
proxy: true
},
proxy: {
"/api": "http://localhost:8080"
}, 接下来自己可以对axios进行一些封装，可以在plugins目录下创建一个axios.js，然后再nuxt.confifig.js进行注册plugins: ["@/plugins/axios"]这样就可以全局引用了 如果想在axios里面操作store或route等内容的话，可以通过以下方式
大家如果在nuxt.confifig.js中注册设置了components: true,会发现组件会自动导入，感觉很nice
asyncData ⽅法使得我们可以在设置组件数据之前异步获取或处理数据。
index.vue
export default {
async asyncData({ $axios, error }) {
const {ok, goods} = await $axios.$get("/api/goods");
if (ok) {
return { goods };
}
// 错误处理
error({ statusCode: 400, message: "数据查询失败" });
},
} 配置404页面，在layout文件夹新建一个error.vue文件
试着在页面输入一个错的路由，页面会自动跳转到这个error页面。
如果需要使用cookie的话，npm i -S cookie-universal-nuxt。在store/index.js，注意 在nuxt.confifig.js配置modules:['cookie-universal-nuxt'] 然后再组件中就可以this.$cookies来使用cookies了
nuxtServerInit
通过在store的根模块中定义 nuxtServerInit ⽅法，将服务端的⼀些数据传到客户端。前提是已经安装了cookie-universal-nuxt。在store/index.js，注意nuxtServerInit只在store/index.js文件才生效 export const actions = {
nuxtServerInit({ commit }, { app }) {
//获取服务端的信息
const token = app.$cookies.get("token");
if (token) {
console.log("nuxtServerInit: token:"+token);
//这里操作store进行存储
commit("user/SET_TOKEN", token);
}
}
};
可以注册一个中间件来管理权鉴 在middleware下新建一个文件，比如auth.js，然后再nuxt.confifig.js中注册
router: {
middleware: 'auth'
},
如果想根据不同的环境来配置服务，那么可以通过安装cross-env来进行 首先npm i -S cross-env安装 然后在nuxt.config.js导出
新建一个env.js，来管理
新建一个store文件来保存，然后再axios中就可以使用了 store.state.envpath.url.BASE_API
需要注意，在nuxt中store的state必须是个函数
export const state=()=>({ name:'',age:'' })
如果需要在nuxt中使用localStorage,需要安装nuxt-vuex-localstorage 在nuxt.config.js上需要配置 modules： ['nuxt-vuex-localstorage', { mode: 'debug',//这样是调试状态存储在页面中看到的是不会加密的 // localStorage: ['localStorage', 'foo']//不配置的话 就是默认的localStorage跟， //sessionStorage:['sessionStorage']//不配置的话 就是默认的sessionStorage.js， }] ] 如果localStorage跟sessionStorage不配置文件的话 就会是默认store文件夹下的localStorage.js跟sessionStorage.js，当然这两个js文件 是需要自己去store文件夹去新建的。比如
在其他文件运用this.$store.commit('localStorage/setLogInfo',{loginName:'qqq',password:'1234'})就可以操作了
好了，经过上述的操作，咱们就可以按照自己的项目需求去构建啦。
