Vue CLI ------ スキャフォールディング

導入 

Vue CLI は、Vue.js に基づく迅速な開発のための完全なシステムです。Vue scaffolding を使用した後、開発するページは完全なシステム (プロジェクト) になります。

 環境整備

# 1.下载nodejs
	http://nodejs.cn/download/
 
# 2.配置nodejs环境变量
	1.windows系统:
	 	计算上右键属性---->  高级属性 ---->环境变量 添加如下配置:
		NODE_HOME=  nodejs安装目录
        PATH    = xxxx;%NODE_HOME%
    2.macos 系统
    	推荐使用.pkg安装直接配置node环境
 
# 3.验证nodejs环境是否成功
	node -v 
 

 足場の設置

 Vue Cli官方网站
	https://cli.vuejs.org/zh/guide/

 安装vue Cli 脚手架
	npm install -g vue-cli    //安装2.x版本脚手架，默认为2.9.6
    npm install -g @vue/cli  //安装3.x版本脚手架  默认为 @vue/cli 5.0.4

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

查看本地脚手架的版本vue -V
     以 vue-cli  开头的 是2.xxx版本
     以 @vue/cli 开头的 是3.xxx版本

vue 足場バージョン 2 プロジェクト    

最初の一歩：

最初に vue-cli が環境にインストールされているかどうかを確認し、ターミナルでコマンド vue -V を入力します。

ステップ2：

大きいバージョンが 2 か 3 かを確認します。

3 番目のステップ:

バージョン 2 (vue-cli で始まる) の場合は、作成を開始し、ターミナルで vue init webpack プロジェクト名を入力すると、次のファイルとファイル名が自動的に生成されます。

	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 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

4番目のステップ:

プロジェクトを開始し、プロジェクト ターミナルでコマンド npm start / npm run file name を入力します

       (ファイル名はpackage.jsonファイル内の「scripts」にあるファイル名です)

5番目のステップ:

ページ上のプロジェクトにアクセスし、プロジェクトが正常に開始されると、ターミナルに http://localhost:8080 のようなパスが表示されます

ステップ 6:

プロジェクトを終了するには、ターミナルで ctrl+c を実行してプロジェクトを終了します。

ステップ 7:

プロジェクトをパッケージ化するには、ターミナルでコマンド npm run build を入力します。完了すると、パッケージ化されたプロジェクトであるプロジェクトに dist ファイルが表示されます。

ステップ 8:

デスクトップの「Package the file and store it here」フォルダにdistファイルをコピーし、元のdistファイルを削除し、ターミナルでプロジェクトを起動

ステップ 9:

ターミナルにコマンド node .\app.js を入力して、プロジェクトにアクセスします

vue 足場バージョン 3 プロジェクト    

最初の一歩：

最初に vue-cli が環境にインストールされているかどうかを確認し、ターミナルでコマンド vue -V を入力します。

ステップ2：

大きいバージョンが 2 か 3 かを確認します。

3 番目のステップ:

バージョン 3 (@vue/cli で始まる) の場合は、作成を開始し、ターミナルで vue create プロジェクト名を入力すると、次のファイルとファイル名が自動的に生成されます。

 

4番目のステップ:

ターミナルで下図のバージョンを選択

 

package.json ファイル内のすべてのプラグインと eslint に関する情報をアンインストールします (スキップ可能)

5番目のステップ:

プロジェクトを開始し、プロジェクト ターミナルでコマンド npm run serve を入力します

       (ファイル名はpackage.jsonファイル内の「scriptsスクリプト」にあるファイル名です)

 

5番目のステップ:

ページ上のプロジェクトにアクセスし、プロジェクトが正常に開始されると、ターミナルに http://localhost:8080 のようなパスが表示されます

ステップ 6:

プロジェクトを終了するには、ターミナルで ctrl+c を実行してプロジェクトを終了します。

ステップ 7:

プロジェクトをパッケージ化するには、ターミナルでコマンド npm run build を入力します。完了すると、パッケージ化されたプロジェクトであるプロジェクトに dist ファイルが表示されます。

ステップ 8:

デスクトップの「Package the file and store it here」フォルダにdistファイルをコピーし、元のdistファイルを削除し、ターミナルでプロジェクトを起動

ステップ 9:

ターミナルにコマンド node .\app.js を入力して、プロジェクトにアクセスします

 Vue scaffolding バージョン 3 プロジェクトは HBuilder を使用して作成されます

最初の一歩：

HBuilder APP を開きます ------ 左上隅をクリックして作成します ------ プロジェクトをクリックします

ステップ2：

プロジェクト名入力ボックスにプロジェクト名を入力します ----- 最後のプロジェクト テンプレートをクリックします ----- [作成] をクリックします

3 番目のステップ: 

作成が完了すると、以下のファイルとフォルダができます ----- フォルダを右クリック ----- 「コマンドラインウィンドウを使用してディレクトリを開く」をクリックしてターミナルを開きます

4番目のステップ: 

プロジェクトを開始し、ターミナルで npm run serve と入力します   

5番目のステップ:

ページ上のプロジェクトにアクセスし、プロジェクトが正常に開始されると、ターミナルに http://localhost:8080 のようなパスが表示されます

ステップ 6:

プロジェクトを終了するには、ターミナルで ctrl+c を実行してプロジェクトを終了します。

ステップ 7:

プロジェクトをパッケージ化するには、ターミナルでコマンド npm run build を入力します。完了すると、パッケージ化されたプロジェクトであるプロジェクトに dist ファイルが表示されます。

ステップ 8:

デスクトップの「Package the file and store it here」フォルダにdistファイルをコピーし、元のdistファイルを削除し、ターミナルでプロジェクトを起動

ステップ 9:

ターミナルにコマンド node .\app.js を入力して、プロジェクトにアクセスします