【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 三

3 Nuxt.js基本使用
3.1 创建Nuxt工程
nuxt.js有标准的目录结构，官方提供了模板工程，可以模板工程快速创建nuxt项目。
模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip
本项目提供基于Nuxt.js的封装工程，基于此封装工程开发搜索前端，见“资料”--》xc-ui-pc-portal.zip，解压xc-ui-pc-portal.zip到本项目前端工程目录下。
本前端工程属于门户的一部分，将承载一部分考虑SEO的非静态化页面。
本工程基于Nuxt.js模板工程构建，Nuxt.js使用1.3版本，并加入了今后开发中所使用的依赖包，直接解压本工程即可使用。

3.2 目录结构
本工程的目录结构如下：


‐资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
‐组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
‐布局目录
布局目录 layouts 用于组织应用的布局组件。
该目录名为Nuxt.js保留的，不可更改。
‐中间件目录
middleware 目录用于存放应用的中间件。
‐页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的.vue 文件并自动生成对应的路由配置。
该目录名为Nuxt.js保留的，不可更改。
‐插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
‐静态文件目录
静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/logo.png 映射至 /logo.png该目录名为Nuxt.js保留的，不可更改。
‐Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
该目录名为Nuxt.js保留的，不可更改。‐nuxt.config.js 文件nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
该文件名为Nuxt.js保留的，不可更改。‐package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件名为Nuxt.js保留的，不可更改。


3.3 页面布局
页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

[AppleScript] 纯文本查看 复制代码

一
个例子：
1、定义：layouts/test.vue布局文件，如下：
注意：布局文件中
一
定要加 <nuxt/> 组件用于显示页面内容。
<template>
<div>
<div>这里是头</div>
<nuxt/>
<div>这里是尾</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2、在pages目录创建user目录，并创建index.vue页面
在 pages/user/index.vue 页面里， 可以指定页面组件使用 test 布局，代码如下：
<template>
<div>
测试页面
</div>
</template>
<script>
export default{
layout:
'
test
'
}
</script>
<style>
</style>
3、测试，请求：http://localhost:10000/user，如果如下:
这里是头
测试页面
这里是尾 

【郑州校区】学成在线-第12天-讲义-搜索前端 Nuxt.js 三

3 Nuxt.js基本使用
3.1 创建Nuxt工程
nuxt.js有标准的目录结构，官方提供了模板工程，可以模板工程快速创建nuxt项目。
模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip
本项目提供基于Nuxt.js的封装工程，基于此封装工程开发搜索前端，见“资料”--》xc-ui-pc-portal.zip，解压xc-ui-pc-portal.zip到本项目前端工程目录下。
本前端工程属于门户的一部分，将承载一部分考虑SEO的非静态化页面。
本工程基于Nuxt.js模板工程构建，Nuxt.js使用1.3版本，并加入了今后开发中所使用的依赖包，直接解压本工程即可使用。

3.2 目录结构
本工程的目录结构如下：


‐资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
‐组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
‐布局目录
布局目录 layouts 用于组织应用的布局组件。
该目录名为Nuxt.js保留的，不可更改。
‐中间件目录
middleware 目录用于存放应用的中间件。
‐页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的.vue 文件并自动生成对应的路由配置。
该目录名为Nuxt.js保留的，不可更改。
‐插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
‐静态文件目录
静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/logo.png 映射至 /logo.png该目录名为Nuxt.js保留的，不可更改。
‐Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
该目录名为Nuxt.js保留的，不可更改。‐nuxt.config.js 文件nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
该文件名为Nuxt.js保留的，不可更改。‐package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件名为Nuxt.js保留的，不可更改。


3.3 页面布局
页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

[AppleScript] 纯文本查看 复制代码

一
个例子：
1、定义：layouts/test.vue布局文件，如下：
注意：布局文件中
一
定要加 <nuxt/> 组件用于显示页面内容。
<template>
<div>
<div>这里是头</div>
<nuxt/>
<div>这里是尾</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2、在pages目录创建user目录，并创建index.vue页面
在 pages/user/index.vue 页面里， 可以指定页面组件使用 test 布局，代码如下：
<template>
<div>
测试页面
</div>
</template>
<script>
export default{
layout:
'
test
'
}
</script>
<style>
</style>
3、测试，请求：http://localhost:10000/user，如果如下:
这里是头
测试页面
这里是尾