一 、首先创建nuxt3项目
1、npx nuxi init nuxt-app //nuxt-app 是我们的项目名称
2、yarn install
3、yarn dev or npm run dev如图：
创建nuxt3项目
二、运行效果
项目结构
运行效果
三、重构我们的项目结构
项目文件划分：
1、根目录创建assets文件存放我们的静态资源文件。例如：css、images、js
2、根目录创建components文件存放我们的组件
3、根目录创建layouts存放我们的整体布局文件。例如：头部、底部、主题body
4、根目录创建plugins存放我们的插件
5、根目录创建utils存放我们的自定义js 或 ts 文件
6、根目录创建pages文件存放我们的页面
如图：
修改后的文件结构
五、在layout中创建我们的布局组件，默认命名default.vue
我是头部
我是底部
六、pages新建首页入口文件index.vue
你好
七、修改app.vue根组件
//修改之前
注意：到目前为止我们的效果图如下：
效果图并未载入defalit.vue布局
只是显示了pages下index.vue的内容 - 你好，此时我们就需要改动我们的index.vue内容。如下：最外层包裹
你好
此时：我们的布局组件加载完毕，运行效果如下：
最终运行效果
目前为止，我们的整体项目搭建已经构建完毕，接下来我们需要引入我们的UI组件ElemeentPlus,帮助我们快速开发我们的项目，提高开发效率。
我们下次见来引入UI组件并配置黑暗模式
| 留言与评论（共有 0 条评论） “” |
