1.初始化项目

• nuxtjs项目跟vue cli脚手架类似，封装的东西会更加多一些
• Nuxt.js 预设了利用Vue.js 开发服务端渲染的应用所需要的各种配置

安装

• 切换到存放项目的路径,
• 打开cmd，
• 使用官网提供的脚手架工具 create-nuxt-app，创建一个nuxt.js项目

npx create-nuxt-app 项目名

注意：在NPM版本5.2.0默认安装了npx，在命令行窗口输入npm--version可查看当前版本号

按照以下的步骤，根据你自己对项目的需要进行选择

以下是我的最终选项，然后自动开始安装

需要等待安装依赖的下载，下载完成后可以看到下面的提示框，要求输入项目名称和其他一些问题

启动

当运行完时，项目将安装所有的依赖项，因此下一步是启动项目：

cd xianyun

npm run dev

可自愿选择 Y/n

• 启动会弹出提示打开 http://localhost:3000/
• 如果出现404，可以使用 http://127.0.0.1:3000/ 替换

此时页面出现：

注意：此时项目可能会遇到以下错误提示：

,原因是在Nuxt.js的服务器环境加载 Element-ui 遇到兼容问题抛出的错误，（如不报错表示bug已修复，不用管这一步），解决办法如下：

下载指定版本的 element-ui

npm install --save element-ui@2.4.11

到这里项目的初始化就已经完成了

2.项目演示

数据服务运行步骤

• 在服务器文件目录内运行

npm install --node-sqlite3_binary_host_mirror=npm.taobao.org/mirrors/

• 启动服务器

npm run start

• 如果数据库运行失败

后台服务器已经将数据库内嵌，通常会自动安装，遇到过某些机器，会缺失数据库安装，有提示让你补上

出现上图的报错，可以运行

npm install sqlite3 --save --node-sqlite3_binary_host_mirror=npm.taobao.org/mirrors/

3.项目文件结构

文件结构

官网文档： zh.nuxtjs.org/guide/direc…

别名说明

默认情况下，src目录和根目录相同

注意：在您的 vue 模板中，如果您需要引入 assets 或者 static 目录，使用 ~/assets/your_image.png 和 ~/static/your_image.png 方式

4. 基本配置

4.1 修改/删除默认文件

Nuxtjs初始化项目时给我们提供了两个演示文件，对我们接下来的项目开发没任何作用，分别是pages/index.vue和components/logo.vue。

修改如下：

1.首先是pages/index.vue

2.删除components/logo.vue文件

现在访问首页http://localhost:3000/，就只能看到首页两个字了。

4.2 创建页面目录

在nuxt框架当中，不需要配置路由，只要你在pages文件夹下创建文件夹或者文件就能够自动生成路由

接下来可以创建项目结构目录，方便以后的项目模块扩展

在pages目录下新建文件夹，文件夹分别对应接下来要开发的业务模块

• ... // 其他文件

• pages

• index.vue // 已存在的首页文件

• post // 存放旅游攻略模块的文件夹

• index.vue // 旅游攻略模块首页文件

• air // 存放机票模块的文件夹

• index.vue // 机票模块首页文件

• hotel // 存放酒店模块的文件夹

• index.vue // 酒店模块首页文件

• user // 存放用户模块的文件夹

• login.vue // 用户登录注册页面

• ... // 其他文件

接下来就可以直接通过路由访问pages下的页面，查看页面是否新增成功。

例如：http://localhost:3000/post/index.vue ，便可看到旅游攻略模块首页

Nuxtjs的页面访问规则和浏览器的SPA机制不同，在Nuxtjs中不需要路由配置，pages下的页面可以直接通过路径访问，默认查找index.vue

4.3 创建组件目录

可以给未来的组件新建存放目录

在components 文件夹中新建文件夹：

• ... // 其他文件

• components // 存放公共组件的文件夹

• post // 存放旅游攻略模块组件的文件夹

• air // 存放机票模块组件的文件夹

• hotel // 存放酒店模块组件的文件夹

• user // 存放用户模块组件的文件夹

• ... // 其他文件

5.修改配置

5.1 举例：页面过渡效果样式（可选）

目前还没涉及到页面的跳转，但不妨碍给项目配置预先做好铺垫，这份配置只是为了页面切换时优化用户体验设计的，并不是必须的。

在assets/目录下创建这个文件夹 assets/main.css，添加以下样式

/* 页面切换时候过渡样式 */.page-enter-active, .page-leave-active {    transition: opacity .5s;} /* 打开时候过渡样式 */.page-enter, .page-leave-active {    opacity: 0;} /* 页面顶部页面加载进度条 */.nuxt-progress{    background:#409eff;    height: 1px;}

只是新建了样式文件还不能产生效果，需要在nuxt.config.js 配置文件中加载该文件才能生效

5.2 修改nuxt.config.js 配置文件

• webpack 配置都在 webpack.config.js
• vue-cli 配置在 vue.config.js
• nuxt 的配置全部都在 nuxt.config.js

配置文件nuxt.config.js对项目进行了全局配置，对每个页面都生效。

import pkg from './package' export default {  mode: 'universal',   /*  ** Headers of the page  */  head: {    title: "网页标题名", // 修改title    meta: [      { charset: 'utf-8' },      { name: 'viewport', content: 'width=device-width, initial-scale=1' },      { hid: 'description', name: 'description', content: pkg.description }    ],    link: [      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },      { rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式    ]  },   /*  ** Customize the progress-bar color  */  loading: { color: '#fff' },   /*  ** Global CSS  */  css: [    'element-ui/lib/theme-chalk/index.css',    'assets/main.css' // 新增自定义的页面过渡样式（文件来自3.4.1）  ],   /*  ** Plugins to load before mounting the App  */  plugins: [    '@/plugins/element-ui'  ],   /*  ** Nuxt.js modules  */  modules: [    // https://axios.nuxtjs.org/setup    '@nuxtjs/axios'  ],   /*  ** Axios module configuration  */  axios: {    // See https://github.com/nuxt-community/axios-module#options    // baseURL: "http://157.122.54.189:9095" // 新增备用地址    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		    },   /*  ** Build configuration  */  build: {    transpile: [/^element-ui/],     /*    ** You can extend webpack config here    */    extend(config, ctx) {    }  },}

注意：修改nuxt.config.js记得要重启项目（比较保险）

5.3 添加less

预编译样式我们选择less，相关配置nuxtjs已经帮我们配置好了，不需要改动webpack的配置文件，只需要安装依赖包即可

npm install --save less less-loader

到这 一个nuxt.js已经搭建完毕，接下来就可以开始进行你的业务功能了。