Nuxt2项目创建教程-兼具SEO与快速开发的前端框架实战

环境

幽络源这里使用的环境为 node-v18.12.1，主要用于支持Nuxt2项目。

几个常用的nodejs版本我这里分享下 https://pan.quark.cn/s/cd6846c693dc

创建步骤

1、初始化项目

以一个空目录作为前端项目目录，执行命令自动创建package.json文件

npm init -y

如图

67140488-624b-4aad-a48d-82d02531dc6f

修改package.json的Scriptts部分，如下

{
  "name": "front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安装Nuxt2

安装 Nuxt 2 和必要依赖，执行命令

npm install nuxt@2.18.1

如图

36fb1cad-0053-44e3-8eb2-6893c473ea56

3、创建配置和页面

在项目根目录下创建配置文件 nuxt.config.js

内容如下

export default {
    // 开启 SSR
    ssr: true,
    // 路由模式
    router: {
        mode: 'history'
      },
    // 构建配置
    build: {}
  }

在建立pages目录，并创建index.vue文件，内容如下

<template>
    <div>
      <h1>欢迎使用 Nuxt 2</h1>
      <p>项目已成功启动！</p>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomePage'
  }
  </script>

如图

dae86bd6-a37a-490e-8f04-534da29d443d