nuxt.js项目入门配置篇

初始化项目

vue init nuxt/starter
yarn install 
yarn run start

设置ip和端口号,在package.json中添加config

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

设置端口号.png

每个页面设置不同的title和ico

  // 设置每个页面的title 和ico,(每个页面就是一个页面，页面都有head这个钩子函数。)
  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中创建css文件夹，在里面创建reset.css文件，然后在nuxt.config.js中引入。

样式初始化.png

引入element-ui
第一步：安装 yarn add element-ui --save
第二步：在plugins文件夹中创建element.js，然后添加代码，
第三步：在nuxt.confing.js中引入文件，修改配置。
第四步：在vue组件中直接使用，ui的组件。

代码一.png

代码2.png

设置默认404页面
在layouts中添加error.vue文件就是默认的404页面或者500页面。

error.png
页面的接口请求 asyncData
asyncData优先于所有的钩子函数。

 // 服务端接口请求
  async asyncData() {
    // 如何在这里发送多个请求,数据返回出去就是直接绑定在this上
    //服务端渲染，接口统一在这里请求数据
    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 }
    );
    // 对象解构的形式
    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;
    // 返回的数据直接绑定在this上
    return {
      list,
      list2,
      posts: data.slice(0, 5),
    };
  },

asyncData.png

打包静态文件 yarn run generate,打包后会出现一个dist文件夹，给运维发布即可。
特别提示： “~”就相当于定位到了项目跟目录，这时候你的图片路径就不会出现错误，就算打包也是正常的。

最后编辑于：2020.09.09 11:18:52