ubuntu安装django+vue3环境 填坑以及详细步骤

最新推荐文章于 2024-03-23 13:37:31 发布
最新推荐文章于 2024-03-23 13:37:31 发布
阅读量1.1k 收藏 3
点赞数
文章标签： ubuntu django linux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30841655/article/details/128467780
版权

目录

1. 常见问题

在安装nodejs时，按照网上的教程，通常会出现类似于 node: /lib/x86_64-linux-gnu/libc.so.6: version GLIBC_2.28' not found (required by node) 这种报错，但凡出现这种关于glibc_x.xx未找到的报错，都需要考虑linux版本是否合适。

我之前的ubuntu版本是18.04，持续报错，无法安装，最后使用ubuntu 22.04才能正确安装。

关于nodejs适用的系统版本，请在github nodejs中进行确认，如下图中明确说了仅支持ubuntu 20.04及以上的版本
在这里插入图片描述
在这里插入图片描述

2. Django安装
2.1. python环境安装

这里采用miniconda，创建环境名work，如下

wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh

sudo chmod +x Miniconda3-latest-Linux-x86_64.sh

bash ./Miniconda3-latest-Linux-x86_64.sh

source ~/.bashrc

conda create -n work python=3.8

conda activate work
2.2. django安装
pip install django  -i http://pypi.doubanio.com/simple/ --trusted-host pypi.doubanio.com
3. Vue安装
3.1. nodejs安装

这里，安装nodejs 19.x版本，同时安装npm和cnpm。

sudo apt-get install curl

curl -sL https://deb.nodesource.com/setup_19.x | sudo -E bash -

sudo apt-get install -y nodejs

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
3.2. vue安装
sudo cnpm install -g @vue/cli
wangxinRS
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Django个人博客搭建教程—使用Ubuntu+Nginx部署你的Vue应用
01-09
/etc/nginx/nginx.conf添加这一段 server { listen 8090; server_name www.guanacossj.com; index index.html; root /home/MyBlog/myblogfront/dist; location / { try_files $uri $uri/ /index.html; } } root表示vue项目build后生成的dist目录，里面有static和index.html两个文件 在vue工程下，我这里是myb
Django+Vue开发环境框架
05-08
本项目“Django+Vue开发环境框架”提供了一个基础的开发环境，基于python3.6和django3.0，以及Vue CLI 4.3.1版本，确保了稳定性和兼容性。 首先，让我们详细了解一下Django。Django是一个开放源代码的Web应用框架，...
Python+Django+Vue3全栈开发商城项目
07-12
一个Django+Vue3前后端分离的全栈商城系统项目，旨在帮助广大初学者将所学知识快速融合，实现快速开发，专为大学生或者找工作为目的者而设，将零散的知识点融合到项目中，并且收获真实项目的设计思维和开发经验。 本项目前端使用课程《Vue3.0正式版核心技术》开发的商城前端项目，后端使用Python的快速开发框架Django框架。 希望本课程能给广大学者带来技能和项目上的提升。 项目截图：
ubuntu 搭建 vue3
qq_70756940的博客
04-07 1464
这是ubuntu搭建vue3,很希望能帮到各位，如果搭建不起的可以在下方评论你的问题。（我很希望能帮助大家，也能提升自己的能力和交朋友）
ubuntu下vue项目构建工具安装小笔记
qq_42018705的博客
04-09 1423
1、克隆到本地：git clone https://gitee.com/mirrors/nvm 本地地址。下载包过慢时，可能需要切换到第三方源（例如：淘宝、科大...），还有公司私有源地址等等。# 安装过程中，因为国外服务器的原因，所以如果失败就执行多几次吧。第四，选择路由Router的路由模式，问我们是否使用历史状态管理模型，就是路由没有。安装过程因为需要联网，所以如果出现网络安装失败，则重新安装多次。第二，选择项目依赖文件。第七，EsLint和Babel的配置是否保存一块，选择第二个选项。
（一）Vue3系列-学习篇（环境安装及创建项目）
真心喜欢你吖研发工程师，记录学习笔记、问题解决方案、知识总结、知识分享；冲鸭！
09-25 230
vue ui是[@vue(https://github.com/vue)/cli3.0增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作。上面的步骤中，我们创建了一个vue3项目，并且安装了Router、Vuex。点击下一步，**勾选上路由Router、状态管理Vuex，去掉js的校验。下面分别安装了淘宝npm，cnpm是为了提高项目里安装依赖的速度。点击创建项目，**弹窗中选择按钮【创建项目，不保存预设】。已下载16.14.2长期维护版，，请自行操作安装。运行后，浏览器会显示以下，如图。
Python+Django+vue3全栈开发商城项目.zip
10-05
在这个"Python+Django+vue3全栈开发商城项目.zip"中，我们探索的是一个结合了Python、Django框架和Vue.js（特别是Vue3版本）技术的电子商务平台的开发实践。这个项目旨在提供一个全面的解决方案，涵盖了从后端数据...
django+vue分离项目实战.rar
09-03
在本资源"django+vue分离项目实战.rar"中，我们将探讨如何使用现代Web开发技术Django和Vue.js来实现一个完整的前后端分离的实战项目。这个项目需要的基础环境包括Python 3.6及以上版本、Django的最新版、Node.js的...
Django5+Vue3+Docker打造企业OA系统
05-31
今天给大家讲一下关于Django+Vue+Docker企业OA系统方面的内容，首先我们先来认识一下这几个技术点。 一、关于Django5 Django是一个高级的Python Web框架，可以快速开发安全和可维护的网站。由经验丰富的开发者构建...
Django+Vue+Docker企业OA系统
最新发布
06-03
视频课程下载——Django+Vue+Docker企业OA系统
Vue3 + Django 前后端分离项目实现密码认证登录
Python技术探索
03-23 2400
Vue3 + Django 前后端项目实现密码认证登录
【web系列十】Vue3+Django+MySQL搭建前后端框架
Nicholson的博客
07-05 7781
这篇文章主要介绍前端、后端和服务器间的通信，如果有对这三个部分还不了解的或者不知道怎么搭建工程的可以去看博主的这三篇文章，希望能对你有帮助。
【无标题】从0到1 搭建一个vue3+Django项目
weixin_45286211的博客
12-05 1389
从0到1搭建一个vue3+Django项目
linux搭建vue开发环境,图文详解在Ubuntu 20.04中搭建Vue开发环境
weixin_29692653的博客
05-04 655
在本教程中，我们将提供一个简单的分步过程来帮助您开始使用Vue.js。Vue.js是一个功能强大的、渐进式、响应式很强的JavaScript框架，易于使用和学习。它提供了许多不同的工具和库来促进应用程序开发过程。如果您了解HTML、CSS和JavaScript，那么您现在可以开始使用Vue.js构建Web应用程序。安装要将Vuei .js集成到一个项目中，您可以使用CDN包、NPM或CLI。使用C...
Linux 安装 npm，vue-cli3
youandme520的专栏
10-29 753
本篇经验讲解如何在linux中安装vue-cli3并创建项目 如果还没有安装npm或cnpm，请先安装。安装npm命令是：apt-getinstallnpm。安装完成后可以用npm安装cnpm，命令是： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli3，vue-cli3的包名称由之前的vue-cli改成了@vue/cli，所以安装的时候命令应该换成：npm install -g @vue..
Vue 3 + Vite 入门 【Ubuntu + Vim配置】
m0_73469755的博客
01-10 754
vue3+vite 入门 Ubuntu 基于 vim 作为 IDE 中文文档 https://cn.vuejs.org/guide/quick-start.html参考 https://www.youtube.com/watch?
Vue3.0环境搭建
hi_mydear_yuaner的博客
11-30 2616
如果事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装Vue3.0 npm install -g @vue/cli // 安装cli3.x vue --version // 查询版本是否为3.x cli3也能使用2.x模板，命令如下： npm install -g @vue/cli-init // 安装这个模块 // 就可以使用2.x的模板：vue init webpack my-project ...
ubuntu安装vue
佳佳鸽的博客
01-10 4097
ubuntu安装VUE3
搭建 linux + nginx + node + vue3 + mysql 个人博客 - 服务器篇（二）
五月慵懒的猫的博客
05-06 101
经过不断的摸索和大量的百度，一台搭载linux centOS的mini本地服务器总算是安装好了，但是服务器在家里，怎么利用上班摸鱼的时间继续配置我的服务器呢？
django+vue3详细教程
05-18
Django 是一个基于 Python 的 Web 应用框架，Vue3 是一个流行的前端 JavaScript 框架。结合使用 Django 和 Vue3 可以构建现代化的全栈 Web 应用程序。下面是一个基本的 Django + Vue3 教程： 1. 创建 Django 项目 首先，我们需要创建一个 Django 项目。打开终端并输入以下命令： ``` django-admin startproject myproject cd myproject ``` 这将创建一个名为 `myproject` 的 Django 项目，并将您的当前工作目录更改为该项目目录。 2. 创建 Django 应用程序 接下来，我们将创建一个 Django 应用程序。在终端中运行以下命令： ``` python manage.py startapp myapp ``` 这将创建一个名为 `myapp` 的 Django 应用程序。 3. 安装 Django REST framework 现在，我们需要安装 Django REST framework。在终端中运行以下命令： ``` pip install djangorestframework ``` 这将安装 Django REST framework。 4. 创建 Vue3 项目 接下来，我们将创建一个 Vue3 项目。打开另一个终端窗口并输入以下命令： ``` vue create myproject-ui cd myproject-ui ``` 这将使用 Vue CLI 创建一个名为 `myproject-ui` 的 Vue3 项目，并将您的当前工作目录更改为该项目目录。 5. 配置 Django REST framework 现在，我们需要配置 Django REST framework。打开 `myproject/settings.py` 文件并添加以下行： ```python INSTALLED_APPS = [ # ... 'rest_framework', 'myapp', ] REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.AllowAny', ] } ``` 6. 创建 Vue3 组件 现在，我们将创建一个 Vue3 组件。打开 `myproject-ui/src/App.vue` 文件并添加以下行： ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'App', data() { return { message: 'Hello, World!' } } } </script> ``` 这将创建一个简单的 Vue3 组件，其中包含一个带有文本的标题。 7. 启动 Django 服务器 现在，我们将启动 Django 服务器。在终端中输入以下命令： ``` python manage.py runserver ``` 这将启动 Django 服务器并监听端口 8000。 8. 启动 Vue3 应用程序 接下来，我们将启动 Vue3 应用程序。在另一个终端窗口中输入以下命令： ``` npm run serve ``` 这将启动 Vue3 开发服务器并监听端口 8080。 9. 集成 Django 和 Vue3 现在，我们将集成 Django 和 Vue3。打开 `myproject-ui/src/main.js` 文件并添加以下行： ```javascript import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.config.globalProperties.$djangoUrl = 'http://localhost:8000' app.mount('#app') ``` 这将创建一个 Vue3 应用程序实例，并将 `http://localhost:8000` 设置为 Django 服务器的 URL。 10. 使用 Django REST framework 提供数据 最后，我们将使用 Django REST framework 提供数据。打开 `myapp/views.py` 文件并添加以下行： ```python from django.http import JsonResponse def hello(request): return JsonResponse({'message': 'Hello, World!'}) ``` 这将创建一个简单的 Django 视图函数，该函数返回一个 JSON 响应。 11. 在 Vue3 中使用数据 最后，我们将在 Vue3 中使用数据。打开 `myproject-ui/src/App.vue` 文件并添加以下行： ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { name: 'App', data() { return { message: '' } }, mounted() { fetch(`${this.$djangoUrl}/hello`) .then(response => response.json()) .then(data => { this.message = data.message }) } } </script> ``` 这将使用 `fetch()` 函数从 Django 服务器获取数据，并将其显示在 Vue3 组件中。 现在，您已经学会了如何使用 Django 和 Vue3 构建全栈 Web 应用程序！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值