一、安装:
1.1、运行安装命令:npx nuxi init nuxt-app
1.2、安装依赖: npm install
1.3、启动项目:npm run dev
二、在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默认就是首页)。
路由传参:新建vue文件名为[id].vue,并在页面获取id,
$route.params.id ,访问时直接通过其父文件夹访问并手动输入你想传的任何参数。
四、组件
新建文件夹components,并创建组件Alert.vue,在pages下的index.vue里面将组件Alert.vue当标签使用