English Document

vue-framework-wz

online-website

This project is a background management framework, integrated rights management, login function, industrial UI components, node-cli and other functions, it is recommended to use。

Attention：Easy to front-end debugging, so the data request is used Mock.js simulation。If you need to request an external api please remove the mock file。

Features

• 👍wz-cli👍（wz-cli helps you install / remove components more easily）
• Industrialized UI components（Get started without having to make your own wheels）
• Adaptive layout（Perfect fit large and small screen）
• Login/Logout
• Permission Validation
• Tinymce editor
• Markdown editor
• Dynamic sidebar（Support multi-level routing）
• Breadcrumbs
• JSON-Tree-View
• echartjs
• 404 pages
• The table data is exported directly to cvs
• Multi-environment build
• Mock.js
• Cool Hover Button

Run

    # clone project
    git clone https://github.com/herozhou/vue-framework-wz.git

    # install node_modules
    npm install
  
    # run your project
    npm run dev

Browser access http://localhost:9001

wz-cli

Please use wz-cli when the structure is not changed at the beginning of the project

    # After npm install  then
    npm link
   
    # then 
    wz remove -p Tinymce  //remove Tinymce editor
    wz remove -p Mockjs  //remove Mock.js plugin 
    wz  -h show all help

There are currently uninstallable plugins: Tinymce|Markdown|Mockjs|Jsontree Easy to develop compact volume

Build

    # Publish the test environment with webpack ananalyzer
    npm run build:sit-preview

    # Build the build environment
    npm run build:prod

Directory Structure

├── bin                       // wz-cli with node 
├── build                      // Build related
├── config                     // Configuration related
├── src                       
│   ├── api                    // api 
│   ├── components             // UI components
│   ├── mock                   // Mock.js
│   ├── router                 // vue-router
│   ├── store                  // vuex
│   ├── utils                  // Global common methods
│   ├── containers              // Layout
│   ├── view                   // views
│   │    ├── charts             //echart
│   │    ├── components         //views-components
│   │    ├── login              //login
│   │    ├── errorPages           //404pages
│   │    └── permission        //Permission test view
│   ├── App.vue                // vue entry
│   └── main.js                // vue entry
├── static                     // Static resource
│   ├── bower_components        //qiniu SDK
│   ├── css                     //css
│   ├── js                      //js
├── .babelrc                   // babel-loader
├── eslintrc.js                // eslint
├── .gitignore                 // gitignore
├── favicon.ico                // favicon
├── index.html                 // webpack entry html
└── package.json               // package.json

Preview

Adaptive layout

Rich feature table

Cool login

Cool echart

editor

more demo

About me

  const herozhou = {
    blogName  : `herozhou工巧`,
    blog : `https://www.cnblogs.com/herozhou`,
    email:`Zhouhero@hotmail.com`,
    School:`NCHU",
    Grade:`Junior`
  }
  //Have any questions please issues or email me directly
 //Is developing a series of projects to help novice learning front end, with everyone to become a large front-end engineers, intends to follow me, together💪

Thanks

• iView
• jquery

License

MIT