初识vue ssr(nuxt.js) ---- 持续更新

发布时间:2019-05-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了初识vue ssr(nuxt.js) ---- 持续更新脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

安装

// vue-cli 创建nuxt模板项目
$ vue init nuxt-community/starter-template <PRoject-name>
// 安装依赖项
$ cd <project-name>
$ npm install
// 编译并启动服务
$ npm run dev
// 打开 http://localhost:3000

目录结构

@H_406_17@
  • assets 需要编译的资文件,如 JavaScript、SASS、LESS 等。
  • static 不需要编译的静态资源文件,如图片资源。
  • components 顾名思义,存放 *.vue 组件的地方。一般用来存放非页面级别的组件,如 header、footer 等公共组件,该目录下的组件具有常规 vue 组件的方法和特性,不会被 nuxt.js 扩展特性
  • layouts 布局目录,设置布局的地方,其中 <nuxt/> 标签是我们写的页面内容。可用作添加导航栏、底部栏等截面。
  • middleware 中间件目录,所谓中间件,就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
  • pages 用于存放页面级别的组件。该目录下的文件会转换成相应的路由路径供浏览器访问。另外呢,该目录下的 *.vue 页面文件中 Nuxt.js 提供了一些特殊的方法用于处理服务器渲染中的事件。page路由页面
  • plugins 插件目录,像 mint-ui 这种第三方插件就放在这里。插件
  • Store vuex 状态管理器目录,如果该目录是空的, Nuxt.js 将不启用 vuex。当我们在该文件夹下创建 index.js 文件后即可使用 vuex 状态管理器
  • nuxt.config.js 该文件是 Nuxt.js 的唯一配置项,之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了,所以如果需要特殊配置,只需要修改该文件来覆盖默认配置即可 API
  • 注意

    1. header和footer放在layout目录下的default里面

    脚本宝典总结

    以上是脚本宝典为你收集整理的初识vue ssr(nuxt.js) ---- 持续更新全部内容,希望文章能够帮你解决初识vue ssr(nuxt.js) ---- 持续更新所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。