pycharm、Django+node.js、vue搭建web项目
参考文章:https://www.wandouip.com/t5i35466/ 在此感谢
本篇接着上一篇:windows10使用npm安装vue、vue-cli
首先Django项目是搭建好的,就是新建一个Django项目,然后建一个app
在terminal运行命令:vue-init webpack vuepro 其中vuepro是我web前端项目名即vue的项目名称,操作如下

然后打开terminal窗口,输入cd vuepro
接着 npm i element-ui -S
运行 npm run build,出现错误:'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
百度了一圈,好多说删除目录node_modules文件夹,重新安装。。。。也没捣鼓好,我直接重新安装的vue-cli,重启pycharm
全局卸载:npm uninstall vue-cli -g 全局安装:npm install vue-cli -g
。。。。。还是出错误
只能重新整合项目,因为一开始我用下载的项目直接替代了新建的vue的项目,像package.json等这些都是配置文件,和自己的电脑环境相符合,不能替换,像src下的App.vue也先别替换,即新建的vue项目和下载的相重的就都先别替换,一点点修改成自己的
重新建了vue项目直接运行是可以,时不时运行一下以保证修改正确。
修改Django配置,使其指向vue项目,参考博客,在此感谢博主:https://www.cnblogs.com/zhixi/p/9996832.html
先执行命令npm run dev 或者 npm run build,尝试vue项目是否可以运行。后者会建立一个dist目录,这个和django配置有关,可以直接使用命令npm run build

先配置全局的urls

然后配置全局的settings


结束,点击右上方运行即可,如下

可以修改了,开始把前后台彻底融合的过程了
pycharm、Django+node.js、vue搭建web项目的更多相关文章
- 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- 使用Koa2搭建web项目
随着Node.js的日益火热,各种框架开始层出不穷的涌现出来,Node.js也开始逐渐的被应用到处理服务端请求的场景中.搭建Web项目的框架也随之开始出现——express.koa.koa2.egg等 ...
- 阿里云服务器搭建web项目小结
前言 最近恰好有时间,自己搞了个云服务器试着搭建了个网站,遇到了一些问题,通过踩坑也涨了一些经验,遂记录一二,与后来者分享. 正文 1.博主用的阿里云服务器,为什么用它呢?一个是恰逢双十一,有优惠:另 ...
- paip.最好的脚本语言node js 环境搭建连接mysql
paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world .js 2 #---------模 ...
- Spring Boot搭建Web项目常用功能
搭建WEB项目过程中,哪些点需要注意: 1.技术选型: 前端:freemarker.vue 后端:spring boot.spring mvc 2.如何包装返回统一结构结果数据? 首先要弄清楚为什么要 ...
- 使用idea+springboot+Mybatis搭建web项目
使用idea+springboot+Mybatis搭建web项目 springboot的优势之一就是快速搭建项目,省去了自己导入jar包和配置xml的时间,使用非常方便. 1.创建项目project, ...
- Node.js环境搭建和学习(windwos环境)
Node.js环境搭建和学习 一.环境搭建 1.下载安装文件 下载地址http://nodejs-org.qiniudn.com/下载Node.js环境安装包,根据操作系统下载对应的安装包 下载地址 ...
- Node.js 环境搭建及简单应用
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...
随机推荐
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- 查看两个集合中有没有相同的元素的方法。Collections disjoint
在做项目的时候遇到一个种情况,就是要比较两个集合中是否有相同的元素,经过查找资料,找到了Collections类下的disjoint方法下面做的一个小例子: import java.util.Coll ...
- Android自定义View——实现字母导航栏
1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动 1.先看主布局,方便后面代码的 ...
- C#高级编程(第9版) 第08章 委托、lambda表达式和事件 笔记
本章代码分为以下几个主要的示例文件: 1. 简单委托 2. 冒泡排序 3. lambda表达式 4. 事件示例 5. 弱事件 引用方法 委托是寻址方法的.NET版本.在C++中函数 ...
- docker入门资料及常用命令
Docker17中文开发手册 :https://www.php.cn/manual/view/36147.html Linux部署Docker及常用命令: https://www.cnblog ...
- VUE中的MVVM模式
1.传统MVP模式:业务逻辑相关的控制层 M:模型层,ajax请求 V:dom层,视图 P:控制器.js代码之类的 2.MVVM MVVM模式主要操作数据层,代码减少量是MVP的30%甚至70%
- NRF24L01多对一、多通道通讯关键代码
要想24L01多通道通讯成功,务必先单通道调试成功,并且懂得这块芯片通讯的一些基本知识. 一.基本的通讯条件 1.接收端的接收地址(RX_ADDR_Px)等于发射端的发射送地址(TX_ADDR) ...
- WebSocket的简单实现&jsp
创建一个web项目 导入依赖: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...
- nodejs(11)Express 中进行数据库操作
配置 MySql 数据库环境 mysql 第三方模块的介绍和基本配置 要安装操作数据库的第三方包npm i mysql -S 导入 包 const mysql = require('mysql') 创 ...
- 题解 P1082 【同余方程】
题目 这里给出非递归的 exgcd 做法 [基础] ( 只需要非递归的同学麻烦跳过 ) 由于欧几里德算法 ( 又名辗转相除法 ) 可以帮助我们求出最大公约数,并且提出对于 \(\forall a,b\ ...