Nuxt 开发笔记 - （1）快速入门

前排提示：

• 操作系统：Windows 10
• 编辑器：HBuilder X

小声嘟囔：先去看官方文档，链接在下面。

介绍

简介：NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个 开源 的框架，让 web 开发变得简单而强大。

官网：Nuxt 官网（最新版本2.14.8），Nuxt 中文网（最新版本 2.14.5）

安装

详细安装步骤请见：Nuxt 中文网学习指南（Nuxt 官网没有安装时配置的选择说明，或许是我没找到）。

下面只是我的使用方式，仅供参考。

1. 打开终端

   # 安装$ yarn create nuxt-app <项目名称># 一路回车之后（配置均选：默认）# 运行$ cd <项目名称>
   $ yarn dev# 应用现在运行在 http://localhost:3000 上运行# 端口冲突情况下会自动修改端口复制代码

2. 安装截图

   

国际化

有 nuxt-i8n 和 vue-i18n 可供选择。

我选择 nuxt-i8n ，官网文档只有英文的，看不懂可以安装浏览器插件 沙拉查词（内置彩云小译，用了都说好）。

下面只是我的使用方式，仅供参考。

1. 打开终端

   # 安装$ yarn add nuxt-i18n复制代码

2. 修改根目录中的 nuxt.config.js 文件

   modules: ["nuxt-i18n"],    
   i18n: {  locales: ["en", "zh"],  defaultLocale: "zh",  vueI18n: {fallbackLocale: "zh",messages: {      zh: {lang: "zh",switch: "EN",links: {          index: "首页",          about: "简介",          news: "新闻"}
         },      en: {lang: "en",switch: "中",links: {          index: "HOME",          about: "ABOUT",          news: "NEWS"}
         }
       }
     },
   },复制代码

3. 在 pages 文件夹中新建 about 和 blog  路由对应的页面

   <template>
     <div>
       <p>随便写点什么</p>
     </div>
   </template>
       
   <script>
     export default {}
   </script>
       
   <style>
   </style>复制代码

4. 在 components 文件夹中创建 Header 组件

   <template>
     <nav>
       <!-- logo -->
       <nuxt-link :to="localePath('index', $i18n.locale)">
         <Logo />
       </nuxt-link>
       <!-- index -->
       <nuxt-link :to="localePath('index', $i18n.locale)">
         {{ $t("links.index") }}
       </nuxt-link>
       <!-- about -->
       <nuxt-link :to="localePath('about', $i18n.locale)">
         {{ $t("links.about") }}
       </nuxt-link>
       <!-- news -->
       <nuxt-link :to="localePath('news', $i18n.locale)">
         {{ $t("links.news") }}
       </nuxt-link>
       <!-- switch btn -->
       <nuxt-link class="nav-link" v-if="$i18n.locale !== 'zh'" :to="switchLocalePath('zh')">
         {{ $t("switch") }}
       </nuxt-link>
       <nuxt-link class="nav-link" v-if="$i18n.locale !== 'en'" :to="switchLocalePath('en')">
         {{ $t("switch") }}
       </nuxt-link>
     </nav>
   </template>
       
   <style>
     nav {
       padding: 1rem 5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border: 0.0625rem solid #000000;
     }
       
     nav .NuxtLogo {
       width: 2rem;
       height: 2rem;
     }
   </style>    
   复制代码

5. 在 layouts 文件夹中的 default.vue  使用 Header 组件（并非限定只能在该文件中使用）

   <template>
     <div>
       <Header />
       <Nuxt />
     </div>
   </template>
       
   <script>
     import Header from "@/components/Header"
     export default {}
   </script>
       
   <style>
   </style>    
   复制代码

6. 最后看一下效果

   

   

7. 更多配置查看 nuxt-i8n 官方文档

部署

Nuxt 是基于 Node.js  运行的，这里默认服务器已经安装 Node.js。

1. 打包项目

   $ yarn build    
   # 打包完成后可运行改命令，检查打包后项目运行是否正常$ yarn start复制代码

2. 把项目文件的.nuxt，static，package.json，nuxt.config.js,这四个文件夹放到服务器项目的根目录中

   

3. 在安装依赖

   $ yarn install    
   # 运行$ yarn dev    
   # 应用现在运行在 http://localhost:3000 上运行# 端口冲突情况下会自动修改端口复制代码

4. 配置域名实现外部网络访问

   后端的大哥帮我配置在 Apache 上了，大多数教程采用 Nginx，可以自行搜索。

   你会发现关闭服务器终端后，服务就断了。

5. PM2 进程守护

   详细请见：PM2 官网

   # 安装$ yarn global add pm2    
   # 要在项目目录下启动cd 项目名称    
   复制代码

   启动

    $ pm2 start npm --name "项目名称" -- run build复制代码

   成功后的截图

   

   常用命令

    $ 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 列表中所有的进程复制代码

   官方还提供可视化监控的工具 Monitor PM2， 可以自行注册使用