MAC+PyCharm+Flask+Vue.js ビルドシステム

node.js+nvm+npm を設定する

公式githubアドレスにアクセスし、公式ドキュメントに従ってMac版のnvmをインストールします。ここをクリックしてください。

Node.jsのインストールと管理にはnvmを使用することをお勧めします。

カール：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

取得:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

nvm をインストールしたら、ターミナルを再起動して Node.js をインストールします。

nvm ls-リモート

上記のコマンドを使用してリモート ノードのバージョンを表示し、必要に応じて Nodejs の最新バージョンをインストールします。

nvm 15.3.0 をインストール

インストールが完了したら、

nvm リスト

インストールされているNode.jsのバージョンを表示するには、

nvm 使用バージョン番号

対応するバージョンの nodejs を使用します。

nvm 使用 15.3.0

現在のノードバージョンを表示するには、次のコマンドを使用します。

ノード -v

npmスイッチタオバオミラー

一時的

一時コマンド:

npm --registry https://registry.npm.taobao.org インストール express

長持ちする

次のようなコマンドで:

npm config レジストリを設定します https://registry.npm.taobao.org

設定が完了したら、次のコマンドを使用して現在の設定を取得できます。

npm config レジストリを取得する

Vue.jsをインストールする

ここでは、node.js=15.3.0 に vue.js をインストールします。

vue-cli スキャフォールディング構築ツールをインストールします。

vue.js で vue.js をインストールします。
npm をインストール -g @vue/cli-init

インストールが完了したら、次のコマンドを入力して、インストールが成功したかどうかを確認します。

vue --version // バージョン番号があればインストールが成功したことが証明されます

webpack をインストールします。

npm インストール -g webpack

Vue.js プロジェクトを作成して実行する

オンライン初期化

cd コマンドを使用してプロジェクト ディレクトリに入り、次のコマンドを使用してプロジェクトを初期化します (テンプレートをダウンロードします)。

vue init webpack visProject

次に、プロジェクト ディレクトリに入り、プロジェクトの依存関係をインストールして node-modules ディレクトリを取得します。

npmインストール

オフラインモード

上記の方法を採用しているため、ダウンロード中のテンプレートには常に表示されます。ここではテンプレートとしてWebpackを使用しているため、初期化にはオフライン方式を使用することを検討します。

まず、webpackをダウンロードします。giteeからダウンロードできます。ダウンロードリンク: ここをクリック
ダウンロードが完了したら、ユーザー ディレクトリの下の隠しファイルで .vue-templates フォルダーを探します。見つからない場合は、次のコマンドを使用して作成します。

mkdir .vue-templates

作成が完了したら、ダウンロードしたファイルを解凍し、名前を webpack に変更して、フォルダーをディレクトリに配置します。次に、前のディレクトリに戻り、次のコマンドを入力してオフラインで初期化します。

vue init webpack プロジェクト名 --offline

初期設定は次のとおりです。

初期化後、次のコマンドを使用して、現在の実行環境を node_modules フォルダーに追加します。

npmインストール

プロジェクトを実行する

上記の設定が完了したら、cd を使用してプロジェクト フォルダーに入り、次のコマンドを使用してプロジェクトをコンパイルします。

npm 実行 dev

コンパイルが完了すると、localhost 経由でアクセスできるようになります。操作が成功したことを示す次のページが表示されます。

src ファイルとその機能

開かない問題を解決する

ここで、デフォルトのポート 8080 は使用されているため、構成ファイルを変更して新しいポートを割り当てることができます。

設定ファイルディレクトリ: ~/config/index.js

dev カテゴリのポートに対応するポート番号を 8083 に変更するだけです。

次に、次のコマンドを使用して再コンパイルします。

npm 実行 dev

Flaskの設定

ここで使用する IDE ツールは PyCharm です。ここでは Python 環境の設定について詳しく説明しません。インターネット上には多くのチュートリアルがあります。

Flaskをインストールする

次のコマンドを使用して、flask ライブラリをインストールします。ここでは、パッケージ管理に Anaconda を使用します。

conda フラスコをインストールする

しかし、ここで PyCharm を使用して新しいプロジェクトを作成する場合は、次のようにして Flask プロジェクトを直接作成することを選択できます。

この場合、選択したインタープリターに flask が自動的にインストールされます。

ここでは前者を使用するため、Flask を手動でインストールする必要があります。インストール後、上図に示すように、PyCharm を使用して新しい Flask プロジェクトを作成します。作成が完了すると、次のようになります。

app.py ファイルを実行し、http://127.0.0.1:5000/ にアクセスすると次のインターフェースが得られます。

これは設定が完了したことを示します。要約すると、vue と flask をそれぞれ設定しました。後でそれらの使用方法を説明します。

MAC+PyCharm+Flask+Vue.js システム構築に関するこの記事はこれで終わりです。Flask Vue.js システム構築に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。