Use vueCli scaffolding webpcak project & use (criação de roda de nível básico)

8. Andaimes Vue Cli

Nota: O webstrom de ideia do compilador pode usar vue scaffolding

8.1 O que é Cli

A interface de linha de comando CLI (interface de linha de comando) é a interface de usuário e mais amplamente usada antes que a interface gráfica de usuário se tornasse popular.

8.2. O que é Vue CLI

Vue CLI é um sistema completo para desenvolvimento rápido baseado em Vue.js. Depois de usar o andaime Vue, a página que desenvolvemos será um sistema completo (projeto)

8.3. Vantagens do scaffolding Vue CLI

• Crie andaimes de projetos interativos por meio de vue-cli . bootstarp css js jquery js baixa dependências relacionadas executando comandos

• Iniciar rapidamente protótipo de desenvolvimento zero-configuração através @ vue / cli + @ vue / cli-serviço global vue página vue.js vue.router Axios (dependências podem ser importados com um comando)

• Uma dependência de tempo de execução ( @ vue / cli-service ), a dependência:

  • Atualizável (pode ser feito por comando)
  • Construído com base no webpack, com configuração padrão razoável (método de empacotamento do projeto webpack código-fonte do projeto compilado ====> implantado no servidor para uso direto)
  • Pode ser configurado através do arquivo de configuração do projeto (arquivo de configuração padrão, modificando o arquivo de configuração padrão para atingir o ambiente de projeto que você deseja)
  • Pode ser estendido por meio de plug-ins (vue-v-charts elementui)

• Uma rica coleção de plug-ins oficiais, integrando as melhores ferramentas no ecossistema de front-end. Nodejs (um servidor front-end escrito puramente em js, semelhante ao tomcat é um servidor java escrito em java puro) Vue VueRouter webpack yarn

• Um conjunto de interface de usuário totalmente gráfica para criar e gerenciar projetos Vue.js.

8.4, instalação Vue CLI

1. Preparação Ambiental

# 1、下载node.js
# 2、配置环境变量
# 3、验证node.js 环境是否成功
	node -v
# 4、npm 介绍
	node package mangager  nodejs包管理工具，但是前端主流技术都可以用npm进行统一管理
	maven 管理java后端依赖  远程仓库（中心仓库）  阿里云镜像
	npm  管理前端系统依赖  远程仓库（中心仓库）   配置淘宝镜像
# 5、配置淘宝镜像
	通过命令配置
    npm config set registry https://registry.npm.taobao.org
    验证命令
	npm config get registr   //检查是否返回淘宝地址
# 6、配置npm下载依赖位置
	npm config set cache "D:\workspace\Apache\nodereps"
	npm config set prefix "D:\workspace\Apache\nodereps"
# 7、验证node.js环境配置
    D:\>npm config ls
     cli configs
    metrics-registry = "https://registry.npm.taobao.org/"
     userconfig C:\Users\Administrator\.npmrc
    cache = "D:\\workspace\\Apache\\nodereps"
    prefix = "D:\\workspace\\Apache\\nodereps"
    registry = "https://registry.npm.taobao.org/"

2. Instale o andaime

# 0、卸载脚手架
	npm uninstall -g @vue/cli //卸载3.x版本的脚手架
	npm uninstall -g @vue-cli //卸载2.x版本的脚手架
# 1、Vue Cli官方网站
	https://cli.vuejs.org/zh/guide/
# 2、安装vue cli
	npm install -g vue-cli

3. O primeiro projeto de andaime vue

# 1、创建vue脚手架第一个项目
	vue init webpack 项目名
# 2、创建第一个项目
    hello	--------------->项目名	
       - build ------------>用来使用webpack打包使用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  ------>项目的阅读文件（项目说明）
# 3、如何运行在项目的根目录中执行
	首先需要跳转的项目中 例如 cd hello/
	npm start 运行前端系统
# 4、如何访问项目
	Your application is running here: http://localhost:8080
# 5、Vue cli项目开发方式
	注意：一切皆组件  一个组件中：js代码  HTML代码  css样式
	1、VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
	2、日后在使用vue Cli进行开发时不再书写html，编写的是一个一个的组件（组件的后缀.vue文件
	），日后打包时vue cli会将组件编译成运行HTML文件

4. Como desenvolver um andaime vue

Nota: Tudo em desenvolvimento vue é um componente

O comando npm start deve estar no arquivo atual para usar este comando