Vue SSR 项目 Nuxt.js 框架之《安装与创建》

Nuxt.js 是一个基于 Vue.js 的通用应用框架，预设了利用 Vue.js 开发 服务端渲蚂顷袭染 的应用所需要的各种配置。可以更方便的实现 Vue 项目的 SSR 。具体的可详见 官网 ，这里不再过多赘述。

方法一：

方法二：

出现上图即可按照提示， cd 到我们的文乎派件夹，然后运行命令启动项目，启动成功后如下图

assets ：资源目录，用于组织未编译的静态资源如闷兄 LESS 、 SASS 或 JavaScript 。

components ：组件目录，用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

layouts ：布局目录，用于组织应用的布局组件。

middleware ：中间件目录，用于存放应用的中间件。

pages 页面目录，用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

plugins ：插件目录，用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

static ：静态文件目录，用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，即 /static/robots.txt 映射至 /robots.txt

store ：状态管理目录，用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

nuxt.config.js ：用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

package.json ：用于描述应用的依赖关系和对外暴露的脚本接口。

更多介绍详见 官网-目录结构

参考文章旁差链接 ：

next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序 - 每天一探 - SegmentFault 思否

1.安装NGINX

2.node

3.npm

4.pm2

5.将完成好的nuxt项目打包（npm run build）

 雀伏       .nuxt

        static(可以不传)

        nuxt.config.js

        package.json

上传到服务器对应的文件夹下

运行npm install 安装package里的依赖

运行npm start 就可以运行起来nuxt的服务渲染了

6.配置NGINX 

    #nuxt config

    upstream nodenuxt {

        server 127.0.0.1:3000#nuxt

        keepalive 64

    }

    server {

        listen 3001

        server_name  ****

        location / {

            proxy_http_version 1.1

           运岁皮 proxy_set_header Upgrade $http_upgrade

            proxy_set_header Connection "upgrade"

            proxy_set_header Host $host

            proxy_set_header X-Nginx-Proxy true

            proxy_cache_bypass $http_upgrade

            proxy_pass http://nodenuxt#

        }

  }

7.开启守护进程

---