Skip to content

Jack-rainbow/spaas-modules-template

 
 

Repository files navigation

spaas-admin-template

Build StatusPRs WelcomeAutomated Release Notes by gren

Table of Contents

Changelog

详细更新内容

Feature

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

⬆ Back to Top

快速开始

# 安装依赖
yarn

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

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

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

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

# 生成静态站点
yarn generate

⬆ Back to Top

工程结构

src
├─ components              公用组件
│    ├─ copyright.vue
│    ├─ layout-head.vue
│    ├─ menu-list
│    │    ├─ src
│    │    │   └─ menu-item.vue
│    │    └─ index.vue
│    ├─ route-tab.vue
│    ├─ scrollbar
│    │    ├─ bar.js
│    │    ├─ index.js
│    │    ├─ index.less
│    │    └─ utils
│    └─ sidebar.vue
├─ const                    常量文件夹
│    ├─ api.js          
│    ├─ cookie-keys.js  存储的 cookie key 数组
│    ├─ filter.js       公用函数
│    ├─ meta.js         meta 信息
│    ├─ path.js
│    └─ route-info.json 面包屑配置文件
├─ layouts                  
│    ├─ default.vue
│    └─ login.vue
├─ middleware           自定义函数,会在每个页面渲染前执行
│    ├─ auth-ssr.js
│    ├─ auth.js         路由鉴权中间件
│    └─ meta.js
├─ mixins               多组件间的公用方法
│    └─ emitter.js
├─ pages                nuxt 自动生成路由
│    ├─ _.vue
│    ├─ index.vue
│    └─ login.vue
├─ plugins              应用插件,在Vue.js 初始化前运行,可在这里引入第三方类库
│    ├─ README.md
│    ├─ axios-port.js
│    ├─ axios.js
│    └─ element.js      引入了 element-ui 组件
├─ services             api 请求文件夹
│    ├─ apiClient.js
│    └─ v1
│       └─ spaas-console-api.js
├─ static               静态资源目录
│    ├─ README.md
│    └─ favicon.ico
├─ store                vuex 状态管理
│    └─ index.js
├─ styles               样式文件夹
│    ├─ README.md
│    ├─ export.less
│    ├─ global.less     全局混入
│    ├─ reset.less      样式重置
│    └─ var.less        样式变量,支持less变量自动引入,即不用在less中import就能直接使用变量
├─ utils                工具函数库
│    └─ utils.js
└─ views                编写页面代码的地方, 因为pages下创建 `components` 会加载出路由,所以在这里拆分路由方便就近管理原则
       ├─ index
       │    └─ index.vue
       ├─ login
       │    └─ index.vue
       └─ main-layout
              ├─ components
              └─ index.vue

⬆ 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

less 样式变量

框架引入了 @nuxtjs/style-resources 模块,会在所有 less 文件中自动引入配置的 less 文件。相关配置在 nuxt.config.js 中,配置项 styleResources。配置后,需要使用 var.less 中的变量时,不用自己引入样式文件。

具体配置点击此处

styleResources: {
  less: '~assets/var.less'
},

⬆ Back to Top

构建

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

命令如下:

yarn build

License

MIT

⬆ Back to Top

单独部署

.env 加上

SINGLE_BUILD=1

⬆ Back to Top

快速生成文件模板

  • 使用
 yarn new or npm run new

 view 是创建视图文件
 component 生成全局组件模板

image

component 选项

选中选项后会要求输入组件名字,确认后会在 src/compoennts 下创建输入的组件目录

view

关于是否是 index 这个选项,说实话,我也想不到其他好的描述方式,只能在这里描述下这个功能的作用

首先,我们写一个 view 文件,有可能只有一个页面,这时候,它就不是 index

如果我们写一个 view 文件是一个列表页,它的增加,修改需要跳转页面,则需要在同级目录下为其创建额外的路由,这时候它就是 index

参数说明

  • isIndex

    • 为 true 时 主要在 pages 下创建多了一个 以 name 命名的文件夹后又为它创建了 index.vue 引入

    image

    • 为 false 时 直接为 pages 对应目录创建了 name.vue

    image

  • choice template 现在有 default,常规模板, data-table 一个简单的 table 模板

    image

  • choice appType

    应用下拉框类型选择
    1:enable(显示) 2:none(不显示) 3:disabled(显示并不可编辑)

    image

  • 流程

    流程图

路由匹配问题

image

⬆ Back to Top

commit规范

为了流程规范化,我们采用了 git commit 规范

共用下列类型

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing or correcting existing tests
  • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

这些规范有点不好记,但是我们引入了 cz-cli

package.json 下引入了下面的命令

"scripts": {
  "commit": "npx git-cz"
}

⬆ Back to Top

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 52.1%
  • Vue 43.7%
  • CSS 4.0%
  • Shell 0.2%