See nuxt can solve the problem of seo, according to www.nuxtjs.cn/guide/insta. The official website address is open. The nuxT version I installed is 2.15.7. After following the steps on the official website, we will get the following directory structure (except the red boxes)
I will not repeat the interface information of the relevant directory here, the official website is very detailed
Communication using axiOS install @nuxt/ AXIOS module: NPM install @nuxtjs/ AXIos-s configuration: nuxt.confifig.js
modules: [
‘@nuxtjs/axios’,
].
axios: {
proxy: true
},
proxy: {
“/api”: “http://localhost:8080”
}, you can then wrap axios in the plugins directory to create axios.js, and then nuxt.confifig.js to register the plugins: [“@/plugins/axios”] if you want to manipulate things like store or route in AXIos, you can do it in the following way
If you register components: True in nuxt.confifig.js, you will find that the components are automatically imported and feel nice
The asyncData method allows us to asynchronously fetch or process component data before setting it up.
index.vue
export default {
async asyncData({ $axios, error }) {
const {ok, goods} = await $axios.$get("/api/goods"); if (ok) { return { goods }; } error({statusCode: 400, message: "data query failed"}); },Copy the code} configure the 404 page and create a new error.vue file in the Layout folder
NPM i-S cookie-universal-nuxt if cookies are required. In store/index.js, notice that nuxt.confifig.js configures modules:[‘cookie-universal-nuxt’] and then this.$cookies can use cookies in the component
nuxtServerInit
Pass some data from the server to the client by defining the nuxtServerInit method in the root module of the Store. The prerequisite is that cookie-universal-nuxt has been installed. In store/index.js, note that nuxtServerInit only works in store/index.js. Export const Actions = {
NuxtServerInit ({commit}, {app}) {// Get server information const token = app.$cookies. Get ("token"); if (token) { console.log("nuxtServerInit: token:"+token); Commit ("user/SET_TOKEN", token); }}Copy the code};
You can register middleware to manage authorization by creating a new file under middleware, such as Auth.js, and then registering it in nuxt.confifig.js
router: {
middleware: 'auth'
Copy the code},
If you want to configure the service for different environments, you can do this by installing cross-env first NPM i-s cross-env and then exporting it in nuxt.config.js
Note that in NUxT the store state must be a function
export const state=()=>({ name:”,age:” })
Modules: [‘nuxt-vuex-localstorage’, {mode: nuxt-vuex-localstorage’, {mode: ‘debug’,// so is the debug state stored in the page as seen is not encrypted // localStorage: [‘localStorage’, ‘foo’]// sessionStorage:[‘sessionStorage’] }]] localstorage.js and sessionStorage.js; Of course, these two JS files need to go to the Store folder to create. Such as
