O uso de andaimes front-end Vue CLI

Visualização CLI

1. Introdução

conceito

Vue CLI é um sistema completo para desenvolvimento rápido baseado em Vue.js.

A página desenvolvida após o uso do andaime Vue será um sistema completo (projeto).

2. Instalação

2.1 Preparação ambiental

Primeiro baixe o node.js, traga seu próprio npm, execute a configuração do espelho e outras operações para completar a configuração.

2.2 Instalação do andaime

# 卸载脚手架
npm uninstall -g @vue/cli  //卸载3.x版本脚手架
npm uninstall -g vue-cli  //卸载2.x版本脚手架

# 安装2.x版本的vue Cli
npm install -g vue-cli

2.3 Crie um projeto de andaime

1. Encontre o local onde você deseja colocar o item de andaime e execute o vue init webpack 项目名comando :

   

2. Haverá um prompt interativo após a execução do comando, escolha da seguinte forma:

   

3. Execute com sucesso:

   

4. O projeto de andaime criado é o seguinte:

   

   Descrição da estrutura do projeto:

   vue-cli-first: 项目名
   	-build: 存放项目运行的脚本文件
   	-config: 整个项目的配置目录
   	-node_modules: 管理项目中使用的依赖
   	-src: 用来书写vue的源代码[重点]
   		-assets: 用来存放静态资源
   		-components: 用来书写Vue组件
   		-router: 用来配置项目中的路由
   		-App.vue: 项目根组件
   		-main.js: 项目主入口
   	-static: 其它静态资源
   	-.babelrc: 将es6语法转为es5运行
   	-.editorconfig: 项目编辑配置
   	-.gitignore: git版本控制忽略文件
   	-.postcssrc.js: 源码相关js
   	-index.html: 项目主页
   	-package.json: 类似pom.xml，依赖管理
   	-package-lock.json: 对package.json固定版本
   	-README.md: 项目说明文件
   

5. Execute o projeto:

   package.jsonExecute na camada superior de (ou seja, no diretório do projeto de scaffolding criado) npm run dev:

   

6. Itens de acesso:

   

Nota: A ideia de desenvolvimento do scaffolding é que tudo é um componente , ou seja, um componente corresponde a uma função de negócio. Ao escrever componentes (arquivos que terminam em .vue), vários componentes podem ser combinados e empacotados em executáveis ​​através do vue cli arquivo html.

2.4 Etapas de desenvolvimento

1. Explicação detalhada do conteúdo do main.js (geralmente este arquivo não será modificado):

   

2. Conteúdo do App.vue:

   Geralmente, um componente é dividido em três partes:

   

   Ou seja, o projeto primeiro acessa o App.vue, executa o conteúdo no template e depois utiliza os componentes definidos pelo objeto Vue em main.js, ou seja, os componentes introduzidos em index.js.

3. conteúdo index.js:

   

Portanto, executar diretamente o projeto acessa o componente HelloWorld.

Componentes personalizados:

1. Modifique o conteúdo do App.vue:

   

2. Crie um novo componente Home.vue:

   

3. Modifique a página index.js:

   

4. resultado da operação:

   

Portanto, no desenvolvimento futuro, você precisa usar rout-linktags definir o caminho de roteamento (para acessar o conteúdo exibido diretamente pelo projeto) , definir os componentes que terminam em .vue no pacote de componentes, importar os componentes no index.js e declare os componentes.

Por exemplo, declare o caminho de roteamento em App.vue:

Defina os três componentes que terminam com .vue no pacote de componentes. Após importar os componentes e declarar os componentes no arquivo index.js, os resultados em execução são os seguintes:

3. Usando Axios em andaimes

1. Instalar Axios

   npm install axios --save-dev

2. Introduza o Axios no main.js e modifique o $http interno

   import axios from 'axios';

   Vue.prototype.$http = axios;

3. enviar pedido

   obter pedido:this.$http.get("url").then((res)=>{})

   postar solicitação:this.$http.post("url").then((res)=>{})

4. Embalagem e implantação do projeto de andaimes

4.1 Empacotando recursos estáticos

1. Execute o comando no diretório raiz do projeto (o diretório que contém o package.json)

   npm run build

   Nota: O projeto Vue deve ser executado no servidor e não pode ser executado diretamente clicando duas vezes.

2. O diretório dist aparece após o empacotamento

   

   Esse diretório é o diretório de implantação direta.

3. Copie o diretório dist para o seguinte diretório do projeto SpringBoot:

   

4. Inicie o projeto SpringBoot e acesse a página index.html pelo caminho do navegador

4.2 Recursos estáticos do proxy Nginx

1. Carregue o diretório dist empacotado para um diretório no servidor nginx, por exemplo: /opt/www/vue/dist

2. Em seguida, configure o nginx, entre no diretório de instalação do nginx e modifique o arquivo de configuração do nginx, como:

   # vue-demo.conf
   location / {
       root   /opt/www/vue/dist;
       index  index.html index.htm;
   }