黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day12（三） [打印本页]

作者: 谷粒姐姐 时间: 2019-5-10 09:49
标题: 【郑州校区】Java的新项目学成在线笔记-day12（三）
本帖最后由谷粒姐姐于 2019-5-28 15:04 编辑

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

‐ 资源目录资源目录 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保留的，不可更改。
nuxt.js 提供了目录的别名，方便在程序中引用：

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2