vueCliスキャフォールディングwebpcakプロジェクトを使用して使用する（エントリーレベルのホイール作成）

8. VueCliスキャフォールディング

注：コンパイラーのアイデアwebstromはvueスキャフォールディングを使用できます

8.1CLIとは

CLIコマンドラインインターフェイス（コマンドラインインターフェイス）は、グラフィカルユーザーインターフェイスが普及する前に最も広く使用されていたユーザーインターフェイスです。

8.2。VueCLIとは

Vue CLIは、Vue.jsに基づく迅速な開発のための完全なシステムです。Vueスキャフォールディングを使用した後、私たちが開発したページは完全なシステム（プロジェクト）になります

8.3。VueCLIスキャフォールディングの利点

• vue-cliを介してインタラクティブなプロジェクトの足場を構築します。bootstarp css js jquery jsは、コマンドを実行して関連する依存関係をダウンロードします

• 素早くゼロコンフィギュレーションのプロトタイプ開発を開始して、@ VUE / CLI + @ VUE / CLIサービス・グローバルVUEのページvue.js vue.router axios（依存関係が1つのコマンドでインポートすることができます）

• 実行時の依存関係（@ vue / cli-service）、依存関係：

  • アップグレード可能（コマンドで実行可能）
  • 妥当なデフォルト構成でwebpackに基づいて構築されています（webpackプロジェクトのパッケージ化方法でコンパイルされたプロジェクトのソースコード====>直接使用するためにサーバーにデプロイされます）
  • プロジェクト構成ファイルを介して構成できます（デフォルト構成ファイル、必要なプロジェクト環境を実現するためにデフォルト構成ファイルを変更することにより）
  • プラグインを介して拡張できます（vue-v-charts elementui）

• フロントエンドエコシステムで最高のツールを統合した、公式プラグインの豊富なコレクション。Nodejs（tomcatと同様に純粋にjsで記述されたフロントエンドサーバーは純粋なJavaで記述されたJavaサーバーです）Vue VueRouter webpackyarn

• Vue.jsプロジェクトを作成および管理するための完全なグラフィカルユーザーインターフェイスのセット

8.4、VueCLIのインストール

1.環境への備え

# 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.足場を設置します

# 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.最初の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.vueスキャフォールディングを開発する方法

注：vue開発のすべてがコンポーネントです

このコマンドを使用するには、コマンドnpmstartが現在のファイルに含まれている必要があります