Vue cli4 のインストールと構築 (vue+ts) プロジェクト ディレクトリ

環境要件

Vue CLI には Node.js 8.9 以降が必要です (8.11.0 以降を推奨)。nvm または nvm-windows を使用して、同じコンピュータ上の複数のノード バージョンを管理できます。ローカル コンピューター ノード バージョン 14.11.0 (nvm によって管理されるノード バージョンを使用)

vue-cli をインストールする

この新しいパッケージは、次のコマンドのいずれかを使用してインストールできます。

	npm install -g @vue/cli
	yarn global add @vue/cli

インストールされているバージョンの表示コマンド

	vue --version

現在インストールしているバージョンは4.5.6です

プロジェクトを作成する

次のコマンドを実行して新しいプロジェクトを作成します。

	vue create frontName

構成オプションの一部は、ユーザー自身のニーズによって異なります。
構成する項目を選択するには、↑ ↓ 矢印を使用します。スペースを押して選択し、a を押してすべてを選択し、i を押して反転し、スペースを押して選択してキャンセルします。私は 3.0 を正式に学習していないため、npm または Yarn を選択するためにまだ 2.x バージョンの Vue を使用しています。ビルド後の初期プロジェクト構造は次のようになり

ます。

├── shims-tsx.d.ts              // 相关 tsx 模块注入
├── shims-vue.d.ts              // Vue 模块注入
shims-tsx.d.ts，允许你以 .tsx结尾的文件，在 Vue项目中编写 jsx代码
shims-vue.d.ts 主要用于 TypeScript 识别 .vue 文件， Ts默认并不支持导入 vue 文件，这个文件告诉 ts导入 .vue 文件都按 VueConstructor<Vue>处理。

├── tests                           // 测试用例
├── .eslintrc.js                    // eslint 相关配置
├── .gitignore                      // git 忽略文件配置
├── babel.config.js                 // babel 配置
├── postcss.config.js               // postcss 配置
├── package.json                    // 依赖
└── tsconfig.json                   // ts 配置

その後、大規模プロジェクトの構造に合わせてプロジェクト構造を構築します。

 ├── utils                       // 工具方法(axios封装，全局方法等)
 
 ├── README.md                       // 项目 readme
 
 ├── vue.config.js                   // webpack 配置

githubアドレス：https://github.com/peiyu-ye/front-template