introdução
breve introdução
VUE (pronúncia / vjuː /, semelhante à vista) é uma moldura progressiva para a construção de interfaces de utilizador. A outra diferença da imagem é grande, vue destina-se a ser aplicada a partir da camada inferior para cima por camada. Vue foco biblioteca central apenas na camada de visão, não só é fácil de usar, mas também fácil de integrar bibliotecas de terceiros ou projeto existente. Por outro lado, quando usado em conjunto com uma cadeia de ferramenta moderna e várias bibliotecas de suporte, vue também totalmente capaz de fornecer unidade para aplicação de uma página complexo.
Vue.js MVVM ligação de dados também fornece um sistema e um componente pode ser combinado com um simples, API flexível, que é sensível ao alvo de ligao de dados podem ser combinados e aplicada, tanto quanto possível por um simples componente vista API.
As principais características do Vue.js
Vue.js é um excelente front-end desenvolvimento de interface de biblioteca JavaScript que razão o fogo, porque há muitos recursos pendentes, que tem as seguintes características principais.
1) estrutura leve
Vue.js pode rastrear automaticamente e calcular atributos dependentes do modelo uma expressão, fornecer dados MVVM de ligação e uma combinação de componentes do sistema, tem um simples e API flexível, para que os leitores mais fáceis de entender, ser capaz de começar mais rápido.
2) dados de duas vias de ligao
renderização declarativa é obrigatório principalmente duas vias de dados, o núcleo é também Vue.js, que permite o uso de sintaxe modelo simples irá declarar renderização de dados integrados no DOM.
3) instrução
Vue.js interagir com a página, é feito principalmente através do built-in instruções, instruções nesse sentido quando o valor de sua expressão em conformidade certos comportamentos para o DOM.
4) do componente
Componente (Component) Vue.js é um dos recursos mais poderosos. elementos HTML que pode ser estendido, o código reutilizável pacote.
Em vue, o componente de comunicação é transmitida através Sons Os suportes, a transmissão de uma via de pais para filhos. Os subconjuntos e os componentes de comunicação pai, notificar o componente pai alterando os dados do evento de disparo. Isto forma um modo de comunicação de base Sons.
No desenvolvimento de componentes e HTML, JavaScript, etc. têm uma relação muito próxima, de acordo com as reais necessidades dos componentes personalizados, permitindo que os desenvolvedores para tornar-se mais conveniente, pode reduzir muito a quantidade de código escrito.
Componente também suporta sobrecargas térmicas (hotreload). Quando fizemos mudanças não vão atualizar a página, mas o próprio componente imediatamente sobrecarregado e não afetará o status atual de toda a aplicação. CSS também suporta hot sobrecarregado.
5) O encaminhamento cliente
Vue-router é Vue.js rota oficial plug-ins, a integração com Vue.js profundidade, usada para construir aplicação de uma única página. aplicações de uma única página Vue e componentes com base no encaminhamento, a rota para definir o caminho de acesso, eo caminho eo mapeamento de montagem em conjunto, alcançar os tradicionais handover e página salto páginas por hyperlinks.
6) Gestão do Estado
gerenciamento de estado é realmente um one-way de fluxo de dados, tornando unidade Ver Estado, o usuário opera para gerar a visualização Ação, Estado fazer a diferença, para que re-renderização View, formar um componente separado.
SPA e MPA contraste
MPA
A maior parte da estrutura do projeto tradicional, usando uma aplicação multi-page (MultiPage Aplicação, MPA), o tempo necessário para mudar o conteúdo que tendem a saltar um único arquivo html, por esta altura, o impacto do desempenho da rede, haverá um navegador em branco interface de tempo incerto, a experiência do usuário não é bom.
SPA
Sem atualização após a mudança de página única aplicação de aplicação SPA (aplicação única página) é um usuário muda a barra de endereço URL certas operações e conteúdo dinâmico de diferentes modelos, a experiência do usuário é bom.
Vue irá utilizar-plug-vue router oficial para usar uma única página, o princípio é o de switch (instalado e desinstalado) detectado pelo componente de roteamento correspondente à barra de endereços vai mudar.
A comparação entre os dois
| SPA vs MPA | aplicação de uma única página (aplicação única página, SPA) | aplicação multi-page (MultiPage Aplicação, MPA) |
|---|---|---|
| composição | Abrigando uma pluralidade de páginas e fragmentos de páginas | Multiple composição de página inteira |
| Partilha de recursos (css, js) | Só precisa carregar a parte comum de habitação | Não compartilhar, você precisa carregar cada página |
| modo de atualização | atualização de página parcial ou mudança | atualização de página inteira |
| modo url | a.com/#/pagone a.com/#/pagtow |
a.com/#/pagone.html a.com/#/pagtwo.html |
| Experiência do usuário | fragmentos de página mudar rápido, boa experiência do usuário | Página comutação de cargas lentamente, fluência não é uma má experiência do usuário |
| animação de transição | Fácil de implementar | não pode ser alcançado |
| transferência de dados | fácil | Url passagem de parâmetros dependentes, ou biscoito, localStorage etc. |
| Search Engine Optimization (SEO) | Requer um programa separado, mais difícil de alcançar, não é propício para a recuperação SEO pode tirar vantagem da renderização do lado do servidor (SSR) optimização | Implementação fácil |
| escopo | Experiência de alta demanda, a busca da interface de aplicação suave | Suporte para aplicativos de busca de um motor de busca alta |
| Os custos de desenvolvimento | Alta, muitas vezes precisa confiar em âmbito profissional | Baixo, mas o código duplicado multi-page |
| Os custos de manutenção | relativamente fácil | relativamente complexa |
Ferramentas de instalação
O primeiro passo:
Instale node.js, referem-se especificamente ao blog Node.js instalação detalhadas etapas tutorial (versão Windows) .
Passo dois:
Webpack instalação, com particular blogue de referência configuração de instalação Webpack e embalagem processo em detalhe .
O terceiro passo:
Instalação vue-cli, digitar um comando, a instalação global de vue-cli, onde espelho CNPM Taobao, velocidade de instalação, i é instalar a abreviatura, g é uma abreviatura de global.
CNPM i vue-cli -g
processo de criação de vue-cli
O primeiro passo:
Depois de concluída a instalação, execute CMD, e mude para a necessidade de criar um projeto Vue diretório, digite o seguinte comando para iniciar a criação.
init Webpack o Test-VUE VUE // Nota: nome Um projeto deve estar em minúsculas, caso contrário ele irá erro
Passo dois:
Em seguida, começou a opção de projeto é definido da seguinte forma:
- Nome do projeto --- nome do item, pressione Enter;
- A descrição do projeto --- descrição do projeto, digite "teste projeto Vue", aperte enter;
- Autor --- Autor, digite "aizai846", aperte enter;
- Runtime + Compiler: recomendado para a maioria dos usuários e tempo de execução apenas: sobre 6KB mais leve min + gzip, mas modelos (ou qualquer Vue-specificHTML) só são permitidas em arquivos .vue - prestar funções são necessários em outro lugar duas opções --- primeiro um é compilado para rodar mais recomendado, apenas a segunda vez em execução. Até o teclado para cima e para selecionar para baixo, pressione Enter;
- ? A instalação vue-Router <o Y / a n-> --- rota vue plug-ins são instalados, digite "Y", aperte enter;
- ESLint lint seu código para o Uso? <A Y / o n-> --- se o código de gerenciamento de ESLint, ESLint é um código de estilo ferramenta de gestão, o código é usado para estilo uniforme, o projeto geral será usado, mas como um novato, não é recomendado para instalação, tipo "n", pressione Enter;
- Testes Unitários-se SET <o Y / n-> --- unidade de teste está instalado, a entrada onde "n", aperte enter;
- e2e configuração testa com Nightwatch? ? <A Y / o n-> --- se deseja instalar e2e teste, insira aqui "n", aperte enter;
- Corremos deveria "npm install" para você em que o projeto foi o Após a Criado? <Recomendado> <Use as setas> Sim, o uso NPM Sim, usar o fio Não, a I vai lidar com isso sozinha --- três opções, aqui vamos escolher a primeira três, desde dependências do projeto vue instalados pelo NPM instalar, muito lento, podemos criar o projeto-se através de "CNPM instalar" da instalação.
E que nós criamos ao longo do projeto, como mostrado abaixo.
O terceiro passo:
Desde o último item de uma segunda etapa, optou por instalar o seu próprio projeto de instalação de dependências de pacotes, então aqui digite o comando a seguir para concluir as dependências do pacote projeto.
F. CD: \ JsCodeProject \ VUE-Test // mude para o diretório do projeto CNPM I // qual, espelho CNPM é instalado através Taobao, a velocidade é muito rápido
Passo Quatro:
Digite o seguinte comando para testar se o projeto pode funcionar normalmente.
dev prazo npm
Depois de uma temporada de sucesso na caixa de comando do shell, a saída das seguintes informações.
Neste caso, no seu navegador, digite a URL do topo, você pode visitar o nosso projeto vue recém-criado, como mostrado abaixo
Conteúdo vue Introdução
Nosso novo projeto aberto através VSCode, estrutura de diretório específico mostrado na FIG.
No arquivo package.json, podemos ir para a entrada do arquivo de configuração do ambiente de desenvolvimento e produção.
"scripts" : { "dev": "Webpack-dev-servidor --inline --progress --config build / webpack.dev.conf.js" , "Start": "dev prazo npm" , "construção": " nó construir / build.js" }
Em que a entrada para ambiente de desenvolvimento documento "webpack.dev.conf.js"; entrada de arquivo para "build.js" de produção, eles estão no arquivo de construção, como mostrado na FIG.
Em que parte do arquivo da seguinte forma:
- build.js --- ambiente de produção arquivo de entrada, embalados para a construção de um arquivo, o código fonte para construir o pacote (compilado, compressão, etc.);
- utils.js --- é uma frequência de utilização de arquivos, este documento contém três funções utilitárias: recursos estáticos gerando caminho gera o carregador objeto ExtractTextPlugin ou string, gerando configuração estilo de carregador;
- webpack.base.conf.js --- aparece webpack.base.conf.js em webpack.dev.conf.js, este documento é os ambientes de desenvolvimento e produção, ambiente de teste mesmo, configuração Webpack pública desses ambientes;
- Configurando webpack.dev.conf.js entrada --- ambiente de desenvolvimento Webpack de.
- webpack.prod.conf.js --- entrada está disposta num Webpack ambiente de produção. Também se baseia nas webpack.base.conf.js acima mencionados, utils.js e config / index.js;
implantação do pacote
arquivos de desenvolvimento do projeto no directório src, após a conclusão do projeto de desenvolvimento, use o seguinte comando para empacotar o projeto.
construção run npm
Após a conclusão da embalagem irá gerar pasta dist, como mostrado, quando o item de linha, pasta dist directamente no servidor.
resumo
Este artigo descreve o processo de criação do projeto Vue e explicações Vue estrutura de diretórios nos permite uma compreensão mais clara do projeto Vue processo de desenvolvimento, calçados infantis para o iniciante, pode desempenhar um bom papel para liderar o caminho, há também um monte de projetos não explicam lugar onde sapatos pode adicionar foco, vamos explicar em detalhes em um post posterior, se houver falhas no texto, perdoa-nos, ao mesmo tempo, um problema é criado, você pode deixar uma troca de mensagens!