vue-ssr之nuxt.js简介和安装及目录结构
Nuxt.js是什么
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。
除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
Nuxt.js的特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus等等
- 支持HTTP/2 推送
安装
为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。
确保安装了npx（npx在NPM版本5.2.0默认安装了）：
$ npx create-nuxt-app <项目名>根据提示选择自己需要的配置即可生成项目。
PS. 不知道NPX布道 NPX
启动和访问
cd 项目名npm run dev
在浏览器里输入localhost:3000即可访问项目
目录结构
Nuxt.js 的应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。 当然，你也可以根据自己的偏好组织应用代码。
目录
资源目录
资源目录 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/robots.txt 映射至 /robots.txt
该目录名为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保留的，不可更改。
别名
- ~ 或 @ src目录
- ~~ 或 @@ 根目录
默认情况下，src目录和根目录相同
提示: 在您的
vue模板中, 如果你需要引入assets或者static目录, 使用~/assets/your_image.png和~/static/your_image.png方式。
以上是 vue-ssr之nuxt.js简介和安装及目录结构 的全部内容， 来源链接： utcz.com/z/378460.html
