Django+Vue.js框架快速搭建web項目


一、vue環境搭建
1、下載安裝node.js。
2、安裝淘寶鏡像cnpm,在命令窗口輸入:

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

3、安裝Vue,在命令窗口輸入:

cnpm install vue

4、安裝vue-cli腳手架構建工具,在命令窗口輸入:

cnpm install -g vue-cli

至此vue環境配置完成。

二、構建vue項目
1、利用vue新建vue項目,打開Django項目,在PyCharm工具下Terminal中輸入:

vue-init webpack “項目名稱(frontend)”

2、安裝vue項目的依賴包,進入到項目的frontend下進行安裝(耗時較長),具體操作如下:

1、cd frontend
2、cnpm install

三、host與port配置
1、打開frontend->config->index.js,配置host與port,如下圖所示:

2、本地配置hosts文件,如下圖所示:

四、跨域配置

1、配置django-cors-headers,在項目終端輸入:

pip install django-webpack-load

2、在項目中的conf/default.py中配置,如下如所示:

五、項目文件配置

1、在frontend/src/component文件夾下新建一個名為Library.vue的組件:

 2、文件路徑配置

六、項目運行,一定要進入到frontend路徑下才能運行:

npm run dev

運行效果如下圖:

至此,web項目搭建完成。

七、功能完成后需要編譯,進行webpack打包,命令如下:

nom run build

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM