配置node.js+nvm+npm

訪問github官方地址，根據(jù)官方的文檔來安裝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

使用上述命令來查看遠(yuǎn)程node版本，然后根據(jù)需要安裝最新版本的Nodejs：

nvm install 15.3.0

安裝完成之后可以使用

nvm list

來查看已經(jīng)安裝的nodejs版本，并且使用

nvm use 版本號(hào)

來使用對(duì)應(yīng)版本的nodejs。

nvm use 15.3.0

可以使用如下命令查看當(dāng)前node版本

node -v

npm切換淘寶鏡像

臨時(shí)的

臨時(shí)使用的命令:

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

長(zhǎng)久的

通過如下面命令：

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

配置完成之后，可以使用如下命令來得到當(dāng)前的配置。

npm config get registry

安裝Vue.js

這里我在我的node.js=15.3.0進(jìn)行安裝vue.js。

安裝vue-cli腳手架構(gòu)建工具:

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

在安裝好輸入如下命令驗(yàn)證是否成功:

vue --version // 如果有版本號(hào)，則證明安裝成功了

安裝webpack:

npm install -g webpack

創(chuàng)建并運(yùn)行Vue.js項(xiàng)目

在線初始化

使用cd命令進(jìn)入項(xiàng)目目錄，然后使用如下命令來初始化項(xiàng)目(下載template):

vue init webpack visProject

然后進(jìn)入項(xiàng)目目錄, 安裝項(xiàng)目依賴得到node-modules目錄:

npm install

離線方式

由于使用上述方式，一直顯示在downloading template，這里使用的是webpack作為template，因此我考慮使用離線的方式進(jìn)行初始化。

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

mkdir .vue-templates

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

vue init webpack 項(xiàng)目名 --offline

初始化配置如下:

初始化之后使用如下命令，將當(dāng)前執(zhí)行環(huán)境添加到node_modules文件夾下:

npm install

運(yùn)行項(xiàng)目

在完成上述配置之后，使用cd進(jìn)入項(xiàng)目文件夾，使用如下命令來對(duì)項(xiàng)目進(jìn)行編譯:

npm run dev

編譯完成之后, 就可以通過localhost來訪問了。出現(xiàn)如下頁(yè)面表示運(yùn)行成功了.

src文件以及作用

解決打不開的問題

這里由于默認(rèn)的我8080端口被占用了，因此可以通過修改配置文件，來給它分配新的端口來解決。

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

將里面dev一類下的port對(duì)應(yīng)的端口號(hào)修改為8083即可.

然后使用下面命令重新進(jìn)行編譯即可:

npm run dev

配置Flask

這里使用的IDE工具是：PyCharm，關(guān)于Python環(huán)境的搭建這里就不過多贅述了，網(wǎng)上有很多教程。

安裝Flask

使用如下命令安裝flask庫(kù): 這里我使用的是Anaconda進(jìn)行包管理。

conda install flask

但是這里，我使用PyCharm創(chuàng)建一個(gè)新的項(xiàng)目的話，可以選擇直接創(chuàng)建一個(gè)flask項(xiàng)目，選擇如下:

這樣的話，是會(huì)自動(dòng)在選擇的解釋器中安裝flask的。

這里我使用的前者，因此我需要手動(dòng)安裝flask，安裝完之后，使用PyCharm來創(chuàng)建一個(gè)新的Flask項(xiàng)目，如上圖所示，創(chuàng)建完成之后，我們會(huì)得到如下內(nèi)容:

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

這表明我們配置完成了。綜上我們分別配置好了vue和flask，后面會(huì)接著將如何使用。

到此這篇關(guān)于MAC+PyCharm+Flask+Vue.js搭建系統(tǒng)的文章就介紹到這了,更多相關(guān)Flask Vue.js搭建系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論