软件及环境安装
一、 安装pycharm并破解
-
安装官方pycharm
-
下载jetbrains-agent.jar
-
将jetbrains-agent.jar拷贝到pycharm安装路径bin下,如:C:Program FilesJetBrainsPyCharm 2019.3.4in
-
在pycharm安装路径bin下找到pycharm64.exe.vmoptions并打开,在最后一行加上:
-javaagent:C:Program FilesJetBrainsPyCharm 2019.3.4injetbrains-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"
},