• 初始化項(xiàng)目

vue init nuxt/starter
yarn install 
yarn run start 

• 設(shè)置ip和端口號,在package.json中添加config

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

設(shè)置端口號.png

• 每個頁面設(shè)置不同的title和ico

  // 設(shè)置每個頁面的title 和ico,(每個頁面就是一個頁面，頁面都有head這個鉤子函數(shù)。)
  head() {
    return {
      title: "新聞頁面",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "Nuxt.js project" },
        { name: "renderer", content: "webkit" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon1.ico" }],
    };
  },

title和ico.png

• 樣式初始化（引入reset.css）

css: [
    '~assets/css/reset.css', 'element-ui/lib/theme-chalk/index.css'
  ],

在assets中創(chuàng)建css文件夾，在里面創(chuàng)建reset.css文件，然后在nuxt.config.js中引入。

樣式初始化.png

• 引入element-ui
  第一步： 安裝 yarn add element-ui --save
  第二步：在plugins文件夾中創(chuàng)建element.js，然后添加代碼，
  第三步：在nuxt.confing.js中引入文件，修改配置。
  第四步： 在vue組件中直接使用，ui的組件。

  
  
  代碼一.png

代碼2.png

• 設(shè)置默認(rèn)404頁面
  在layouts中添加error.vue文件就是默認(rèn)的404頁面或者500頁面。

  
  
  error.png
• 頁面的接口請求 asyncData
  asyncData優(yōu)先于所有的鉤子函數(shù)。

 // 服務(wù)端接口請求
  async asyncData() {
    // 如何在這里發(fā)送多個請求,數(shù)據(jù)返回出去就是直接綁定在this上
    //服務(wù)端渲染，接口統(tǒng)一在這里請求數(shù)據(jù)
    const siteConfigResult = await axios.post(
      "/navigation/rubik/detail",
      { rubikId: 5, type: 5 }
    );
    // console.log(siteConfigResult.data.result.randomData);
    let list = siteConfigResult.data.result.randomData;
    const postsResult = await axios.post(
      "/navigation/rubik/detail",
      { rubikId: 5, type: 5 }
    );
    // 對象解構(gòu)的形式
    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    const { bodyList } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    // console.log(bodyList);
    // console.log( bodyList );

    let list2 = postsResult.data.result.randomData;
    // 返回的數(shù)據(jù)直接綁定在this上
    return {
      list,
      list2,
      posts: data.slice(0, 5),
    };
  },

asyncData.png

• 打包靜態(tài)文件 yarn run generate,打包后會出現(xiàn)一個dist文件夾，給運(yùn)維發(fā)布即可。
  特別提示： “~”就相當(dāng)于定位到了項(xiàng)目跟目錄，這時候你的圖片路徑就不會出現(xiàn)錯誤，就算打包也是正常的。