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 をデプロイします

推薦する

MySQL でグループ化した後、各グループの最大値を取得する詳細な例

MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

Docker で Maven プロジェクトをより速くビルドする

目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....

Linux 論理ボリューム管理 (LVM) の使用法の概要

ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

Vue カスタム オプション時間カレンダー コンポーネント

この記事の例では、参考のためにvueカスタムオプションタイムカレンダーコンポーネントの具体的なコード...

MySQL SQL 最適化チュートリアル: IN クエリと RANGE クエリ

まず、in() クエリについて説明します。 「High Performance MySQL」では、イ...

Django 2.2 を MySQL データベースに接続する方法

1. プロジェクトの実行時に報告されるエラー情報は次のとおりです。 ファイル "/home...

共有サイドバーを実装するためのネイティブJS

この記事では、ネイティブ JS で実装された共有サイドバーを紹介します。効果は次のとおりです。 以下...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...