vueでのフォルダー構造の設定-jsチュートリアル-php.cn

vueでのフォルダー構造の設定

亚连

リリース： 2018-06-20 18:04:36

オリジナル

1643 人が閲覧しました

この記事は主に、Vue プロジェクトのフォルダー構造構成に関する関連情報を要約し、サンプルコードを通じて詳しく紹介します。これは、学習や仕事に必要なすべての人の参考と学習に役立ちます。以下でフォローして一緒に学びましょう。

前書き

私はしばらくの間、vue を使用してバックエンド管理システムを開発してきましたが、その過程で vue 自体とモジュール化された標準化された開発についてより深く理解できるようになりました。他のニーズを支援したいと考えています。プロジェクトを開発する人々は役に立ちます。

vue.jsをベースとしたフロントエンド開発環境は、フロントエンドとバックエンドを分離した上で、シングルページアプリケーションの開発に使用されます。開発中にES Nextやscssなどの最新の言語機能を使用できます。以下のエディターで学習してみましょう。

プロジェクト構成

まず、使用するフレームワークとコンポーネントライブラリを決定したら、まずそれらを一般的に理解し、基本的にドキュメントに精通している必要があります。この開発では、vue、vuex、axios、elementUI が使用されます。

その後、公式ガイドラインに従い、vue-cli を使用してプロジェクト内で vue プロジェクトをビルドし、上記のドキュメントに従って変更してみてください:

# 安装依赖库，建议指定 vue 和 element 版本，避免版本升级带来意料之外的 bug
$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios
#全局安装脚手架
$ npm install -g vue-cli 
# 创建一个基于 webpack 模板的新项目my-project
$ vue init webpack my-project
# 进入项目目录
$ cd my-project
# 安装依赖
$ npm install
# 运行项目
$ npm run dev

ログイン後にコピー

実行後、次のページが表示されます。プロジェクト環境が正常に構築されたことを示します:

プロジェクト構造

構築が成功したら、エディタを使用してプロジェクトディレクトリを開きます。これはおおよその構造です:

の意味関連ファイルとフォルダー:

build フォルダー: 内部には、エントリーファイル、出力ファイル、使用されるモジュールなどを含む、Webpack の開発とパッケージ化の関連設定があります。
config フォルダー: 主に静的リソースのパスを指定します。開発とパッケージ化、圧縮するファイルの種類、開発に使用するポート番号、ドメインを越えて API をリクエストするための仮想サーバーの開発と使用など。
node_modules: プロジェクトの依存関係ライブラリ;
src フォルダー: コンポーネントの追加や変更などの主要な操作はすべてこのフォルダーで行われます。これについては、以下で詳しく説明します。静的ファイルフォルダー: 変更されないリソースが配置され、最終的なパッケージングディレクトリに直接コピーされる静的リソースフォルダー (デフォルトは dist/static)。 ins;
.editorconfig: インデントにスペースまたはタブを使用するか、インデントの長さが 2 桁であるか 4 桁であるか、およびその他のコードスタイルを規定するコード仕様ファイル。これを使用するには、対応するプラグインをダウンロードする必要があります。エディターで -in ;
.eslintignore: eslint によって無視されるファイルを指定します。
: eslint の検出ルールを設定し、そのルールに従ってコードを強制的に記述します。 .gitignore: git によって無視されるファイルを指定します。すべての git 操作は有効になりません。
.postcssrc: 使用される CSS プリコンパイラーを指定します。これは、デフォルトでブラウザーのプレフィックスを自動的に補完します。
favicon.ico: ブラウザータブのタイトルアイコンの横にある小さなアイコン。自分で貼り付ける必要があります。
index.html: ホームページファイル。プロジェクトの実行中に、src フォルダーに生成されたコンポーネントが表示されます。このファイルに自動的に挿入されます。
LICENSE: プロジェクト宣言ライセンス;
package-lock.json: node_modules または package.json が変更されたときに自動的に生成されるファイル。このファイルの主な機能は、プロジェクト開発プロセス中に一部の依存関係で発生した更新を無視しながら、現在インストールされているパッケージの依存関係を判断し、その後の再インストール時に同じ依存関係を生成できるようにすることです。 : プロジェクトの開発と生成を指定します。環境内で使用する必要がある依存ライブラリを指定します。
README.md: これは、プロジェクト開発プロセス中に注意を払う必要があるものについての指示を提供するメモファイルに相当します。
src フォルダー構造
src src フォルダー内のフォルダー設定は柔軟であり、自分の習慣に従って行うことができ、同じである必要はありません。このプロジェクトの構造は次のとおりです:
http: バックエンド API に関連するファイルを配置します。これには、axios ライブラリのインスタンス構成ファイルと、構成された axios インスタンスを使用して API にアクセスしてデータを取得する関数のコレクションが含まれています。
mixins: ミキシングオプションを配置するファイル。具体的には、コンポーネント内で参照されると、繰り返しメソッドを記述することなくコンポーネント上で動作します。
pages: メインページが配置されるコンポーネント。たとえば、ログインページ、ユーザー情報ページなどです。通常、ここでのコンポーネントはいくつかの構造を記述し、その後、共通のモジュールコンポーネントを導入して完全なページを形成します。
router: ルーティング設定ファイルを配置し、ルーティングに対応するコンポーネントを指定します。 vuex に必要な関連ファイル、パブリック状態の設定、ミューテーションなど。シングルページアプリケーション;
main.js: グローバルな状況に影響を与えるエントリ js ファイル。その機能は、グローバルに使用されるライブラリ、パブリックスタイルとメソッド、ルーティングの設定などを導入することです。
上記は私があなたのためにまとめたものです。
vux を vue.js に統合してプルアップ読み込みとプルダウン更新を実装する方法