cloudstack/ui

CloudStack Primate

A progressive modern CloudStack Admin UI based on VueJS and Ant Design.

Install tools and dependencies:

sudo apt-get install npm
sudo npm i -g npm@next
sudo npm i -g npm-check-updates
ncu -u # optional: upgrade dependencies
npm install

Build and run:

npm start
or
npm run serve

Production Build:

npm run build

Upgrade dependencies:

ncu -u

Run Tests:

npm run test
npm run lint
npm run test:unit

Fix issues and vulnerabilities:

npm audit

History

The project was created by Rohit Yadav over several weekends during late 2018. The base app layout was referenced from Ant Design Pro Vue.

Env and dependencies

• node
• webpack
• eslint
• @vue/cli ~3
• ant-design-vue - Ant Design Of Vue
• vue-cropper - Picture edit
• @antv/g2 - AntV G2
• Viser-vue - Antv/G2 of Vue
• Fontawesome

Other

• Vue-cli3 used by the project.

• Disable Eslint (not recommended): remove eslintConfig field in package.json

• Easy-Mock used by project，easy-mock Project API Data DO NOT CHANGE THE INTERFACE，If you want to modify, please fork ANTD-PRO-Easy-Mock-API.zip and running to your server.

• Load on Demand: modify /src/main.js L7, append import './core/lazy_use' code.

• Customize Theme: vue.config.js eg:

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* Less variables, required modifyVars*/

          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  }

Docs

• Router and Menu
• Table @Saraka
• ANTD DefaultConfig
• Frist page loading animate
• Multi-Tabs feature/multi-tabs How to remove
• LoadOnDemand Demo feature/demand_load
• LoadOnDemand Docs
• i18n feature/lang Creator @musnow
• Dependency analysis tool: analyzer
• ANTD PRO Components:
  • Trend Trend.md
  • AvatarList AvatarList.md
  • CountDown CountDown.md
  • Ellipsis Ellipsis.md
  • NumberInfo NumberInfo.md
  • FooterToolbar FooterToolbar.md
  • IconSelector IconSelector.md Creator: @Saraka