一、安装nuxtjs 

 npx create-nuxt-app <项目名>

一路回车即可！

二、安装组件

1、scss

cnpm install --save-dev node-sass@4.14.1 sass-loader@8.0.0 // scss组件，安装对应版本，不然各种报错
cnpm i -D @nuxtjs/style-resources //配置全局scss

配置：

打开nuxt.conf.js文件，然后添加全部页面需要用到的scss文件 (每个页面都会被引入)

  css: [
    // 每个页面的scss文件
    '@/assets/css/main.scss'
  ],
  buildModules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    // 全局的scss文件，主要一些颜色变量啊！ 通用的方法啊，看你自己
    scss: [
      '@/assets/css/mixin.scss'
    ]
  },

mixin.scss

$base:'#000'; // 主色
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar(
  $bg: #d3dce6,
  $active: #99a9bf,
  $w: 4px,
  $h: 1px,
  $radius: 10px
) {
  &::-webkit-scrollbar-track-piece {
    background: $bg;
    border-radius: $radius;
  }
  &::-webkit-scrollbar {
    width: $w;
    height: $h;
    border-radius: $radius;
  }
  &::-webkit-scrollbar-thumb {
    background: $active;
    border-radius: 20px;
    border-radius: $radius;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin zihang($size: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $size;
  -webkit-box-orient: vertical;
}
@mixin size($size: 1px) {
  width: $size;
  height: $size;
  border-radius: 50%;
  overflow: hidden;
}

$success: #67c23a;

2、安装element-ui

npm i element-ui -S
npm install babel-plugin-component -D

在 /plugins 文件夹下面，创建 element.js 文件。

import Vue from 'vue';
import { 
    Button,
     Select,
     Input,
     InputNumber,
     Form,
     FormItem,
    } from 'element-ui';
    Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

 Vue.use(Button)
 Vue.use(Select)
 Vue.use(Input)
 Vue.use(InputNumber)
 Vue.use(Form);
Vue.use(FormItem);

打开nuxt.conf.js文件

  plugins: [
      // ssr: true表示这个插件只在服务端起作用
    {src: '~/plugins/element', ssr: true}
  ],
    build: {
    // 按需引入
    babel: {
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }
  }

3、安装axios

我采用的是封装的模式，所以可以根据自己需求进行设置即可！

cnpm i axios -S 
cnpm i @nuxtjs/proxy -D // 安装转发
cnpm i js-cookie -S // cookies 的组件

新建/utils/auth.js 文件，用于获取缓存,比如一些token，用户信息的缓存，如果不需要，则不用设置

import Cookies from 'js-cookie'
const TokenKey = 'abcom_vms_token'

export function getToken() {
    return Cookies.get(TokenKey)
}

export function setToken(token) {
    return Cookies.set(TokenKey, token)
}

export function removeToken() {
    return Cookies.remove(TokenKey)
}

新建/utils/validate.js 文件，一些验证方法，根据自己的来就行了

// 判断是否为空
export const isEmptyValue = (value) => {
    return value == null || value === '' || value == undefined
}

在 /plugins 文件夹下面，创建 request/index.js文件。

import axios from 'axios'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'
import {isEmptyValue} from '@/utils/validate'
const service = axios.create({
    baseURL: process.env.NODE_ENV !== 'production'?'/api':'/api', // url = base url + request url
    timeout: 20000 // 请求超时时间，
})


// 请求前操作
service.interceptors.request.use(
    config => {

        config.headers['Version'] = 1
        config.headers['X-Chinaftt-Client'] = 'platform-admin'
        const token = getToken()
        // 这里是我们那后台压根没判断token是否为空，有这个参数就去查token 去了，无语，所以需要判断下
        if (!isEmptyValue(token)) {
            config.headers['Admin-Token'] = token
            config.headers['X-Chinaftt-Client'] = 'platform-admin'
        }
        console.log(config)
        console.log(process.env.NODE_ENV )
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 请求返回
service.interceptors.response.use(
  
    response => {
 
        const res = response.data

        if (res.code == '4018') {
            return res
        }
        // if the custom code is not 20000, it is judged as an error.
        if (res.code != 2000) {
            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })
            // 如果过期了，则清除token
            if (JSON.parse(res.code) == 4404 || JSON.parse(res.code) == 4195) {
               // store.dispatch('user/resetToken')
            }
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        Message({
            message: error.message.includes('timeout') ?
                '网络延迟,请稍后再试!' :
                error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

新建/api/index.js文件

import request from '@/plugins/request'

export function list(params) {
    return request({
        url: '/uc/order/myOrder',
        method: 'get',
        params
    })
}

打开nuxt.config.js,添加配置

axios: {
    proxy: true, // 需要的，不设置请求无法转发
  },
    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
      '@nuxtjs/proxy',
    ],
  proxy: {
    '/api/': {
      target: 'https://test.chinaftt.com/proxy', // 请求得转发地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    },
  },

如图

使用方法

index.vue

<template>

</template>

<script>
import { list } from '@/api/'
export default {
  name: 'IndexPage',
  created() {
    list().then((res) => {})
  },
}
</script>

即可看到请求效果

好了 至此基础的环境搭建已经完成，后续请看第二章！

git地址 

https://gitee.com/hexiangss/nuxtjs-initialization/tree/master