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