Nuxt.js
官网:https://www.nuxtjs.cn/guide/configuration
一、安装
Nuxt.js 十分简单易用。一个简单的项目只需将
nuxt
添加为依赖组件即可。
1-1、运行 create-nuxt-app
为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app。
确保安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了):
$ npx create-nuxt-app <项目名>
或者用 yarn :
$ yarn create nuxt-app <项目名>
它会让你进行一些选择:
- 在集成的服务器端框架之间进行选择:
- 选择您喜欢的 UI 框架:
- 选择您喜欢的测试框架:
- 选择你想要的 Nuxt 模式 (
Universal
orSPA
) - 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
- 添加 EsLint 以在保存时代码规范和错误检查您的代码。
- 添加 Prettier 以在保存时格式化/美化您的代码。
当运行完时,它将安装所有依赖项,因此下一步是启动项目:
$ cd <project-name>
$ npm run dev
应用现在运行在 http://localhost:3000 上运行。
注意:Nuxt.js 会监听 pages
目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
1-2、从头开始新建项目
如果不使用 Nuxt.js 提供的 starter 模板,我们也可以从头开始新建一个 Nuxt.js 应用项目,过程非常简单,只需要 1 个文件和 1 个目录。如下所示:
$ mkdir <项目名>
$ cd <项目名>
提示: 将 <项目名>
替换成为你想创建的实际项目名。
新建 package.json 文件
package.json
文件用来设定如何运行 nuxt
:
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
上面的配置使得我们可以通过运行 npm run dev
来运行 nuxt
。
安装 nuxt
一旦 package.json
创建好, 可以通过以下 npm 命令将 nuxt
安装至项目中:
$ npm install --save nuxt
pages 目录
Nuxt.js 会依据 pages
目录中的所有 *.vue
文件生成应用的路由配置。
创建 pages
目录:
$ mkdir pages
创建我们的第一个页面 pages/index.vue
:
<template>
<h1>Hello world!</h1>
</template>
然后启动项目:
$ npm run dev
现在我们的应用运行在 http://localhost:3000 上运行。
注意:Nuxt.js 会监听 pages
目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
二、目录结构
Nuxt.js 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用。当然,你也可以根据自己的偏好组织应用代码。
目录
资源目录
资源目录 assets
用于组织未编译的静态资源如 LESS
、SASS
或 JavaScript
。
组件目录
组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData
方法的特性。
布局目录
布局目录 layouts
用于组织应用的布局组件。
若无额外配置,该目录不能被重命名。
中间件目录
middleware
目录用于存放应用的中间件。
页面目录
页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue
文件并自动生成对应的路由配置。
若无额外配置,该目录不能被重命名。
插件目录
插件目录 plugins
用于组织那些需要在 根vue.js应用
实例化之前需要运行的 Javascript 插件。
静态文件目录
静态文件目录 static
用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候,该目录下的文件会映射至应用的根路径 /
下。
举个例子: /static/robots.txt
映射至 /robots.txt
若无额外配置,该目录不能被重命名。
Store 目录
store
目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store
目录下创建一个 index.js
文件可激活这些配置。
若无额外配置,该目录不能被重命名。
nuxt.config.js 文件
nuxt.config.js
文件用于组织 Nuxt.js 应用的个性化配置,以便覆盖默认配置。
若无额外配置,该文件不能被重命名。
package.json 文件
package.json
文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件不能被重命名。
别名
别名 | 目录 |
---|---|
~ 或 @ | srcDir |
~~ 或 @@ | rootDir |
默认情况下,srcDir
和 rootDir
相同。
提示: 在您的 vue
模板中, 如果你需要引入 assets
或者 static
目录, 使用 ~/assets/your_image.png
和 ~/static/your_image.png
方式。
三、axios
1、安装
npm install axios
2、封装
创建一个文件夹 ,这里是utils ,创建request.js文件,进行封装
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
// baseURL: "http://127.0.0.1:8888" ,
baseURL: "http://47.93.38.244:8888" ,
timeout: 15000
})
// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
//为请求头对象添加Token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token');
return config;
}, err => {
// console.log(err);
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的网络请求
return instance(config)
}
四、使用
4-1、布局Layout
1、默认布局
如果想拥有统一的页面风格,例如:一致的页头和页尾,可以使用Layout,布局文件的默认的名字是default.vue,放在layouts目录中
注意:新创建的layout重启前端服务器后应用
layouts/default.vue
<template>
<div>
<Nuxt />
<div>default footer</div>
</div>
</template>
2、自定义布局
也可以自定义Layout:layouts/my.vue
<template>
<div>
<Nuxt />
<div>my footer</div>
</div>
</template>
在page中使用layout属性指定布局文件:pages/user.vue
<script>
export default {
layout: 'my',
}
</script>
3、重启服务测试
十、插件
1、幻灯片插件
1、安装插件
npm install vue-awesome-swiper
npm install swiper vue-awesome-swiper --save
可以在package.json中看到swiper及vue-awesome-swiper安装的版本
配置
1、在plugins中新建vue-swiper.js文件,并保存以下内容:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
2、在nuxt.config.js配置文件中添加如下内容:
css: [
'swiper/swiper-bundle.css'
],
plugins: [
'@/plugins/vue-swiper'
],