1.初始化Nuxt项目
vue init nuxt/starter
2.各目录作用
|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的页面，我们主要的工作区域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件，比如图片
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作
|-- package.json // npm包管理配置文件
配置ip和端口号
//package.json
"config": {
"nuxt": {
"host": "localhost",
"port": "3000"
}
},
配置公共css
//首先需要在assets下建需要用的css文件，然后在nuxt.config.js下写
css:['~assets/css/xxxxx.csss']
3.路由
路由跳转
<nuxt-link :to="{name:'index'}">home</nuxt-link>
//传参，params和query都可以传参，获取方式和vue一样
<nuxt-link :to="{name:'news-id',params:{id:123,title:'i am news'}}">new1</nuxt-link>
<nuxt-link :to="{path:'/news/456'}">new2</nuxt-link>
动态路由
//在目录里建_xxx.vue
<nuxt-link :to="{name:'news-xxx',params:{id:123,title:'i am news'}}">new1</nuxt-link>
<nuxt-link :to="{path:'/news/456'}">new2</nuxt-link>
//参数校验 _xxx.vue
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}
路由动画效果
//全局效果
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
//局部页面效果
.news-enter-active,.news-leave-active {
transition: all 1s;
font-size: 16px;
}
.news-enter,.news-leave-active {
opacity: 0;
font-size: 20px;
}
//然后在需要的页面写入这个动画名字
export default {
transition:'news'
}
4.默认模板和默认布局
//默认模板
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
{{ APP }}
</body>
</html>
//默认布局
<template>
<div>
<h1>xxxx</h1>
<nuxt/>
</div>
</template>
5.自定义错误页面和自定义meta
//在根目录下的layouts文件夹下建立一个error.vue文件
<template>
<div>
<h2 v-if="error.statusCode==404">404页面不存在</h2>
<h2 v-else>500服务器错误</h2>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:['error'],
}
</script>
//自定义meta
export default {
head() {
return {
title: 'xxxx',
meta: [
{ hid: 'description', name: 'news1', content: 'This is news page' }
]
}
}
}
6.异步请求
npm install axios --save
//跨域
npm i @nuxtjs/axios @nuxtjs/proxy --save-dev
//封装axios,plugins下创建http.js
//http.js
import axios from 'axios'
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.post['Content-Type'] = 'text/plain;charset=UTF-8'
let service = axios.create({
// baseURL: '/',
timeout: 10000
})
// 请求拦截 可在请求头中加入token等
service.interceptors.request.use(config => {
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截 对响应消息作初步的处理
service.interceptors.response.use(resp => {
if (resp.data) {
if (resp.data.code !== 200) {
console.log(res.data.error)
}
return { code: resp.data.code, data: resp.data.data, msg: resp.data.error }
} else {
return resp
}
}, error => {
if (error.response) {
switch (error.response.status) {
case 400: {
if (error.response && error.response.data && error.response.data.error) {
console.log(res.data.error)
}
break
}
}
}
})
export default service
//统一封装一下接口，根目录下创建api文件夹，然后创建user.js
import request from '@/plugins/http'
export const getList = () => {
return request({
url: '/api/ranking_list?aid=6',
method: 'get'
})
}
//nuxt.config.js配置跨域
plugins: [
{ src: "~plugins/http.js", ssr: true }
],
modules: [
'@nuxtjs/axios',
"@nuxtjs/proxy"
],
axios: {
proxy: true,
retry: { retries: 3 },
//开发模式下开启debug
debug: process.env._ENV == "production" ? false : true,
//设置不同环境的请求地址
baseURL:
process.env._ENV == "production"
? "http://localhost:3000/api"
: "http://localhost:3000/api",
withCredentials: true,
headers: { 'Content-Type': 'application/json', 'crossDomain': true },
timeout: 5000,
},
proxy: {
'/api': {
target: 'http://xxxx.cn',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
//防止axios二次打包
build:{
vendor: ['axios'],
}
//使用方法
<script>
import { getList } from '@/api/user'
export default {
data() {
return {
info: []
};
},
//方法一
asyncData() {
return getList()
.then(res => {
return { info: res.data }
})
},
//方法二
async asyncData() {
let { code, data } = await getList()
console.log(data)
return { info: data }
},
mounted() {
//方法三
getList().then(res => {
this.info = res.data
console.log(res)
}).catch(err => {
console.log(err)
})
},
};
</script>
7.静态资源打包
<div><img src="~static/logo.png" /></div>
//背景图
<style>
.box{
width: 300px;
height: 100px;
background-image: url('~static/logo.png')
}
</style>
//打包
npm run generate
//输出的dist文件夹扔服务器上就可以了
8.vuex的使用
//store文件夹下建模块文件user.js
export const state = () => ({ //state里面存放的是变量，如果你要注册全局变量，写这里
isLogin: false,
});
/*const getters = { //getters相当于是state的计算属性，如果你需要将变量的值进行计算，然后输出，写这里
include: (state) => (val) => {
return state.list.indexOf(val) > -1;
}
}
;*/
const mutations = { //修改store中的变量的方法，如果你要改变变量的值，就写这（vuex中state中的值不能直接修改）
SET_isLogin(state, value) {
state.isLogin = value;
}
};
/*const actions = {//actions提交的是mutations，相当于就是改变变量的方法的重写，但是，actions是可以进行异步操作的
async SET_isLogin({state, commit}, val) {
commit('SET_isLogin', val);
}
};*/
export default {
namespaced: true,//命名空间
state,//这里你用到了哪几个属性就写哪几个，不需要的可以注释掉
// getters,
// actions,
mutations
};
//使用方法
computed:{
...mapState('user',{ //前面三个 . 不是多余的！！ 第一个参数是模块名称（就是js文件名），后面是{变量名：state => 回调函数 } 这个在后面还会讲一下
isLogin:state=>state.isLogin
}),
},
methods: {
// 获取vuex中修改isLogin的方法 , 三个 . 也不能掉 ， 数组的地方都是可以写多个
// ...mapMutations('模块名',['导出的方法名称']),
...mapMutations('user',['SET_isLogin']),
}
