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

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

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

図1

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

npmインストール

プロジェクトを実行する

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

npm 実行 dev

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

図3

src ファイルとその機能

図4

開かない問題を解決する

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

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

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

図2

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

npm 実行 dev

Flaskの設定

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

Flaskをインストールする

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

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

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

図5

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

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

図6

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

図7

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

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

以下もご興味があるかもしれません:
  • pycharm 2020.2.4 pip install Flask がエラーを報告: 終了コードがゼロ以外
  • Pycharmは、Flaskを閉じた後もサービスにアクセスできるという問題を解決します
  • Pycharmを使用してFlaskアプリケーションを実行する詳細なチュートリアル

<<:  MySQL Community Server 5.6.39 のインストール方法

>>:  Docker はリモート接続のサンプルコードを実現するために MySQL をデプロイします

推薦する

Linux (Centos7) に mysql8.0.18 をインストールするチュートリアル図

1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

1. 指定されたディレクトリにリポジトリを作成し、ディレクトリ全体を保存してください。この記事のサン...

衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...

CD コマンドを使わずに Linux でディレクトリ/フォルダに入る方法

ご存知のとおり、cd コマンドがないと、Linux でディレクトリを切り替えることはできません。それ...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

MySQL で '%' を含むフィールドをクエリする方法の詳細な説明 (ESCAPE の使用法)

SQLのlike文では、例えば SELECT * FROM user WHERE username...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

mysql binlog (バイナリログ) を表示する方法

たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...

Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します

目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...

MySQL 8.0 の新機能の分析 - トランザクション データ ディクショナリとアトミック DDL

序文トランザクション データ ディクショナリとアトミック DDL は、MySQL 8.0 で導入され...

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見(写真)

前回、Taobaoの詳細ページを分析した後(クリックして表示)、ショッピングモールの基本テンプレート...

Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル

目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...

MySQL で 1 つのテーブルのフィールドを使用して別のテーブルのフィールドを更新する方法

1. 1列を変更する 学生の更新、都市c s.city_name = c.name を設定します こ...