首页 - mingliao/nuxt_elm GitHub Wiki

摘要

nuxt使用route，将page目录作为路由项目的配置，使用资源管理的方式作为路由配置。

引入文件方式，使用alias简化引入方式

头部导航使用插槽slot分发内容

系统默认需要执行一些脚本，比如rem.js，通过build方式将这些文件导入到vendor.js中，保证全局使用，减小打包量。

环境变量配置，根据不同的环境配置不同的请求地址。

一些好的api请求写法

页面效果图

页面重定向

使用nuxt page下的index.vue就是系统默认的首页，而我们线上的首页使用rest风格，将线上首页 使用/home作为首页，所以，我们可以有两种方式可以处理

  • 使用nuxt的配置，将/page/index作为项目首页
  • 使用方法，将页面跳转到/page/home/index/ 这里使用第二种处理方式; 主要代码如下：
fetch ({ route, redirect }) {
    if (route.name === 'index') {
      redirect('/home')
    }
  }

详细见pages/index.vue

fetch The fetch method is used to fill the store before rendering the page, it's like the asyncData method except it doesn't set the component data.

fetch 是一个page的方法，在页面加载进来之后会运行，这里我们使用它实现页面跳转。 这个不同于项目里的fetch.js，fetch.js主要用于请求api。

alias

alias简化路径调用方式。

注意

引入scss，例如@import "~assets/style/mixin"; 或者@import "assets/style/mixin";注意路径引入，简化方式。 一些简写方式如下图。地址 XXX

slot

components/header/head 组件使用了 slot使用插槽分发内容

slot除了文档中的作用，还可以暴露内容给外部组件。这样可以控制内容的样式，以及内容的属性等。 比如:

 <head-top signin-up='home'>
        <span slot='logo' class="head_logo"  @click="reload">ele.me</span>
      </head-top>

这里就可以在外部组件

  • 控制这个logo的样式，如上可以通过head_logo去控制。 
      .head_logo {
    left:0.4rem;
    font-weight: 400;
    @include sc(0.7rem,#fff);
    @include wh(2.3rem,0.7rem);
    @include ct;
  }
  • 在外部组件中提供事件控制。如这里的事件控制reload，都是通过外部组件可以直接控制了。 
    methods: {
      // 点击图标刷新页面
      reload () {
        window.location.reload()
      }
    }

rem等脚本配置

rem.js主要作用是给html标签设置font-size，提供一个基准量：

 var recalc = function () {
    let clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
  }

效果如图: 如何配置参考build配置项

数据请求

首页中请求热门城市，城市列表等数据都使用了service/getData.js这个文件，这个文件里面引用了plugins/fetch/index.js，fetch来统一处理请求。 fetch.js使用了axios来处理请求，axios这里主要是用在浏览器端请求数据。而且很多地方都有使用到，所以参考上面的如何配置参考build配置项将其打包进vendor.js中。 这里需要注意： 在fetch.js中需要配置开发环境，还是生产环境的请求的路径

  let baseUrl = process.env.baseUrl
if (process.env.NODE_ENV === 'development') {
 baseUrl = process.env.proxyUrl
}

具体配置过程参考环境变量配置

  • 在nuxt.config.js中配置环境变量

     ```
      env: {
          routerMode: 'history',
             baseUrl: '',
           proxyUrl: 'http://cangdu.org:8001',
         imgBaseUrl: 'http://images.cangdu.org/'
         },
 ```
 开发环境我们就使用代理的*proxyUrl*

  • 在fetch.js中

     ```
 let baseUrl = process.env.baseUrl
    if (process.env.NODE_ENV === 'development') {
       baseUrl = process.env.proxyUrl
     }
```

效果如图，在开发环境中，请求的地址就为:

可供参考

  1. citygroup的请求以及组合方式。

城市列表中，将响应的数据组合成

sortgroupcity () {
          let sortobj = {}
          for (let i = 65; i <= 90; i++) {
            if (this.groupcity[String.fromCharCode(i)]) {
              sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)]
            }
          }
          return sortobj
        }
⚠️ **GitHub.com Fallback** ⚠️