nuxt3学习记录-安装

2,462 阅读1分钟

简介

nuxt3是一款基于Vue3的混合开发框架。

安装与使用

创建项目

打开内置终端并输入下面命令创建一个nuxt项目:

npx nuxi init nuxt3-app

执行上述命令很快的就出现第一个坑了could not fetch remote https://github.com/nuxt/starter ,大概的意思就是用于网络原因未能从github中拉取项目

4b31cd189c5624cd97e6c0b8a0a3085.png

通过多次执行命令,最终还是成功拉取代码

0799137c9e4505738f0c61265c5bda2.png

安装依赖

根据提示cd nuxt3-app 进入项目命令,执行npm i安装依赖,还是报错未能成功,应该还是网络原因

89e07a28673c4b963452d4634ef0262.png

于是跟换yarn包管理工具,执行yarn install 安装依赖

9d00081e6e8bd5752f0de6863309f7c.png

依赖成功的安装完成

51a8b9f4270cab04a0f578921e176aa.png

启动项目

安装好依赖打卡package.json文件,查看开发模式的启动命令(一般是dev或者start

af725c5b23dbe8ed4193c8a5d15d5e9.png

执行yarn run dev命令,启动项目

51106d8c8afa3e8f620b66c2ee83200.png

打开浏览器http://localhost:3000

当看到此页面时,说明已经启动成功

26128d14fb4f863a3289966ca2fb7da.png

落地页

下面使用以下代码简单修改以下落地页

<template>
    <div>
        <h1>nuxt3 app</h1>
    </div>
</template>

查看页面效果 ca8f3b3ddf88a5bc34a5be49cfe551a.png

使用pages

创建一个pages文件夹以及index.vue文件

<template>
    <div>
        index page
    </div>
</template>

ca8f3b3ddf88a5bc34a5be49cfe551a.png