NuxtJS 3

372 阅读1分钟
一、安装:

1.1、运行安装命令:npx nuxi init nuxt-app

1.2、安装依赖: npm install

1.3、启动项目:npm run dev

image.png

image.png

二、在nuxt.config.js中添加一些配置

import {resolve} from "path; export default defineNuxtConfig({alias:{"@": resolve(__dirname, "/"),},});

三、样式和路由

3.1、新建assets文件夹,在文件夹下新建main.scss,并运行npm install sass,并在nuxt.config.js中配置css, css:["~/assets/main.scss"],

3.2、路由:首先创建路由页面,新建pages,event.vue文件,然后在app.vue中创建路由视图器,通过"/vue文件名"就可以访问页面了(NuxtPage是nuxt3内置的标签,相当于vue3中的router-view,就是通过路由去渲染组件的内容。nuxt3不用手动配置路由,pages下的文件名就是路径名,会自动对应上,index默认就是首页)。

image.png

image.png

image.png 路由传参:新建vue文件名为[id].vue,并在页面获取id,$route.params.id ,访问时直接通过其父文件夹访问并手动输入你想传的任何参数。

image.png

四、组件

新建文件夹components,并创建组件Alert.vue,在pages下的index.vue里面将组件Alert.vue当标签使用

image.png