04-Nuxt.js基本使用-创建Nuxt工程

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保留的，不可更改。

访问端口