参考文章: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项目的更多相关文章

  1. 基于.NetCore开发博客项目 StarBlog - (5) 开始搭建Web项目

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  2. 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想

    总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...

  3. 使用Koa2搭建web项目

    随着Node.js的日益火热,各种框架开始层出不穷的涌现出来,Node.js也开始逐渐的被应用到处理服务端请求的场景中.搭建Web项目的框架也随之开始出现——express.koa.koa2.egg等 ...

  4. 阿里云服务器搭建web项目小结

    前言 最近恰好有时间,自己搞了个云服务器试着搭建了个网站,遇到了一些问题,通过踩坑也涨了一些经验,遂记录一二,与后来者分享. 正文 1.博主用的阿里云服务器,为什么用它呢?一个是恰逢双十一,有优惠:另 ...

  5. paip.最好的脚本语言node js 环境搭建连接mysql

    paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world   .js 2 #---------模 ...

  6. Spring Boot搭建Web项目常用功能

    搭建WEB项目过程中,哪些点需要注意: 1.技术选型: 前端:freemarker.vue 后端:spring boot.spring mvc 2.如何包装返回统一结构结果数据? 首先要弄清楚为什么要 ...

  7. 使用idea+springboot+Mybatis搭建web项目

    使用idea+springboot+Mybatis搭建web项目 springboot的优势之一就是快速搭建项目,省去了自己导入jar包和配置xml的时间,使用非常方便. 1.创建项目project, ...

  8. Node.js环境搭建和学习(windwos环境)

    Node.js环境搭建和学习 一.环境搭建 1.下载安装文件 下载地址http://nodejs-org.qiniudn.com/下载Node.js环境安装包,根据操作系统下载对应的安装包 下载地址 ...

  9. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

随机推荐

  1. Mount error(5):Input/output error on mount

    https://superuser.com/questions/850301/mount-error5input-output-error-on-mount When setting up a sha ...

  2. (5)opencv的基础操作和矩阵的掩模操作

    不懂的,可以简单,看看这个网址:https://blog.csdn.net/xiongwen_li/article/details/78503491 图片放到了桌面,所以,图片的路径就是桌面了,剩余的 ...

  3. VUE.js入门学习(5)- 插槽和作用域插槽

    插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...

  4. POJ 1035:Spell checker

    Spell checker Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 22574   Accepted: 8231 De ...

  5. C#调用C++系列二:传结构体

    这一篇记录下C#调用C++的结构体的方式来使用OpenCV的数据格式,这里会有两种方式,第一种是C#传一个结构体和图像的路径给C++,然后C++将图像加载进来,再把传进来的结构体填满即可,第二种是C# ...

  6. vmbox 导入虚拟电脑之后无法上网

    先执行 ip addr 查看有没有分配ip 用root执行dhclient -v命令去通过DHCP协议获取一个ip,在下图的最后一行可以看到ip已经分配成功dhclient命令可以用来释放你的电脑的I ...

  7. mybatis中#{}和${}的区别及order by的sql注入问题

    mybatis的#{}和${}的区别以及order by注入问题 原文  http://www.cnblogs.com/chyu/p/4389701.html   前言略,直奔主题.. #{}相当于j ...

  8. SPOJ 247 chocolate (CHOCLO)

    题目http://www.spoj.com/problems/CHOCOLA/ 把一整块巧克力分成一个一个单元,掰断每一横行有个代价值,掰断每个纵行也有个代价值,要你求最后的总代价值最小 这个题目放在 ...

  9. ZOJ-1234 UVA-10271 DP

    最近觉得动态规划真的很练脑子,对建模以及思维方法有很大帮助,线段树被卡到有点起不来的感觉 最近仔细思考了一下动态规划的思想,无非是由局部最优解得到全局最优解,由此类推,发现,像最短路和最小生成树其实都 ...

  10. Freemarker的一点延生

    1.freemarker一般不是单独使用,他可以和activeMQ互相结合,来完成功能的. 使用它有 几点好处, 首先就是提高程序效率,一般情况我们的页面都是jsp,而jsp实际上是servlet,在 ...