1、安装
npx create-nuxt-app安装nuxt框架，中途会出现很多选项，包括：项目名字、语言、UI框架等等，下面是我的全部选择：
- 等待一段时间就可以安装成功，输入
cd shopk进入文件夹，npm run start启动项目，不过启动的时候出现了错误，提示输入npm run build，再次启动就没问题了。
2、修改配置
2.1、目录结构
- 这是创建项目后的基础目录结构，以及每个文件夹对应的功能
2.2、修改端口配置
- 在package.json文件中进行配置，添加一个名为config对象进行配置，再次重启项目会发现端口由3000变为8080
"config":{
"nuxt":{
"host":"127.0.0.1",
"port":8080
}
}
2.3、配置全局样式
- 打开nuxt.config.js文件可以看到css配置项，这个就是全局css配置，因为当时选择了ant-design-vue组件，所以这里已经默认生成好了一个。也可以修改成自己的目录
css: [
'ant-design-vue/dist/antd.css'
],
3、路由
3.1、介绍
- nuxtjs框架的路由是根据pages下面的目录结构默认配置好的，具体配置规则可以查看.nuxt目录下面的router.js、route.json
3.2、示例
- 在pages目录下创建home文件夹，在home文件夹中创建index.vue文件
<template>
<div>
<nuxt-link to="/">首页</nuxt-link>
</div>
</template>
- 在浏览器中输入
http://localhost:8080/home可以看到路由已经生效
3.3、动态路由
- 创建名为goods的文件夹，然后在goods文件夹中创建index.vue
<template>
<div>
<ul>
<li>
<nuxt-link to="/goods/123">商品1</nuxt-link>
</li>
<li>
<nuxt-link to="/goods/234">商品2</nuxt-link>
</li>
</ul>
</div>
</template>
- 创建动态模板文件，动态路由模板的命名规则：下划线+id
<template>
<div>
<div>{{$route.params.id}}</div>
<nuxt-link to="/goods">返回列表页</nuxt-link>
</div>
</template>
- 进入
http://localhost:8080/goods/，点击商品链接测试没有问题
4、路由切换效果
4.1、css样式
- 在assets文件夹中创建page_change.css，然后编写样式
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
4.2、配置全局样式
- 步骤跟上面2.3是一样的，配置完刷新页面，切换页面的时候就能看到具体效果
转播
