create-nuxt-app脚手架创建vue项目

前言

小弟初入前端这是小弟的学习笔记和总结，不适合学习使用；如有大佬发现错误还望指出，在此谢过。

安装create-nuxt-app脚手架

cnpm i -g create-nuxt-app

创建NuxtJS工程

在cmd窗口中输入npx create-nuxt-app bien_test命令，其中bien_test为工程名称，按下回车键后过程如下：

components文件夹

静态文件文件夹

layouts视图布局文件夹

自定义布局 创建空白布局页面 layouts/blank.vue ，用于login.vue

<template>
    <div>
    	<nuxt />
    </div>
</template>

页面 pages/login.vue 使用自定义布局：

export default {    
    layout: 'blank'
}  

自定义错误页面

创建layouts/error.vue

<template>
    <div class="container">
        <h1 v-if="error.statusCode === 404">页面不存在</h1>
        <h1 v-else>应用发生错误异常</h1>
        <p>{{error}}</p>
        <nuxt-link to="/">首 页</nuxt-link>
    </div>
</template>
<script>
    export default {
        props: ['error'],
        layout:'blank'
    } 
</script>

异步数据获取

asyncData 方法使得我们可以在设置组件数据之前异步获取或处理数据

状态管理 vuex

应用根目录下如果存在 store 目录，Nuxt.js将启用vuex状态树。定义各状态树时具名导出state,mutations, getters, actions即可。

范例：创建store/user.js

export const state = () => ({
	token: ''
});
export const mutations = {
    init(state, token) {
    	state.token = token;
	}
};
export const getters = {
    isLogin(state) {
    	return !!state.token;
    }
};
export const actions = {
	login({ commit, getters }, u) {
		return this.$axios.$post("/api/login", u).then(({ token }) => {
			if (token) {
				commit("init", token); //保存token值，调用的是上方mutations中的init方法，如果在其他文件中使用：commit("user/init", token)
			} 
			return getters.isLogin;
		});
	}
};