一、创建项目,并运行
终端运行 npx create-nuxt-app <项目名> (npx(npx在NPM版本5.2.0默认安装了)),填写完项目信息后进入项目目录运行 npm run dev即可
二、目录介绍
具体参考官方文档目录部分介绍 https://www.nuxtjs.cn/guide/directory-structure#%E7%9B%AE%E5%BD%95
三、各个目录的使用方法
1、assects 目录 和 static 目录。
在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。
2、components 目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。
在components 目录下新建nav.js
在需要使用的地方引入即可
3、layouts 目录
在layouts 目录下新建home.vue文件
在需要不同布局的页面里写上如下代码
注意:布局没有指定的话,都是使用default.vue这个布局的
4、middleware 目录
参考 https://www.nuxtjs.cn/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6
5、pages 目录
假设 pages 的目录结构如下:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么,Nuxt.js 自动生成的路由配置如下:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
动态路由和其他详细内容参考 https://www.nuxtjs.cn/guide/routing
6、plugins 目录
使用第三方模块
首先我们需要安装 npm 包:
npm install --save axios
然后,在页面内这样使用:
<template>
<h1>{{ title }}</h1>
</template>
<script>
import axios from 'axios'
export default {
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
</script>
使用 Vue 插件
假如我们想使用 vue-notifications 显示应用的通知信息,我们需要在程序运行前配置好这个插件。
首先增加文件 plugins/vue-notifications.js:
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)
然后, 在 nuxt.config.js 内配置 plugins 如下:
module.exports = {
plugins: ['~/plugins/vue-notifications']
}
具体参考 https://www.nuxtjs.cn/api/configuration-plugins
7、store 目录
普通写法:
使用普通方式的状态树,需要添加 store/index.js 文件,并对外暴露一个 Vuex.Store 实例:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state, payload) {
state.count = state.count + payload
}
},
actions: {
add({commit}, payload) {
commit('add', payload)
}
}
})
export default store
使用的时候就跟普通的vue 中vuex的用法一样 this.$store.dispatch(‘add’, 123)
使用的时候 this.$store.dispatch(‘nav/updActiveIndex’, 3)
8、页面切换的过度动画
全局过度动画效果设置
在全局样式文件 assets/main.css 里添加一下样式:
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
然后添加到 nuxt.config.js 文件中:
module.exports = {
css: [
'assets/main.css'
]
}
单独给某个页面设置过度动画
在全局样式 assets/main.css 中添加一下内容:
.test-enter-active, .test-leave-active {
transition: opacity .5s;
}
.test-enter, .test-leave-active {
opacity: 0;
}
然后我们将页面组件中的 transition 属性的值设置为 test 即可:
export default {
transition: 'test'
}
9、设置head
设置全局的head
在nuxt.config.js中
module.exports = {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}
单独给某个页面设置head,在 head 方法里可通过 this 关键字来获取组件的数据,你可以利用页面组件的数据来设置个性化的 meta 标签。
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data () {
return {
title: 'Hello World!'
}
},
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'My custom description' }
]
}
}
}
</script>
具体参考 https://zh.nuxtjs.org/api/pages-head/
10、配置IP和端口
在根目录下的 package.json 里对 config 项进行配置
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":"1818"
}
},
11、页面内常用的钩子函数
asyncData({app, query, params}) {
// app Vue的根实例
// query 是路由传值 ?a=1&b=2
// params 是路由动态传值 :id
// 具体参考 https://zh.nuxtjs.org/api/context
console.log(window) // 服务端报错
},
fetch() {
console.log(window) // 服务端报错
},
created () {
console.log(window) // undefined
},
mounted () {
console.log(window) // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
}
12、asyncData 的使用
export default {
data () {
return {
list: []
}
},
async asyncData ({ query }) {
console.log('query', query)
// .....这边用axios请求数据 记得异步await请求
let list = res.data
// return { list: list } 相当于下面那行
return { list }
}
}