Nuxt.js项目安装和目录介绍

一 Nuxt.js环境初始化

1 解压

解压 guli_site

2 端口修改

项目默认3000端口启动，如果想要修改Nuxt.js的启动端口，则可以在package.json文件中添加如下配置

"config": {
  "nuxt": {
    "host": "127.0.0.1",
    "port": "3333"
  }
}

3 安装依赖

npm install

4 运行项目

npm run dev

二 页面布局结构

1 布局组件

页头和页尾提取出来，形成布局页

2 布局文件

layouts目录下default.vue，引用布局组件

<nuxt />：主内容占位符

3 首页面

pages/index.vue，默认使用layouts目录下default.vue布局文件

index.vue中的页面内容会被自动嵌入到模板文件的 <nuxt/> 的位置