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

Posted on by

配置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！

推薦閱讀：