vue+django 生鮮項目 （一）開發環境搭建

vue+django2.0.2-rest-framework 生鮮項目

---

 

一、開發環境搭建

1.虛擬環境（virtualenv）的安裝與配置

　virtualenv介紹：每個應用可能需要各自擁有一套獨立的Python運行環境。virtualenv就是用來為一個應用創建一套隔離的Python運行環境。

　virtualenv優點：

　　1.使不同應用開發環境獨立

　　2.環境升級不影響其他應用，也不會影響全局的python環境

　　3.它可以防止系統中出現包管理混亂和版本的沖突

　

 　 1）window下安裝virtualenv

　　運行cmd，進入終端，執行：pip install virtualenv ，進行安裝

　　

 　　1.1）virtualenv使用，py3下創建的虛擬環境：

#1、創建虛擬環境：
C:\Users\Administrator> virtualenv vltest  # 在當前目錄創建名為vltest的虛擬環境
#此時提示：using base prefix ‘c:\\python3.6'
#路徑: C:\Users\Administrator\vltest\Scripts\python.exe

#2、進入虛擬環境：
C:\Users\Administrator>cd vltest/Scripts

#3、執行 activate.bat ，進入虛擬環境
C:\Users\Administrator\vltest\Scripts>activate.bat
#回車后顯示：（vltest）C:\Users\Administrator...，前面括號即表示已經進入虛擬環境

#4、此時再執行python查看，會顯示python版本，並進入虛擬環境中的python環境
（vltest）
 C:\Users\Administrator\vltest\Scripts>python

#5、退出虛擬環境，ctrl+z 退出python環境
（vltest）
 C:\Users\Administrator\vltest\Scripts>deactivate.bat

 

注意：如需更換其他python版本（python2），如下操作：

# 新建虛擬環境 ，-p：表示指定python版本
virtualenv -p python2路徑 文件名
# 例：
C:\Users\Administrator> virtualenv -p C:\Python3.6\python.exe vltest

 

 　 2）linux下安裝virtualenv

　　2.1）安裝

sudo apt-get install python-virtualenv

 

　　 2.2）使用

# py2版本

# 1、創建虛擬環境 ，默認啟用python版本為，python2
virtualenv py2    # 路徑：/home/nan/py2/bin/python2

# 2、進入虛擬環境bin目錄下
cd py2/bin

# 3、執行命令進入虛擬環境
source activate
# 回車后顯示：(py2) nan@nan-virtual-machine:~/py2/bin$

# 4、退出虛擬環境
deactivate

# py3版本
# 同window操作
virtualenv -p python3路徑 文件名
# 例：
virtualenv -p /usr/bin/python3 py3test

 

2、virtualenvwrapper的安裝

 作用：簡化virtualenv 創建虛擬環境的步驟

 

　 1）window下安裝及使用

# virtualenvenwrapper 安裝
pip install virtualenvwrapper-win

mkvirtualenv DjangoProject    #創建虛擬環境，會直接進入虛擬環境，默認python版本為python2，如沒有則用3版本，省去virtualenv創建虛擬環境的步驟

workon                       #查看有哪些虛擬環境

workon DjangoProject      #進入創建的虛擬環境

deactivate.bat      #退出虛擬環境

activate.bat        #激活虛擬環境



#使用python3版本創建虛擬環境
mkvirtualenv --python python路徑 文件名
#例：
mkvirtualenv --python=/C:user/python3.6/bin/python.exe py3test

 此時新建的DjangoProject虛擬環境存於C:\Users\Administrator\Envs中，可以通過環境變量設置，以后創建虛擬環境，均在自己要求的文件夾內創建，例，以后創虛擬環境，都保存到 G:\Envs文件夾中

環境變量設置

• G盤新建文件夾Envs
• 新建環境變量：以后創建虛擬環境會自動保存到這個路徑
• 重開下cmd，再創建虛擬環境就會存放到新設置的位置上了

　　

 

2）linux下安裝及使用 

　1.安裝

# 1、安裝 ,用pip3安裝，屬python3版本，配置文件時需注明py3版本安裝 ，使用python2版本的話可以直接用：pip install virtualenvwrapper
pip3 install virtualenvwrapper  

pip install virtualenvwrapper   #python2

 　2.找到配置文件路徑：

　　sudo find / -name virtualenvwrapper.sh   #找到virtualenvwrapper.sh文件路徑

　或者執行指令：which virtualenvwrapper.sh ，同樣可找到virtualenvwrapper.sh文件路徑

　　

　　配置 ~/.bashrc文件：添加以下內容

export WORKON_HOME=$HOME/.envs  #虛擬環境都保存到 .envs文件夾中

VIRTUALENVWRAPPER_PYTHON='/usr/bin/python3'  #linux啟動默認python2版本，而virtualenvwrapper安裝是使用pip3安裝，存於py3中，而py2沒有，因此如果使用py2則需注明這句代碼以防報錯

source /usr/local/bin/virtualenvwrapper.sh  #啟動文件路徑

 

 　　

　　3.執行命令：source ~/.bashrc    #更新配置

　　4.現可以正常創建虛擬環境了： 

mkvirtualenv py2test  #創建虛擬環境，並進入虛擬環境，默認python版本為python2

#此時創建好的虛擬環境在 ~/.envs文件夾中，ls -a可查看


workon  #查看虛擬環境

workon py2scrapy  #進入虛擬環境

deactivate #退出虛擬環境

rm -rf py2scrapy  #刪除虛擬環境，需進入到.envs文件夾執行


#手動指定使用python3版本
mkvirtualenv --python=/usr/bin/python3 py3scrapy

 使用python3版本：

　　

 

 

  知識充電：

 　 一、profile、bash_profile、bashrc的用途與區別

 　　　　

1. 1. profile文件

   1.1 profile文件的作用

   profile(/etc/profile)，用於設置系統級的環境變量和啟動程序，在這個文件下配置會對所有用戶生效。

   當用戶登錄(login)時，文件會被執行，並從/etc/profile.d目錄的配置文件中查找shell設置。

   1.2 在profile中添加環境變量

   一般不建議在/etc/profile文件中添加環境變量，因為在這個文件中添加的設置會對所有用戶起作用。

   當必須添加時，我們可以按以下方式添加：

   如，添加一個HOST值為linuxprobe.com的環境變量：

   export HOST=linuxprobe.com

   添加時，可以在行尾使用;號，也可以不使用。

   一個變量名可以對應多個變量值，多個變量值需要使用:進行分隔。

   添加環境變量后，需要重新登錄才能生效，也可以使用source命令強制立即生效：

   source /etc/profile

   查看是否生效可以使用echo命令：

   $ echo $HOST

   linuxprobe.com

2.  

   2. bashrc文件

   bashrc文件用於配置函數或別名。bashrc文件有兩種級別：

   系統級的位於/etc/bashrc、用戶級的位於~/.bashrc，兩者分別會對所有用戶和當前用戶生效。

   bashrc文件只會對指定的shell類型起作用，bashrc只會被bash shell調用。

3.  

   3. bash_profile文件

   bash_profile只對單一用戶有效，文件存儲位於~/.bash_profile，該文件是一個用戶級的設置，可以理解為某一個用戶的profile目錄下。

   這個文件同樣也可以用於配置環境變量和啟動程序，但只針對單個用戶有效。

   和profile文件類似，bash_profile也會在用戶登錄(login)時生效，也可以用於設置環境變理。

   但與profile不同，bash_profile只會對當前用戶生效。

4.  

   4. 差異總結

   4.1 首先讀入全局環境變量設定檔/etc/profile，然后根據其內容讀取額外的設定的文檔，如/etc/profile.d和/etc/inputrc;

   4.2 根據不同使用者帳號，於其家目錄內讀取~/.bash_profile;

   讀取失敗則會讀取~/.bash_login;

   再次失敗則讀取~/.profile(這三個文檔設定基本上無差別，僅讀取上有優先關系);

   4.3 最后，根據用戶帳號讀取~/.bashrc。（對於預裝的linux系統選擇《Linux就該這么學》書籍提供的，可免費下載。）

   至於~/.profile與~/.bashrc都具有個性化定制功能，但~/.profile可以設定本用戶專有的路徑、環境變量等，它只能登入的時候執行一次。

   ~/.bashrc也是某用戶專有設定文檔，可以設定路徑、命令別名，每次shell script的執行都會使用它一次。

   這三種文件類型的差異用一句話表述就是：

   /etc/profile，/etc/bashrc 是系統全局環境變量設定;~/.profile，~/.bashrc用戶家目錄下的私有環境變量設定。

   當登入系統時候獲得一個shell進程時，其讀取環境設定檔如下：

   　　

    

 　 二、python install相關

 　　 國內pythoner安裝時，建議使用python豆瓣的pypi源安裝，安裝會優先使用該站點所存有的鏡像源，能加快安裝速度

 

pip install -i https://pypi.douban.com/simple/ django

　　

 

三、Vue（前端）開發環境搭建

• webstorm
• node.js
• cnpm

1、node安裝

　64 位安裝包下載地址 : https://nodejs.org/zh-cn/download/，直接運行安裝

2、cnpm安裝

　npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安裝依賴

cnpm install
npm install(我用的是這個指令)

4、運行

cnpm run dev

---

 cnpm啟動時遇上的坑：

1、在安裝cnpm依賴時，報下面的錯誤：

E:\angular_study\vue_01>cnpm install
× Install fail! Error: EBUSY: resource busy or locked, symlink 'E:\angular_stud
y\vue_01\node_modules_path-is-absolute@1.0.1@path-is-absolute' -> ‘E:\angular_s
tudy\vue_01\node_modules_babel-core@6.24.1@babel-core\node_modules\path-is-abso
lute’

解決方法：

# 使用以下命令就可以使用npm命令並使用淘寶的鏡像了，是持久使用

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

# 再安裝依賴
npm install

 

2、如果上述問題無法解決，或解決了重新安裝時遇到這樣的坑：

　

解決方法：

　1）cnpm cache clean --force

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

　3) npm install

 

3、vue報錯：module.js:471 throw err;...

解決方法：

　1）先刪除文件夾node_modules

　2）執行指令，如果第一個不行，就執行第二個：　

cnpm cache clean

 

npm cache verify

　3）重新安裝依賴：

　　npm install

　4）運行項目：

　　npm run dev

至此，應該就沒問題了。

運行成功頁面效果：

　

---