MAC+PyCharm+Flask+Vue.js搭建系統
配置node.js+nvm+npm
訪問github官方地址，根據官方的文件來安裝Mac版本的nvm，click here
這裡建議www.cppcns.com用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
使用上述命令來查http://www.cppcns.com看遠端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
初始化配置如下:
初始化之後使用如下命令，將當前執行環境新增到node_modules資料夾下:
npm install
執行專案
在完成上述配置之後，使用cd進入專案資料夾，使用如下命令來對專案進行編譯:
npm run dev
編譯完成之後,就可以通過localhost來訪問了。出現如下頁面表示執行成功了.
src檔案以及作用
解決打不開的問題
這裡由於預設的我8080埠被佔用了，因此可以通過修改配置檔案，來給它分配新的埠來解決。
配置檔案目錄: ~/config/index.js
將裡面dev一類下的port對應的埠號修改為8083即可.
然後使用下面命令重新進行編譯即可:
npm run dev
配置Flask
這裡使用的IDE工具是：PyCharm，關於python環境的搭建這裡就不過多贅述了，網上有很多教程。
安裝Flask
使用如下命令安裝flask庫: 這裡我使用的是Anaconda進行包管理。
conda install flask
但是這裡，我使用PyCharm建立一個新的專案的話，可以選擇直接建立一個flask專案，選擇如下:
這樣的話，是會自動在選擇的直譯器中安裝flask的。
這裡我使用的前者，因此我需要手動安裝flask，安http://www.cppcns.com裝完之後，使用PyCharm來建立一個新的Flask專案，如上圖所示，建立完成之後，我們會得到如下內容:
執行app.py檔案，我們可以通過訪問http://127.0.0.1:5000/來得到一下程式設計客棧介面。
這表明我們配置完成了。綜上我們分別配置好了vue和flask，後面會接著將如何使用。
到此這篇http://www.cppcns.com關於MAC+PyCharm+Flask+Vue.js搭建系統的文章就介紹到這了,更多相關Flask Vue.js搭建系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！