vue-admin

a solution for vue middle or background system(vue )

github

😁😁

vue js ( vue vue ) clone

vue2-admin-cli

npm install -g vue2-admin-cli // vue2-admin-cli
# or
yarn global add vue2-admin-cli

vue2-admin-cli init <project_name> // 
or
git clone https://github.com/szqlovepk/vue-admin.git

2.yarn ( ) yarn

yarn serve

build:qa // qa
build:pre // pre
build:prod //

vue-cli4.x

vue-router Vue.js
vuex Vuex Vue.js
animate.css css
dayjs JavaScript
element-ui Vue 2.0
axios http
lodash JavaScript
echarts JavaScript
js-cookie cookie JavaScript API
vue-property-decorator vue-property-decorator vue-class-component vue-property-decorator
vuex-module-decorators vuex
wangeditor vue 4.x
timeago.js vue-count-to

vue-admin
 .browserslistrc
 .eslintrc.js
 .gitignore
 babel.config.js
 package.json
 public
   favicon.ico
   index.html
 README.md
 src
   api
     index.ts
     modules
       home.ts
     request.ts
   App.vue
   assets
     logo.png
   components
     echarts
       Bar.vue
       Line.vue
       Pie.vue
     Editor.vue
     index.ts
     layout
        Header.vue
        index.vue
        Menu.vue
        SubMenu.vue
   constant
     url.ts
   directives
     index.ts
   index.less
   main.ts
   plugins
     index.ts
   router
     config.ts
     index.ts
   shims-tsx.d.ts
   shims-vue.d.ts
   store
     index.ts
     modules
        auth.ts
   utils
     index.ts
   views
      animation
        Animate.vue
        Element.vue
      auth
        authDirective.vue
        authPage.vue
      component
        EditorPage.vue
      error
        ForbiddenPage.vue
        InternalServerErrorPage.vue
        NotFoundPage.vue
      form
        BasicForm.vue
      Home.vue
      icon
        IconFont.vue
      lodash
        DebounceAndThrottle.vue
      Login.vue
      mode
        index.vue
      router
        Sub1-1-1.vue
        Sub1-1-2.vue
        Sub1-1.vue
        Sub1-2.vue
        Sub1.vue
        Sub2.vue
      table
         BasicTable.vue
 tsconfig.json
 vue.config.js
 yarn.lock

---

vue-admin

interface IBaseRouter {
  path: string; // 
  name?: string; // 
  children?: IBaseRouter[]; // 
  redirect?: RedirectOption; // 
  meta?: IMeta;
  hidden?: boolean; // ( false) true  401login/edit/1
  component?: Component; // 
  props?: boolean; //  props  true route.params  props
}

interface IMeta {
  title?: string; //  
  icon?: string; //  element-uiicon
  breadcrumbAll?: boolean; //( true)false 
  breadcrumb?: boolean; // ( true)falsebreadcrumb
  breadcrumbTo?: boolean; // ( true)
  activeMenu?: string; //  
  auth?: string; // key  key
}

{
        path: "authPage",
        name: "authPage",
        component: () => import("../views/auth/authPage.vue"),
        meta: {
          title: "",
          auth: "authPage",  //key
        },
      },

v-auth key

<input v-focus v-auth:authDirective />

vue-admin axios

message 401
loading

export const appList = (params: any): Promise<any> =>
  request.get("/app", { params, loading: true }); // loadingloadingfalse loadingtrue

blob blob responseType: "blob" promise.then(res => {}, rej=> {})


export const exportGoods = (data: any) =>
  request.post("/export", data, {
    responseType: "blob",
  });

vue-admin developmentqapreprod

NODE_ENV vue-cli-service build NODE_ENV "production"
VUE_APP_ENV api

.env.prod

NODE_ENV = "production"
VUE_APP_ENV = 'prod'

src/consatnt/url.ts

export default {
  dev: {
    home: "http://localhost:7009",
  },
  qa: {
    home: "http://vue-admin.qa.com",
  },
  pre: {
    home: "http://vue-admin.pre.com",
  },
  prod: {
    home: "http://vue-admin.prod.com",
  },
};