这是我参与「第四届青训营 」笔记创作活动的第7天 这两天正在对项目的框架进行适用，以前些项目的时候用过nuxt，最大的感觉是路由的方式和vue不同，今天又把nuxt的官网看了一些，进行了初步框架的搭建。下面是搭建时记录的一些笔记。包括了路由和安装的一些内容
NUXT JS
安装
Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。
运行 create-nuxt-app
nuxt 也有相似于 vuecli的脚手架工具
在确保安装了npx （npx在 NPM 版本5.2.0 默认安装了）：
npx create-nuxt-app <项目名>
或者用 yarn：
yarn create nuxt-app <项目名>
创建后会有内容的选择：
集成服务器端框架之间选择
- None (nuxt默认服务器）
- Express
- Koa
- Hapi
- Feathers
- Micro
- Fastify
- Adonis（WIP）
ui框架
- None
- Bootstrap
- Vuuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- iView
- Tachyons
测试框架
- None
- Jest
- AVA
Nuxt 模式 （ University or SPA ）
axios module
Eslint
Prettir 保存时美化代码
然后运行代码：
cd <project-name>
npm run dev
目录结构
配置
路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置
在页面之间使用路由，建议使用 <nuxt-link> 标签
基础路由
一级路由:
当我们在pages目录下如此定义
则 nuxt 自动生成如下路由
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'goods',
path: '/goods',
component: 'pages/goods.vue'
},
{
name: 'login',
path: '/login',
component: 'pages/login.vue'
},
{
name: 'reg',
path: '/reg',
component: 'pages/reg.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user.vue'
},
]
}
当我们设置路径专挑时：
显示如图：
多级路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置
pages 目录下的每层文件夹代表一个路由层级
如图： pages 目录下有 goods index login reg user 等.vue页面 和goods文件夹
goods文件夹下又有 comment 文件夹 ，comment.vue 和_id.vue
comment文件夹下有 _uid.vue 文件
代表着:goods index login reg user 的.vue 为一级目录 存在二级目录goods 存在三级目录 comment
一级目录如图
二级目录如图
三级目录如图
\
