SpringBoot + Vueビルドブログ（1）-vue-cliスキャフォールディングをインストールします

1.環境への準備

まず、開発マシンにnodeJをインストールする必要があります。インストールしたかどうかわからない場合は、次のコマンドを使用して確認できます。

node -v  #查看node版本，检查是否安装node
npm -v
yarn -v

バージョンが正常に表示されている場合は、nodeJsがインストールされていることを意味します。そうでない場合は、ノードの公式Webサイトhttp://nodejs.cn/download/にアクセスして、ノードをダウンロードしてインストールできます。

2. VueCLIグローバルインストール

インストールコマンド：

npm install -g vue-cli   # -g 全局安装

npmの使用は遅くなる可能性があります。cnpm（npmの国内ミラー）を使用できます。cnmpを使用する利点は、将来コンテンツをダウンロードするときに高速になることですが、ダウンロードしたパッケージは最新ではない可能性があります。cnpmをインストールするコマンド：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpmの使用時に問題が発生し、依存関係のダウンロードが失敗する場合があります。続行できない場合は、node_modulesフォルダー内の依存関係を削除し、コマンドを実行して依存関係を再度ダウンロードできます。

インストールが完了したら、次のコマンドを使用してvueのコマンド使用法を表示できます。

vue -h

3、プロジェクトを初期化します

初期化コマンド：

vue init webpack vue-blog(项目名称/文件夹名称)

init：vue-cliを使用してプロジェクトを初期化することを意味します

<template-name>(webpack )：テンプレートの名前を示し、vue-cliは公式に5つのテンプレートを提供します。

webpack-ホットロード、リンティング、検出、CSS拡張などの機能を備えた包括的なwebpack + vue-loaderテンプレート。

webpack-simple-他の関数を含まないシンプルなwebpack + vue-loaderテンプレートで、vue開発環境をすばやく構築できます。

browserify-包括的なBrowserify + vueifyテンプレート。機能には、ホットロード、リンティング、ユニット検出が含まれます。

browserify-simple-シンプルなBrowserify + vueifyテンプレートは、他の機能を含まず、vue開発環境をすばやく構築できます。

-simple：最も単純な単一ページのアプリケーションテンプレートの1つ。

<project-name>(vue-blog)：プロジェクトの名前を識別します。独自のプロジェクトに応じて名前を付けることができます。

コマンドを実行すると、指定した名前のプロジェクトのダウンロードが開始されます。次のプロジェクトパラメータを指定する必要があります。デフォルトのプロジェクト名を直接使用し、vue-routerのインストールを選択します。ESLintはコード品質検査ツールです。ここでインストールすることを選択します。

プロジェクト名：プロジェクト名。変更する必要がない場合は、Enterキーを押します。注：ここでは大文字化は使用できません。

プロジェクトの説明：プロジェクトの説明。デフォルトはA Vue.jsプロジェクトで、Enterキーを直接押します。書き込む必要はありません。

著者：著者、gitを構成する著者がいる場合、彼はそれを読みます。

vue-routerをインストールしますか？vueのルーティングプラグインをインストールするかどうかにかかわらず、Yを選択します。

ESLintを使用してコードをリントしますか？ESLintを使用してコードエラーとスタイルを制限するかどうかにかかわらず、構成するのが最善です。

Nightwatchを使用してe2eテストをセットアップしますか？ユーザー行動シミュレーションテストを実行するためにe2eをインストールするかどうか。

第四に、プロジェクトを開始します

プロジェクトフォルダに入り、依存実行コマンドを実行します。

# 进入项目文件夹
cd vue-blog

# 运行项目-dev方式
npm run dev

プロジェクトが正常にビルドされたら、http：// localhost：8080にアクセスすると、展開が完了したことを示す次のコンテンツが表示されます。

5、プロジェクトファイル構成の概要

ビルド（webpackの初期構成）

config（index.js--プロジェクト構成）

node_modules（プロジェクトに依存するモジュール、コードベース）

src（プログラムファイル）

static（静的ファイルリソース）

テスト（テストコード）

index.html（プロジェクトホームページへのエントリ）

|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
.