nuxt.js
Nuxt.js 是基于 vue 的服务器端渲染框架。
全局安装 create-nuxt-app 工具
命令:
npm install -g create-nuxt-app
//类似于vie-cli中的(npm i @vue/cli -g),全局安装vue-cli
使用 create-nuxt-app 创建 项目文件夹
create-nuxt-app (自定义项目名)
执行一些选择:
Project name 项目名 //项目名称
Project description My astounding Nuxt.js project //项目描述
Author name 姓名 //作者姓名
Choose programming language JavaScript //选择开发的语言 javascript or typescript
Choose the package manager Npm //选择包管理的工具 npm or yarn
Choose UI framework Element //选择一个UI框架
Choose Nuxt.js modules (Press to select, to toggle all, to invert selection) //添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
Choose linting tools (Press to select, to toggle all, to invert selection) //检查代码是否规范
Choose test framework None //选择一个测试框架
Choose rendering mode Universal (SSR) //选择一种渲染模式 SSR or SPA
Choose development tools (Press to select, to toggle all, to invert selection)
项目文件夹创建成功后,会输出下面的信息:
项目文件夹创建成功.png
注:
第十步,会问我们选择哪种渲染方式,这里一定要选择 Universal(通用的、普遍的)。spa 是单页面应用,这种模式下,文件不会 ssr 渲染,所以 nuxt 就没有意义了。
// 如果想更改渲染方式,可以修改 nuxt.config.js 中的 mode 属性。
mode: 'Universal' // Universal 可以ssr;spa 不会ssr,是客户端渲染
目录结构
|-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build
|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript
|-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件
|-- layouts // 布局目录,用于组织应用的布局组件,页面的模板文件,不可更改。(相当于vue-cli中的public文件夹)
|-- middleware // 用于存放中间件
|-- pages // 用于存放写的视图页面,主要的工作区域,相当于vue-cli中的views文件夹
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放静态资源文件,比如图片,可通过根目录直接访问,不需要经过webpack编译
|-- store // 用于组织应用的Vuex 状态管理。
|-- .editorconfig // 开发工具格式配置
|-- .eslintrc.js // ESLint的配置文件,用于检查代码格式
|-- .gitignore // 配置git不上传的文件
|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置,已覆盖默认配置
|-- package-lock.json // npm自动生成,用于帮助package的统一性设置的,yarn也有相同的操作
|-- package-lock.json // npm自动生成,用于帮助package的统一性设置的,yarn也有相同的操作
|-- package.json // npm包管理配置文件