vue2 admin

vue2-admin

Endereço da experiência: vue2-admin
Conta: administrador Senha: administrador
Se você encontrar um bug ou tiver uma implementação melhor, sinta-se à vontade para entrar em contato comigo (você também pode me enviar um e-mail perguntando se não entendeu o código). E-mail: [email protected]

Endereço do GitHub da versão vue2: vue2-admin
Há também um armazém gitee, basta alterar o github no link acima para gitee.

---

Contém recursos

1. Animação de carregamento da primeira tela
2. pacote axios
3. controle de permissão do roteador
4. Gere dinamicamente a barra de navegação lateral com base nas permissões
5. Lógica de login
6. Layout da página do painel
8. Componentes baseados no encapsulamento secundário de el-tooltip somente exibirão a dica de ferramenta quando o comprimento for excedido e suportarão todos os atributos de el-tooltip 9. Componentes baseados no encapsulamento secundário de el-table, suportarão todos os atributos de el. -table e paginação de suporte 10. Componente de seleção de ícone baseado no encapsulamento secundário el-icon 11. Função de atualização sem toque de token.

---

modelo de plano de fundo vue2 + elemento + eixos

Ele não encapsula funções demais e fornece apenas a estrutura básica da página e a estrutura de roteamento. As funções restantes são totalmente deixadas para os próprios usuários desenvolverem.

Introduza simulações para facilitar o desenvolvimento separado de front-end e back-end.

Sobre mockjs

Para demonstrar o efeito, também utilizei mock.js para gerar dados de teste no ambiente formal. Mas a versão oficial não será utilizada!

Por favor, execute-o de forma interrompida durante o uso oficial.

 npm uninstall mockjs --save

Se você precisar de dados de teste durante o desenvolvimento, execute as seguintes instruções para instalar mockjs no ambiente de desenvolvimento

 npm install mockjs -D

---

Encapsular axios

Os cabeçalhos de solicitação podem ser configurados em utils/request.js e modificados de acordo com sua situação real.

Configure o URL base da solicitação na API em utils/setting.js

O ambiente geral é .env

O ambiente de desenvolvimento é .env.development

O ambiente de produção é .env.production

Prioridade da variável de ambiente .env.production = .env.development > .env

Há uma pasta api no diretório src do projeto e, em seguida, crie um novo arquivo user.js nela. Este arquivo é o processo de encapsulamento de gravação da API.

Recomenda-se colocar um tipo de interface no mesmo arquivo ao utilizá-lo para facilitar a depuração e o gerenciamento unificado.

Se o formato @/api/user.js for usado, ele será introduzido primeiro ao usá-lo. Por exemplo, primeiro apresento o arquivo em @/component/login.vue

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

controle de permissão do roteador

Gere rotas dinamicamente com base nos dados retornados pela interface e gere uma barra de navegação com base nos dados da interface.

Existem protetores de rota em @/router/beforEach.js Os protetores de rota básicos foram adicionados. Se você quiser implementar outras funções (como: você só pode entrar em uma determinada página após realizar uma determinada operação), você pode adicioná-la. em router/beforEach.js Adicione a lógica correspondente à função de autoexecução.

O texto gera navegação lateral com base na rota

Configure o ícone, o título e o oculto da barra lateral no meta atributo em @/router/beforEach.js. Quando oculto: verdadeiro, a barra de navegação lateral não é exibida.

A cor da barra lateral pode ser modificada por side_color e side_rext_color do tema em utils/setting.

---

VUEX

Coloque modularização vuex, login e controle de permissão em um módulo separado

Para evitar a perda de atualização de dados vuex, introduza vuex-persistedstate

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

Para evitar que os usuários modifiquem manualmente o armazenamento da sessão, um evento de escuta é adicionado

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

estrangulamento de botão

O código básico de otimização do botão foi adicionado e v-preventReClick pode ser vinculado ao botão.

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

página de inclusão inicial

Página de login,

Página de recuperação de senha,

página 404,

Página inicial

---

Preparação para uso

 npm uninstall mockjs --save

npm install mockjs -D

npm install

Iniciar um projeto

 npm run serve

Embalagem do projeto

 npm run build

Formatação de código

 npm run lint

janela de encaixe

 docker build -t vue-admin . --no-cache