1、安装

确保安装了npx

```npx create-nuxt-app <项目名>

或者使用yarn

```yarn create nuxt-app <项目名>

进行选择

在集成的服务器端框架之间进行选择:

None (Nuxt 默认服务器)
Express
Koa
Hapi
Feathers
Micro
Fastify
Adonis (WIP)

选择您喜欢的 UI 框架:

选择您喜欢的测试框架:

None (随意添加一个)
Jest
AVA

选择你想要的 Nuxt 模式 (Universal or SPA)
添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
添加 EsLint 以在保存时代码规范和错误检查您的代码我选择的bootstrap Vue

2.路由

路由可以自动生成

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
```

那么Nuxt.js中就会自动生成

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
```

3.运行项目

npm run dev

4.构建项目的头部和底部

默认布局

在根目录下新建layouts,里面新建default.vue

在pages中的页面可以默认展示

自定义布局

有的时候业务需求不同，可能会遇到，一个默认布局无法满足条件的情况下，可以使用自定义布局，在layouts新建blog.vue文件 blog.vue文件

```<template> 
<div> 
<h1>我是博客布局文件</h1>
<nuxt/> 
</div>
</template>
<script>
export default {
}; 
</script> 
<style>
</style>

在项目中，使用<nuxt/>中间内容，可以编译的内容，使用时

```<template>
<div> 这是博客布局的测试页面 </div>
</template>
<script> 
export default{
    layout: 'blog' }
</script> 
<style>
</style>

5.axios异步请求

安装axios，命令行

npm i @nuxtjs/axios -s

接口引用 import axios from axios

```async asyncData({ app, query }) {
    console.log('query',app.store.state.wordpressAPIForJob);
      let banner = await axios(`${app.store.state.wordpressAPIForJob}/index/banner`);
      let news = await axios(`${app.store.state.wordpressAPIForJob}/index/news`);
      console.log('news',news)
      return {
        swipper: banner.data,
        news: news.data
      }
  },

6.sass安装

如果要使用 sass 就必须要安装 node-sass和sass-loader 。

``````npm install --save-dev node-sass sass-loader

注：sass的版本号

从报错可以看出来，需要sass的版本号为7.0.1 npm install sass-loader@7.0.1 --save-dev npm install --save-dev node-sass

7.部署到服务器

引用： (www.jianshu.com/p/bbe874c32…)

nuxt项目打包

官网：nuxt官网(www.nuxtjs.cn/guide/modul…)

第一步，在本地

npm run build会在.nuxt文件夹下生成dist文件

第二步

把本地的文件的.nuxt,static,pagkage.json,nuxt.config.js,这四个文件夹放到服务器目录文件下。例如在服务器中建立的文件夹为/data/www/startWebFront路径下。

第三步

用cmd进入目录文件夹，安装依赖

npm install -production

第四步，运行

npm start

此时运行的是http://localhost:1818 目录以及项目文件夹

此时项目在服务器的本地已经可以访问，但是外部网路是无法访问的。这时Nginx就可以使用了。目的是通过域名访问到Nuxt服务，

Nginx

Nginx安装

Nginx 的安装步骤比较简单，安装在windows上推荐使用压缩包的安装方式，下载地址;（选择稳定版本）

安装之后，目录结构

双击nginx.exe就启动了，在页面输入localhost。出现如下界面则表示安装成功。默认监听80端口号

如果端口号被占用，需要改下端口号

修改Nginx安装目录/conf/nginx.conf中的serve配置

```#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    upstream nodenuxt {
            server 127.0.0.1:3000; # nuxt 项目监听PC端端口
            keepalive 64;
        }

    server {
        listen       81;
        server_name  www.wfaceboss.top;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
     proxy_pass http://nodenuxt;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ .php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ .php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

Nginx启动

Nginx目录下打开cmd命令窗口，启动Nginx

start nginx

其他命令

nginx -s reload//重新载入nginx
nginx -s quit //停止nginx
nginx -h //查看帮助信息

完成以下配置，当你打开浏览器的时候可以输入域名和端口号访问nuxt服务。注意：如果多次修改/conf/nginx.conf文件，后重启nginx,在window可能会出现多个nginx进程服务，需要结束这些进程，然后重启可以解决。通过上述服务可以实现用域名访问nuxt服务了，但关闭服务器上nuxt运行黑窗口时，服务就断了，我们不可能一直打开和盯着，这就需要PM2进行守护了。

PM2进程管理

`pm2`需要全局安装

npm install -g pm2

pm2启动nuxt项目

cd到项目目录启动

pm2 start /node_modules/nuxt/bin/nuxt.js --name 项目名称

或者

pm2 start npm --name startWebFront -- run start

或者 pm2 start npm --name "ninghao-nuxt" -- run start --watch 项目名称就是page.json中的名称

pm2其他命令

pm2 list
pm2 show 0                           #查看进程详细信息，0为PM2进程id 
pm2 stop all                         #停止PM2列表中所有的进程
pm2 stop 0                           #停止PM2列表中进程为0的进程
pm2 reload all                       #重载PM2列表中所有的进程
pm2 reload 0                         #重载PM2列表中进程为0的进程
pm2 delete 0                         #删除PM2列表中进程为0的进程
pm2 delete all                       #删除PM2列表中所有的进程

基本完成

nuxt.js bootstrapVue 官网