Nuxt.js打造旅游网站第1篇_项目环境搭建

1. 安装

使用官网提供的脚手架工具 create-nuxt-app，建立一个nuxtjs项目。

npx create-nuxt-app xianyun

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

 

须要等待片刻安装依赖的下载，下载完成后能够看到下面的提示框，要求输入项目名称。

UI框架咱们选择通用的Element-ui。

 

这里和接下来的提示都不须要输入任何内容，回车便可，直到要求选择服务器端框架。

 

服务器端框架选择none，表明使用Nuxt的默认服务器。

接下来咱们来选择安装一下额外的功能包，选择安装Axios（要按下空格键选中），继续回车下一步

功能说明：

• 添加 axios 以轻松地将HTTP请求发送到您的应用程序中。

 接下来的提示中统一回车选择默认便可。

 

2. 启动

 当运行完时，项目将安装全部依赖项，所以下一步是启动项目:

cd xianyun
npm run dev

 

注意：此时运行项目可能会遇到如下错误提示`HTMLElement is not define nuxt.js`，缘由是在`Nuxtjs`的服务器环境加载`Element-ui`遇到兼容问题抛出的错误，（如不报错则表示bug已修复），解决办法以下：

下载指定版本的`element-ui`

npm install --save element-ui@2.4.11

 

项目初始化就完成了。

 

3. 基本配置

修改删除默认文件。

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

修改以下：

1.首先是page/index.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

2.components/logo.vue文件

如今访问首页http://localhost:3000/就能看到'首页两个字了。

 

3.建立页面目录

接下来建立项目结构目录，方便之后的项目模块扩展。

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

若是你已经新增了上面的文件，咱们能够直接经过路由访问pages下的页面，查看页面是否新增成功。好比咱们修改post/index.vue内容以下：

<template>
    <div>
        旅游攻略首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

在浏览器中访问地址http://localhost:3000/post，页面显示以下：

顺便给air/index.vue, hotel/index.vue也新增上面的内容吧，不过须要修改下文字方便区分页面。

Nuxtjs的页面访问规则和浏览器的SPA机制不一样，在Nuxtjs中不须要路由配置，pages下的页面能够直接经过路径访问，默认查找index.vue.

 

4.建立组件目录

 

虽然如今还没开始开发页面，可是咱们能够预测将来的页面中确定存在不少能够独立封装的组件，因此咱们如今能够给将来的组件新建存放目录.

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

 

- ...             // 其余文件

- components    // 存放公共组件的文件夹
    - post        // 存放旅游攻略模块组件的文件夹
    - air        // 存放机票模块组件的文件夹
    - hotel        // 存放酒店模块组件的文件夹
    - user        // 存放用户模块组件的文件夹
    
- ...             // 其余文件

 

5.修改配置

页面过渡效果样式

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

在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配置文件中加载该文件才能生效。

 

修改配置文件

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

复制下面配置替换项目的nuxt.config.js文件，若是想手动修改的话能够查看中文注释行(#10 #18 #32 #56)

 

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

添加less

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

 

npm install --save less less-loader 

 

Nuxt和普通的Vue

 

1. Nuxt是同构程序，这里的同构指的是一套代码，能够在浏览器运行，也能够在服务器（Nodejs）运行，也就是说能够同时使用浏览器的API和Nodejs的API。

2. 普通的Vue页面只能使用浏览器的API，即便在Nodejs环境下开发也只是使用Webpack来编译打包。

3. Nuxt是先后端框架的集合，前端采用Vue，后端可选框架有Express、hapi等，因此能够理解为Vue是一个页面模板的存在，相似于art-template

4. Nuxt支持单页和多页应用。

注意：虽然Nuxt确实很强大，可是目前市面上应用的却不是不少，由于nodejs做为服务器端语言目前仍是相对较少的，更多的仍是java，php等，因此咱们会把精力集中在的功能业务开发上，以及一些Vue未接触过的用法。

项目地址：https://github.com/replaceroot/xianyun