NUXT
我们进入正题说下 NUXT
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR
安装流程
Nuxt.js 团队提供了 vue-cli 的初始化模板。前提安装 vue-cli，安装过的忽略此步
npm install -g vue-cli
完成后在需要创建的目录下执行以下
vue init nuxt/starter <project-name>
cd <project-name>
npm install依赖安装完成后
npm run dev打开浏览器 http://localhost:3000
说明：Nuxt.js 会监听
pages 目录下的改变，添加新 page 的时候不需要重启服务目录结构
完成上面命令后你的目录结构会如下
Nuxt.js 给出了最简单的目录结构
|-- pages
|-- index.vue
|-- package.json也就是说，至少需要一个 page 来作为展示页。
文件的路径建议都采用绝对路径，表格如下
例：怎么在
/pages/user/me.vue 引入一个
static 文件夹里的图片
<img src="~static/img/logo.png" alt="Logo"/>路由
Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构
例1:
|-- pages
|-- posts
|-- index.vue
|-- welcome.vue
|-- about.vue
|-- index.vue会生成
routes: [
{
path: '/posts',
component: '~pages/posts/index.vue'
}, {
path: '/posts/welcome',
component: '~pages/posts/welcome.vue'
}, {
path: '/about',
component: '~pages/about.vue'
}, {
path: '/',
component: '~pages/index.vue'
}
]例2:隐藏路由
在文件名前加
_
|-- pages
|-- _about.vue
|-- index.vue会生成
routes: [
{
path: '/',
component: '~pages/index.vue'
