使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
使用vue-cli构建electron项目
MAC+PyCharm+Flask+Vue.js搭建系统目录
- 配置node.js+nvm+npm
- npm切换淘宝镜像
- 安装Vue.js
- 创建并运行Vue.js项目
- 在线初始化
- 离线方式
- 运行项目
- src文件以及作用
- 解决打不开的问题
- 配置Flask
- 安装Flask
访问github官方地址,根据官方的文档来安装Mac版本的nvm,click here
这里建议用nvm安装管理Node.js
cURL:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
Wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
nvm安装好后,重启终端,然后安装Node.js:
nvm ls-remote
使用上述命令来查看远程node版本,然后根据需要安装最新版本的Nodejs:
nvm install 15.3.0
安装完成之后可以使用
nvm list
来查看已经安装的nodejs版本,并且使用
nvm use 版本号
来使用对应版本的nodejs。
nvm use 15.3.0
可以使用如下命令查看当前node版本
node -v
临时的
临时使用的命令:
npm --registry https://registry.npm.taobao.org install express
长久的
通过如下面命令:
npm config set registry https://registry.npm.taobao.org
配置完成之后,可以使用如下命令来得到当前的配置。
npm config get registry
这里我在我的node.js=15.3.0进行安装vue.js。
安装vue-cli脚手架构建工具:
npm install -g @vue-cli npm install -g @vue/cli-init
在安装好输入如下命令验证是否成功:
vue --version // 如果有版本号,则证明安装成功了
安装webpack:
npm install -g webpack
在线初始化
使用cd命令进入项目目录,然后使用如下命令来初始化项目(下载template):
vue init webpack visProject
然后进入项目目录, 安装项目依赖得到node-modules目录:
npm install
离线方式
由于使用上述方式,一直显示在downloading template,这里使用的是webpack作为template,因此我考虑使用离线的方式进行初始化。
首先先去下载webpack, 可以在gitee下载,下载链接:click here
下载完成之后,在用户目录下面中的隐藏文件中找一下是否有.vue-templates文件夹,如果没有的话使用如下命令创建一个
mkdir .vue-templates
创建完成之后,将下载好的文件解压之后,改名成webpack,然后将文件夹放在该目录下。然后回到你之前的目录输入如下命令来离线初始化:
vue init webpack 项目名 --offline
初始化配置如下:
初始化之后使用如下命令,将当前执行环境添加到node_modules文件夹下:
npm install
运行项目
在完成上述配置之后,使用cd进入项目文件夹,使用如下命令来对项目进行编译:
npm run dev
编译完成之后, 就可以通过localhost来访问了。出现如下页面表示运行成功了.
src文件以及作用解决打不开的问题
这里由于默认的我8080端口被占用了,因此可以通过修改配置文件,来给它分配新的端口来解决。
配置文件目录: ~/config/index.js
将里面dev一类下的port对应的端口号修改为8083即可.
然后使用下面命令重新进行编译即可:
npm run dev
这里使用的IDE工具是:PyCharm,关于Python环境的搭建这里就不过多赘述了,网上有很多教程。
安装Flask
使用如下命令安装flask库: 这里我使用的是Anaconda进行包管理。
conda install flask
但是这里,我使用PyCharm创建一个新的项目的话,可以选择直接创建一个flask项目,选择如下:
这样的话,是会自动在选择的解释器中安装flask的。
这里我使用的前者,因此我需要手动安装flask,安装完之后,使用PyCharm来创建一个新的Flask项目,如上图所示,创建完成之后,我们会得到如下内容:
运行app.py文件,我们可以通过访问http://127.0.0.1:5000/来得到一下界面。
这表明我们配置完成了。综上我们分别配置好了vue和flask,后面会接着将如何使用。
到此这篇关于MAC+PyCharm+Flask+Vue.js搭建系统的文章就介绍到这了,更多相关Flask Vue.js搭建系统内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- vue应用转flutter(Vue和Flask通信的实现)
- Flask框架踩坑之ajax跨域请求实现(Flask框架踩坑之ajax跨域请求实现)
- 2021-10-07 00:38:09
- python flask部署实例(Python Flask框架扩展操作示例)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- python配合docker(Docker构建python Flask+ nginx+uwsgi容器)
- pythonflask编写接口(Python Flask框架模板操作实例分析)
- pythonflask怎么设置(python flask安装和命令详解)
- flask快速开发框架(手把手教你使用Flask搭建ES搜索引擎预备篇)
- linux部署flask项目(用uWSGI和Nginx部署Flask项目的方法示例)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- pythonflask系列教程(Python安装Flask环境及简单应用示例)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
热门推荐
- sqlserver 开启数据库(SQLSERVER简单创建DBLINK操作远程服务器数据库的方法)
- SQL Server中row_number的用法
- python关于微信的模块(python基于itchat模块实现微信防撤回)
- php代码最可靠的加密方式(php DES加密算法实例分析)
- mysql分区怎么实现(MySql分表、分库、分片和分区知识深入详解)
- python 获取天气预报(详解用python自制微信机器人,定时发送天气预报)
- mysql数据库与表的基本操作总结(Mysql、Oracle中常用的多表修改语句总结)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- SQL Server数据库应用中有用的几个工具
- angular怎么创建声明(使用Angular CDK实现一个Service弹出Toast组件功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9