MAC+PyCharm+Flask+Vue.js搭建系統

配置node.js+nvm+npm

訪問github官方地址,根據官方的文檔來安裝Mac版本的nvm,click here

這裡建議用nvm安裝管理Node.js

cURL:

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

Wget:

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

nvm安裝好後,重啟終端,然後安裝Node.js:

nvm ls-remote

使用上述命令來查看遠程node版本,然後根據需要安裝最新版本的Nodejs:

nvm install 15.3.0

安裝完成之後可以使用

nvm list

來查看已經安裝的nodejs版本,並且使用

nvm use 版本號

來使用對應版本的nodejs。

nvm use 15.3.0

可以使用如下命令查看當前node版本

node -v

npm切換淘寶鏡像

臨時的

臨時使用的命令:

npm --registry https://registry.npm.taobao.org install express

長久的

通過如下面命令:

npm config set registry https://registry.npm.taobao.org

配置完成之後,可以使用如下命令來得到當前的配置。

npm config get registry

安裝Vue.js

這裡我在我的node.js=15.3.0進行安裝vue.js。

安裝vue-cli腳手架構建工具:

npm install -g @vue-cli
npm install -g @vue/cli-init

在安裝好輸入如下命令驗證是否成功:

vue --version // 如果有版本號,則證明安裝成功瞭

安裝webpack:

npm install -g webpack

創建並運行Vue.js項目

在線初始化

使用cd命令進入項目目錄,然後使用如下命令來初始化項目(下載template):

vue init webpack visProject

然後進入項目目錄, 安裝項目依賴得到node-modules目錄:

npm install

離線方式

由於使用上述方式,一直顯示在downloading template,這裡使用的是webpack作為template,因此我考慮使用離線的方式進行初始化。

首先先去下載webpack, 可以在gitee下載,下載鏈接:click here
下載完成之後,在用戶目錄下面中的隱藏文件中找一下是否有.vue-templates文件夾,如果沒有的話使用如下命令創建一個

mkdir .vue-templates

創建完成之後,將下載好的文件解壓之後,改名成webpack,然後將文件夾放在該目錄下。然後回到你之前的目錄輸入如下命令來離線初始化:

vue init webpack 項目名 --offline

初始化配置如下:

figure.1

初始化之後使用如下命令,將當前執行環境添加到node_modules文件夾下:

npm install

運行項目

在完成上述配置之後,使用cd進入項目文件夾,使用如下命令來對項目進行編譯:

npm run dev

編譯完成之後, 就可以通過localhost來訪問瞭。出現如下頁面表示運行成功瞭.

figure.3

src文件以及作用

figure.4

解決打不開的問題

這裡由於默認的我8080端口被占用瞭,因此可以通過修改配置文件,來給它分配新的端口來解決。

配置文件目錄: ~/config/index.js

將裡面dev一類下的port對應的端口號修改為8083即可.

figure.2

然後使用下面命令重新進行編譯即可:

npm run dev

配置Flask

這裡使用的IDE工具是:PyCharm,關於Python環境的搭建這裡就不過多贅述瞭,網上有很多教程。

安裝Flask

使用如下命令安裝flask庫: 這裡我使用的是Anaconda進行包管理。

conda install flask

但是這裡,我使用PyCharm創建一個新的項目的話,可以選擇直接創建一個flask項目,選擇如下:

figure.5

這樣的話,是會自動在選擇的解釋器中安裝flask的。

這裡我使用的前者,因此我需要手動安裝flask,安裝完之後,使用PyCharm來創建一個新的Flask項目,如上圖所示,創建完成之後,我們會得到如下內容:

figure.6

運行app.py文件,我們可以通過訪問http://127.0.0.1:5000/來得到一下界面。

figure.7

這表明我們配置完成瞭。綜上我們分別配置好瞭vue和flask,後面會接著將如何使用。

到此這篇關於MAC+PyCharm+Flask+Vue.js搭建系統的文章就介紹到這瞭,更多相關Flask Vue.js搭建系統內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: