Utiliser le projet et l'utilisation de l'échafaudage vueCli Webpcak (fabrication de roues d'entrée de gamme)

8. Échafaudages Vue Cli

Remarque: L'idée de compilateur webstrom peut utiliser l'échafaudage de vue

8.1 Qu'est-ce que Cli

L'interface de ligne de commande CLI (interface de ligne de commande) est l'interface utilisateur la plus largement utilisée avant que l'interface utilisateur graphique ne devienne populaire.

8.2. Qu'est-ce que Vue CLI

Vue CLI est un système complet pour un développement rapide basé sur Vue.js. Après avoir utilisé l'échafaudage Vue, la page que nous avons développée sera un système complet (projet)

8.3. Avantages de l'échafaudage Vue CLI

• Créez un échafaudage de projet interactif via vue-cli . bootstarp css js jquery js télécharge les dépendances associées en exécutant des commandes

• Démarrez rapidement le développement d'un prototype sans configuration via @ vue / cli + @ vue / cli-service-global vue page vue.js vue.router axios (les dépendances peuvent être importées avec une seule commande)

• Une dépendance d'exécution ( @ vue / cli-service ), la dépendance:

  • Évolutif (peut être fait par commande)
  • Construit sur la base de webpack, avec une configuration par défaut raisonnable (méthode de packaging de projet webpack code source du projet compilé ====> déployé sur le serveur pour une utilisation directe)
  • Peut être configuré via le fichier de configuration du projet (fichier de configuration par défaut, en modifiant le fichier de configuration par défaut pour obtenir l'environnement de projet souhaité)
  • Peut être étendu via des plug-ins (vue-v-charts elementui)

• Une riche collection de plugins officiels, intégrant les meilleurs outils de l'écosystème frontal. Nodejs (un serveur frontal écrit purement en js, similaire à tomcat est un serveur java écrit en pur java) Vue VueRouter webpack yarn

• Un ensemble d'interfaces utilisateur entièrement graphiques pour créer et gérer des projets Vue.js

8.4, installation de Vue CLI

1. Préparation de l'environnement

# 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. Installer des échafaudages

# 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. Le premier projet d'échafaudage de 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. Comment développer un échafaudage de vue

Remarque: tout dans le développement vue est un composant

La commande npm start doit être dans le fichier courant pour utiliser cette commande