凯发真人娱乐

django drf vue 网页开发环境安装(windows/linux) -凯发真人娱乐

2023-10-20,,

博客地址:https://www.cnblogs.com/zylyehuo/

pip install django==3.2

pip install pymysql

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

(一)脚本化引入


(二)单文件引入(vue-cli / vite)

环境搭建

(1)安装 node.js 版本10.0以上(偶数 lts版本)的开发环境

# 安装地址
https://nodejs.org/

检查是否安装成功

查看版本

node -v

(2)安装 nvm(用于管理多个 node.js 版本)

# linux 安装地址
https://github.com/nvm-sh/nvm
# 参考网址
https://www.jianshu.com/p/622ad36ee020 # windows 安装地址
https://www.jianshu.com/p/622ad36ee020

windows 安装部分截图

安装完成以后,查看环境变量是否设置完成

检查是否安装成功

nvm 常用命令

使用 nvm install <版本号> 安装两个版本的 node.js 作为使用

linux 系统下

windows 系统下

(3)注意事项

如果使用nvm工具,则直接可以不用自己手动下载nodejs,如果使用nvm下载安装nodejs的npm比较慢的时候,可以修改nvm的配置文件(在安装根目录下)。
在window系统下如果安装node的时候比较慢,则可以修改一下配置文件:
# 配置文件名:settings.txt
root: c:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: c:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

(4)查看是否安装 npm

在安装node.js完成后,在node.js中会同时安装一个包管理器npm。可以借助npm命令来安装node.js的包。这个工具相当于python的pip包管理器。

npm 常用命令

注意事项:

npm虽然是nodejs官方提供的包管理工具,但事实上并不好用,所以有第三方开发者提供了更好用的yarn包管理器。

(5)安装 yarn 包管理器

ubuntu20.04下安装yarn

# 安装yarn
curl -ss https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn # sudo apt remove yarn # 卸载yarn
# sudo apt autoremove # 卸载yarn相关其他依赖

windows下安装yarn

# 通过npm安装yarn包管理器。
npm install -g yarn # 查看yarn版本
yarn --version # 简写: yarn -v

yarn 常用命令

# 注意事项
package.json类似python的requirments.txt。 yarn默认的包管理服务器在国外,所以第一次使用yarn安装模块时会出现提示是否切换到淘宝镜像站,填写y即可。

输入命令初始化 yarn

(6)安装 vue-cli

可以使用 npm 或 yarn 安装 vue-cli 项目构建工具

npm install -g @vue/cli
# yarn global add @vue/cli # 注意,安装不成功就换成npm # 安装完成以后,可以通过以下命令查看vue/cli的版本
vue -v
# 5.0.8
如果安装速度过慢,一直超时,可以考虑切换国内npm镜像源:http://npm.taobao.org/

(7)安装 vite

cd ~/desktop
npm create vite@latest
# yarn create vite

项目根目录结构

vue 项目执行流程图

在客户端项目根目录下打开终端,使用npm或者yarn安装axios包

npm install axios
yarn add axios

在客户端项目的根目录下,package.json的同级目录

npm install vue-router@next
yarn add vue-router@next  # 安装最新版本
# vite的打包命令
yarn build # 模拟服务器
npm install -g live-server cd ~/desktop/myproject/dist # 例如:www/dist就是打包后的vue项目根目录 # 再在终端执行
live-server

django drf vue 开发环境安装(windows/linux)的相关教程结束。

网站地图