A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 谷粒姐姐 于 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 提供了目录的别名,方便在程序中引用:





0 个回复

您需要登录后才可以回帖 登录 | 加入黑马