一、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