简介
本章将介绍如何使用 Nuxt.js 创建一个功能完善的个人简历网站。我们将涵盖从项目初始化到部署的全过程，包括页面结构、样式设计、交互功能等各个方面。通过本章的学习，你将能够掌握如何利用 Nuxt.js 来构建一个专业的个人简历网站。
项目初始化
安装 Node.js 和 Vue CLI
在开始之前，请确保你的机器上已经安装了 Node.js。Node.js 包含了 npm（Node 包管理器），我们可以使用它来安装 Vue CLI（Vue 命令行工具）。
# 安装 Vue CLI npm install -g @vue/cli
创建 Nuxt.js 项目
使用 Vue CLI 创建一个新的 Nuxt.js 项目非常简单。打开终端，运行以下命令：
# 创建一个新的 Nuxt.js 项目 vue create resume-website --preset nuxt-community/starter-template
项目结构
创建完成后，你将看到如下所示的文件和目录结构：
-- -------------------- ---- ------- --------------- --- ------- - ---- - --- ---- - --- -- - --- ------ - ---- --- ----------- - ----- --- -------- - ---- --- ----------- - --- --- ------ - -- --- -------- - -- --- ------- - ---- --- ------ - ---- -- --- ------ - ------ --- -------------- - ------- ---- --- ------------ - ------
页面设计
主页
主页是用户访问网站时首先看到的页面。我们将在这个页面中展示个人信息、技能、工作经验等。
添加个人简介
在 pages/index.vue 文件中，添加以下代码：
-- -------------------- ---- -------
----------
---- -------------
-------- ----------- ------------
---- ------------------
---- ------------------
--- --------------------------
--- -----------------------------
------
------
----------
-------- ----------------
---- ------------------
---- ----------------
-----------------
------
------
----------
------
-----------
------ -------
----- -
-------------- -----
-
-------- - -
---------- -------
------------ ----
-
--------技能页面
接下来，我们创建一个技能页面，用于展示您的专业技能。
创建技能页面文件
在 pages/skills.vue 文件中，添加以下代码：
-- -------------------- ---- -------
----------
---- ---------------
-------- ----------------
---- ------------------
--- -----------------------
---- ----------------
---- ------------- --------------
---- ------------
--- ------------------------------
--------- --------------- ----------- ---------- ------------------------
------
------
---- ------------- --------------
---- ------------
--- --------------------------------
--------- --------------- ----------- ---------- ------------------------
------
------
---- ------------- --------------
---- ------------
--- ----------------------------
--------- --------------- ----------- ---------- ------------------------
------
------
------
------
----------
------
-----------
------ -------
---- -
-------- -----
-
--------- -
---------- -------
-------------- -------
-
--------工作经验页面
接下来，我们创建一个工作经验页面，用于展示您的工作经历。
创建工作经验页面文件
在 pages/experience.vue 文件中，添加以下代码：
-- -------------------- ---- -------
----------
---- -------------------
-------- ----------------
---- ------------------
--- -------------------------
---- -----------------
---- ----------------------
---- ---------------------- ------------------
---- -------------------------
--- --------------------------
--- -------------------- -- - ---- - - - -------
------------------ ------ - ------- --------
------
------
---- ----------------------
---- ---------------------- ------------------
---- -------------------------
--- ----------------------
--- -------------------- -- - ---- - - - - ---- - - ------
----------------------------------
------
------
------
------
----------
------
-----------
------ -------
--------- -
---------------- -----
------------- --
-
-------------- -
-------------- -----
-
----------------- -
-------- -----
----------------- --------
-------------- -------
-
----------------- -- -
----------- --
-
--------样式设计
引入第三方样式库
为了使我们的网站看起来更加美观，我们将引入一些流行的 CSS 框架，如 Bulma 或 Tailwind CSS。
安装 Bulma
使用 npm 安装 Bulma：
npm install bulma
引入 Bulma
在 assets/css/main.css 文件中，添加以下代码：
-- -------------------- ---- ------- ------- --------------------------- ---- - ------------ --------- ----------- - ----- - ----------------- -------- ------ ------ - ------- --------- - ----------- ------- -
在 nuxt.config.js 文件中，添加以下配置以引入自定义样式：
export default {
css: [
'@/assets/css/main.css'
]
}路由配置
Nuxt.js 提供了自动路由功能，你只需要按照约定的文件夹结构创建相应的 .vue 文件即可。例如，我们在 pages 文件夹下创建了一个 index.vue 文件，Nuxt.js 就会自动为这个页面生成一个根路径的路由。
如果你需要更复杂的路由配置，可以在 nuxt.config.js 文件中手动配置路由规则。例如：
-- -------------------- ---- -------
------ ------- -
------- -
-------------------- -------- -
-------------
----- ---------
----- ----------
---------- ------------------ ------------------
--
-
-
-交互功能
添加联系表单
为了方便用户联系您，我们将在网站底部添加一个简单的联系表单。
创建联系表单组件
在 components/ContactForm.vue 文件中，添加以下代码：
-- -------------------- ---- -------
----------
----- -------------------------------
---- --------------
------ ------------------------
---- ----------------
------ ------------- ----------- -------------- --------------------- ---------
------
------
---- --------------
------ ------------------------
---- ----------------
------ ------------- ------------ --------------- --------------------- ---------
------
------
---- --------------
------ ------------------------
---- ----------------
--------- ---------------- ----------------- --------------------- --------------------
------
------
---- --------------
---- ----------------
------- ------------- -------------------------
------
------
-------
-----------
--------
------ ------- -
------ -
------ -
----- ---
------ ---
-------- --
-
--
-------- -
-------------- -
-- -----------
----------------
--------- - --
---------- - --
------------ - --
-
-
-
---------
------ -------
------ -
-------------- -----
-
------- -
------ -----
-
--------在主页中使用联系表单组件
在 pages/index.vue 文件中，添加以下代码：
-- -------------------- ---- -------
----------
---- -------------
---- --- ---- --- ---
-------- ----------------
---- ------------------
--- -----------------------
------------- --
------
----------
------
-----------
--------
------ ----------- ---- ------------------------------
------ ------- -
----------- -
-----------
-
-
---------部署
使用 Netlify 部署
Netlify 是一个强大的静态站点托管平台，支持自动部署。以下是使用 Netlify 部署的步骤：
- 注册并登录 Netlify 账户。
- 在 Netlify 控制台中点击 "New site from Git"。
- 选择你的代码仓库（例如 GitHub）。
- 按照向导完成部署设置。对于 Nuxt.js 项目，通常选择 "Use settings from _redirects or netlify.toml" 作为构建命令。
- 点击 "Deploy site" 开始部署。
使用 Vercel 部署
Vercel 是另一个流行的静态站点托管平台，同样支持自动部署。以下是使用 Vercel 部署的步骤：
- 注册并登录 Vercel 账户。
- 在 Vercel 控制台中点击 "Import project"。
- 选择你的代码仓库（例如 GitHub）。
- 按照向导完成部署设置。对于 Nuxt.js 项目，通常选择 "Next.js" 作为框架类型，并填写相应的构建命令。
- 点击 "Deploy" 开始部署。
通过以上步骤，你就可以成功地使用 Nuxt.js 创建一个功能完善的个人简历网站，并将其部署到互联网上。希望你在本章的学习中有所收获，祝你创作出令人印象深刻的个人简历网站！