Use el proyecto y uso de vueCli andamios webpcak (fabricación de ruedas de nivel de entrada)

8. Andamios Vue Cli

Nota: La idea del compilador webstrom puede usar andamios vue

8.1 ¿Qué es Cli?

La interfaz de línea de comandos CLI (interfaz de línea de comandos) es la interfaz de usuario más utilizada antes de que la interfaz gráfica de usuario se hiciera popular.

8.2. ¿Qué es Vue CLI?

Vue CLI es un sistema completo para un desarrollo rápido basado en Vue.js. Después de usar el andamio Vue, la página que desarrollamos será un sistema completo (proyecto)

8.3. Ventajas de los andamios Vue CLI

• Cree andamios de proyectos interactivos a través de vue-cli . bootstarp css js jquery js descarga dependencias relacionadas ejecutando comandos

• Inicie rápidamente el desarrollo de prototipos de configuración cero a través de @ vue / cli + @ vue / cli-service-global vue page vue.js vue.router axios (las dependencias se pueden importar con un comando)

• Una dependencia de tiempo de ejecución ( @ vue / cli-service ), la dependencia:

  • Actualizable (se puede hacer mediante un comando)
  • Construido en base al paquete web, con una configuración predeterminada razonable (método de empaquetado del proyecto del paquete web compilado código fuente del proyecto ====> implementado en el servidor para uso directo)
  • Se puede configurar a través del archivo de configuración del proyecto (archivo de configuración predeterminado, modificando el archivo de configuración predeterminado para lograr el entorno del proyecto que desea)
  • Se puede ampliar a través de complementos (vue-v-charts elementui)

• Una rica colección de complementos oficiales, que integra las mejores herramientas en el ecosistema front-end. Nodejs (un servidor front-end escrito puramente en js, similar a tomcat es un servidor java escrito en java puro) Vue VueRouter webpack yarn

• Un conjunto de interfaz de usuario completamente gráfica para crear y administrar proyectos de Vue.js

8.4, instalación de Vue CLI

1. Preparación 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 andamios

# 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. El primer proyecto de andamios 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. Cómo desarrollar andamios vue

Nota: Todo en vue desarrollo es un componente

El comando npm start debe estar en el archivo actual para usar este comando