Skip to content

BrowLi/nuxt-element-dashboard

 
 

Repository files navigation

Notice

This repo is no longer maintained,please use https://github.com/FEMessage/create-nuxt-app

nuxt2 + element dashboard

Build StatusPRs WelcomeAutomated Release Notes by gren

Table of Contents

Feature

Nuxt.js的基础上,集成以下技术栈:

⬆ Back to Top

快速开始

# 安装依赖
yarn

# 使用mock接口进行开发
yarn mock

# 使用mock接口进行开发,且不会有登录拦截
yarn mock:nologin

# 使用后端接口进行开发
yarn dev

# 使用webpack进行生产构建
yarn build

# 生成静态站点
yarn generate

⬆ Back to Top

工程结构

├── README.md
├── doc
│   └── dev.md
├── nuxt.config.js         框架配置文件
├── package.json
├── src                    开发目录
│   ├── assets             资源,包括样式文件与图片
│   │   ├── global.less    全局样式类
│   │   └── var.less       样式变量,支持less变量自动引入,即不用在less中import就能直接使用变量
│   ├── components         业务无关的可复用的组件
│   ├── const              常量文件
│   │   ├── api.js         定义api路径
│   │   ├── path.js        定义页面跳转路径
│   │   └── cookie-keys.js cookie key管理
│   ├── container          业务有关的vue组件
│   ├── layouts            可复用的页面布局
│   │   ├── default.vue
│   │   └── login.vue
│   ├── middleware         自定义函数,会在每个页面渲染前执行
│   │   └── auth.js        路由鉴权中间件
│   ├── mixins             可复用的“织入”页面的代码片断
│   ├── pages              应用视图 & 路由名称,每个文件都对应一个路由视图,开发者框无需手动维护路由文件
│   │   ├── index.vue
│   │   └── login.vue
│   ├── plugins            应用插件,在Vue.js 初始化前运行,可在这里引入第三方类库
│   │   ├── axios.js       请求拦截
│   │   └── element.js     引入element-ui
│   └── store              Vuex状态管理文件
│       └── index.js
├── static                 静态资源
│   ├── README.md
│   └── favicon.ico
└── yarn.lock

⬆ Back to Top

开发

新建页面

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置

pages目录下新建一个名为 hello.vue 的页面

<template>
  <h1>Hello world!</h1>
</template>

即可在 http://localhost:3000/hello 访问到新建的页面

⬆ Back to Top

调用接口

使用this.$axios 调用接口:

  • 建议使用$get $post $[methods]等方法,respone中会直接返回请求的body
  • 可以在 *.vue 文件中的生命周期钩子函数中调用
  • 可以在 methods 里调用
  • 可以在 store/*.jsactions 里调用
// vue文件
export default {
  mounted() {
    this.$axios.$get(url)
  },
  methods: {
    fetchData() {
      this.$axios.$get(url)
    }
  }
}
// store/index.js
export const actions = {
  async fetchData({commit}, {params}) {
    let resp = await this.$axios.$get(url, {params})
    commit('update', resp)
  }
}

⬆ Back to Top

CRUD

注意方法前有$

// GET 请求
this.$axios.$get('/users', {params: {key: value})
.then(resp => {
})
.catch(e => {})
// POST 请求
this.$axios.$post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
 .then(resp => {
  })
.catch(e => {})
// PUT 请求
this.$axios.$put('/user/1', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
 .then(resp => {
  })
.catch(e => {})
// DELETE 请求
this.$axios.$delete('/user/1')
 .then(resp => {
  })
.catch(e => {})
// 或
this.$axios({
  method: 'delete',
  url: '/users',
  data: {
    rows: [1,2],
  }
})

⬆ Back to Top

设置代理

开发时,api使用的都是相对路径,通过代理来解决跨域问题。

nuxt.config.js 中找到 config 变量,修改 mock 设置:

env: {
    mock: {
      '/api': 'http://mock.api.server',
    },
    dev: {
      '/api': 'http://real.api.server',
    }
  }

则对于所有以 /api 开头的请求:

  1. yarn mock 模式下,都会变成 http://mock.api.server/api

  2. yarn dev 模式下,都会变成 http://real.api.server/api

注意,每次修改代理设置,都需要重新启动应用才能生效

⬆ Back to Top

环境变量

使用.env设置环境变量, 即在项目根目录新建一个.env文件, 填写环境变量即可。

注意,该文件不能提交至版本控制系统中。

.env文件示例:

# 左边是变量名(一般大写,下划线分割单词),右边是变量值
# 注意=号两边不能有空格
TESTING_VAR=just-fot-testing
ANOTHER_VAR=another

可以在项目的vue文件或js文件中读取

mounted() {
  console.log(process.env.TESTING_VAR) // 输出 just-fot-testing
}

自带的环境变量说明

环境变量名 说明 是否必须 默认值 示例
PUBLIC_PATH 对应webpack的publicPath,用于指定静态文件访问路径 http://cdn.deepexi.com
API_SERVER axios的baseURL,可不传。不传时,使用相对路径发送请求 https://www.easy-mock.com
NO_LOGIN 是否登陆拦截,传1则不会有登录拦截 1
COOKIE_PATH 用于设置cookie的path,如果多个项目需要共享cookie,则应该保证项目在共同的目录下,且设置COOKIE_PATH为它们的共同目录地址 / /xpaas

⬆ Back to Top

构建

构建会读取根目录下的.env文件获取环境变量, 默认生成的是hash路由模式的spa, 在dist目录输出静态文件

命令如下:

yarn build

License

MIT

⬆ Back to Top

About

⚡️develop your admin-dashboard fast

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 50.4%
  • JavaScript 45.0%
  • CSS 2.4%
  • Shell 2.2%