nuxt.js 简单安装使用

本篇内容是我自己做记录用的，看官方文档总是会觉得缺点东西，所以自己写篇文章记录下，基本上就是在官方文档加上一些自己的理解，如果有不对的地方欢迎下方评论留言。

1.安装nuxt

官方文档给了两种安装方式：
1）脚手架工具 create-nuxt-app

npx create-nuxt-app <项目名>  （npx在NPM版本5.2.0默认安装了）
或
yarn create nuxt-app <项目名>

执行命令后会要求选择一些配置，对于新手来说不好去选择。这个需要就根据自己的需求选择（多百度），我也没有使用这一个方式全装，就不多做描述了（我执行npx create-nuxt-app时总是很慢，我的npm也很慢，通常用cnpm，所以后来就没选择这个）
2）从头开始新建项目
这个官方文档安装后只有基础的node_module、package.json文件和 .nuxt文件夹，后续部署没有描述，我在网上赵找了另一种安装方法：

 npm install -g vue-cli 
 vue init nuxt-community/starter-template 项目名称 

安装完成后，运行

npm run dev

在浏览器中输入 http://localhost:3000,就可以正常访问了

2.nuxt目录结构

nuxt目录
assets：资源目录 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
components ：组件目录 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。(就是在nuxt扩展的方法只能在页面组件pages 目录下使用)
layouts： 布局目录 用于组织应用的布局组件。(想要改变基础布局可以修改这里，也可以另外添加模板，只要在页面组件文件中使用layouts属性继承就可以)
middleware： 目录用于存放应用的中间件。（目前还没用过中间件）
pages：页面目录 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。（nuxt不需要配置路由，备注：params传参，需要根据你所传的参数去命名，如/index/:id/:name, 相对应的文件目录则为index/_id/_name.vue）
plugins：插件目录 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。（在nuxt.config.js中module.exports下配置plugins引入插件）
static：静态文件目录 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理
store：目录用于组织应用的 Vuex 状态树 文件。
nuxt.config.js：文件用于组织Nuxt.js 应用的个性化配置文件
package.json： 文件用于描述应用的依赖关系和对外暴露的脚本接口。

3.nuxt服务器部署

我这里是部署到nginx上，使用的是服务端部署（静态部署也试了一下没有仔细研究，动态路由需要在nuxt.config.jspeizhi ）。
1）现在本地打包项目

npm run build

2）把打包后的文件压缩上传到服务器中域名所指向的文件夹，执行：

npm i
npm run start

运行后应该就会是这样

3）使用pm2进程保证断开连接服务不会断掉

pm2 list  查看pm2进程列表
pm2 delete  进程名/id  删除进程
pm2 start npm --name "进程名" -- run start   启动进程

仅仅是这样还是不能直接加载网页，nginx还需要配置
4）配置nginx
nuxt运行在3000端口，nginx还需要做一些配置,因为我的项目中同一个域名中下有两个项目，静态资源需要分开加载。

upstream nuxtserver1 {
    server 127.0.0.1:3000;
}

server {
    listen 443 ssl;
    server_name  dk.pxmsw.cn;
    root         /data/web/dksc/wechat/user;
    ssl_certificate   cert/dk.pxmsw.cn/1977719_www.aa.cn.pem;
    ssl_certificate_key  cert/dk.pxmsw.cn/1977719_www.aa.cn.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location ~ /organization-wx/.*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp3|wma|js|css)$ {
        expires      3650d;
        access_log off;
    }
    location ~ /organization-wx/.*\.(eot|otf|ttf|woff|svg)$ {
        add_header Access-Control-Allow-Origin *;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp3|wma|js|css)$ {
        expires      3650d;
        access_log off;

        proxy_pass http://nuxtserver1;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }


    location ~ \.(eot|otf|ttf|woff|svg)$ {
        add_header Access-Control-Allow-Origin *;
        proxy_pass http://nuxtserver1;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        root         /data/web/dksc/wechat/user/wx-user;
        index  index.html index.htm;
        error_page  404  /index.html;

        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://nuxtserver1;
    }

    location /organization-wx/ {
        root         /data/web/dksc/wechat/user/organization-wx;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;

    }

   error_log  /var/log/nginx/error.log;
   access_log /var/log/nginx/access.log main;
}

仿照上面nginx配置后访问你的域名应该就可以正常访问了。

参考链接：
https://segmentfault.com/a/1190000012774650；
https://www.jianshu.com/p/840169ba92e6