js在服务器创建文件夹,Nuxt.js创建项目文件夹

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包管理配置文件