軟件及環境安裝
一、 安裝pycharm並破解
-
安裝官方pycharm
-
下載jetbrains-agent.jar
-
將jetbrains-agent.jar拷貝到pycharm安裝路徑bin下，如：C:\Program Files\JetBrains\PyCharm 2019.3.4\bin
-
在pycharm安裝路徑bin下找到pycharm64.exe.vmoptions並打開，在最后一行加上：
-javaagent:C:\Program Files\JetBrains\PyCharm 2019.3.4\bin\jetbrains-agent.jar -
啟動pycharm，help菜單->register 輸入網上找到的激活碼
二、 安裝npm
- 官網下載，直接安裝即可
三、 在項目中創建前端
- 打開pycharm，創建django項目，名字叫：django01，並在項目中創建前端
1. 安裝vue-cli:
-
打開terminal在django目錄下：
-
命令：
npm install vue-cli --global -
ps 使用npm或npm -v 可以查看是否安裝npm及版本
2.初始化前端
-
執行命令：
vue init webpack front(front為前端名字，可以任意取)，執行后如下：Project name front
? Project description A Vue.js project
? Author michael
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No //ESLint可以不設置，主要是檢查代碼書寫是否規范
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run 'npm install' for you after the project has been created? (recommended) np
3. 進入front目錄
- 命令：
cd front - 用途：前端安裝任何插件，都要在front目錄下執行命令
1. 安裝npm依賴
- 命令：
npm install
2. 運行前端
- 命令：
npm run dev - 按ctrl+C結束運行
3. 安裝axios
- 命令：
npm install axios --save - 用途：用於前端頁面向后端發送ajax請求,需用的時候才安裝
4. 安裝 vuex
- 命令：
npm install vuex --save - 用途：用於存放全局變量，相當於一個倉庫，任何組件都可以調用
5. 安裝 vue-cookies
-
命令：
npm install vue-cookies --save -
用途：用於存放登錄用戶的用戶名、token等
安裝完成后，在前端front目錄下的package.json文件中可以查看，已安裝的組件和版本。
"dependencies": {
"axios": "^0.19.2",
"vue": "^2.5.2",
"vue-cookies": "^1.7.0",
"vue-router": "^3.0.1"
},