Skip to content
⚡️develop your admin-dashboard fast
Branch: dev
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc 环境变量说明移到README文件中 Feb 20, 2019
src feat(meta.js): 将meta信息本地化 May 21, 2019
static 初始提交 Jun 5, 2018
.editorconfig 初始提交 Jun 5, 2018
.eslintrc.js 初始提交 Jun 5, 2018
.gitignore ignore dotenv Nov 30, 2018
.grenrc.js
.npmignore 初始提交 Jun 5, 2018
.prettierrc 初始提交 Jun 5, 2018
.stylelintrc fix stylelintrc error Feb 14, 2019
.travis.yml sleep 3s before notify May 15, 2019
CHANGELOG.md [skip ci] chore(release): v2.3.4 May 17, 2019
LICENSE Create LICENSE Apr 10, 2019
README.md enhancement: 框架升级(axios及auth.js) May 17, 2019
build.sh ci: build & deploy & notify without human May 12, 2019
notify.sh ci: build & deploy & notify without human May 12, 2019
nuxt.config.js fix: 格式化出错误代码 May 21, 2019
package.json chore(package.json): upgrade nuxt and lock element-ui May 21, 2019
yarn.lock chore(package.json): upgrade nuxt and lock element-ui May 21, 2019

README.md

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

You can’t perform that action at this time.