MAC+PyCharm+Flask+Vue.js搭建系统
配置node.js+nvm+npm
访问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切换淘宝镜像
临时的
临时使用的命令:
npm --registry https://registry.npm.taobao.org install express
长久的
通过如下面命令：
npm config set registry https://registry.npm.taobao.org
配置完成之后，可以使用如下命令来得到当前的配置。
npm config get registry
安装Vue.js
这里我在我的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
创建并运行Vue.js项目
在线初始化
使用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
配置Flask
这里使用的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.js和Flask来构建一个单页的App的示例
在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地
-
Vue+Flask实现简单的登录验证跳转的示例代码
本文介绍了Vue+Flask实现简单的登录验证跳转,分享给大家,具体如下: 文件位置: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../sta
-
详解vue-admin和后端(flask)分离结合的例子
本文介绍了vue-admin和后端(flask)分离结合的例子,分享给大家,具体如下 感觉 vue-admin 界面很不错,写了一个小 Demo 看到issues好多问后端数据请求的 就上传了自己最近的这个vue-admin-flask-example,做下小小的分享 API汇总: 登录 var params = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass }; export const reque
-
vue+flask实现视频合成功能(拖拽上传)
vue+flask实现视频合成 效果如下 拖拽上传我们之前一个文章有写过 //www.jb51.net/article/206543.htm 原理就是 监听drop事件 来获取拖拽的文件列表 上传文件 通过axios 上传文件 this,.fileList就是我们的文件列表 let files = this.fileList; let formd = new FormData(); let i = 1; //添加上传列表 files.forEach(item => { formd.append(
-
Vue和Flask通信的实现
安装axios和实现通信 这里我们通过axios来连接Vue前端和Flask后端,使用AJAX请求进行通信.使用如下命令安装 npm install axios axios的使用格式: import axios from 'axios'; export default { data: function () { return { serverResponse: 'res_test' }; }, methods: { getData() { // 设置对应python的接口,这里使用的是local
-
MAC+PyCharm+Flask+Vue.js搭建系统
配置node.js+nvm+npm 访问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 |
-
Django+Vue.js搭建前后端分离项目的示例
在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py
-
详解基于webpack和vue.js搭建开发环境
前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着"不听老人言,吃亏在眼前"的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理--不忍直视 2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的-- 3.数据的渲染使用模板引擎,
-
Vue.js搭建移动端购物车界面
本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3. 实时更新所选择物品的总价格 HTML部分 首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=
-
详解Vue.js搭建路由报错 router.map is not a function
错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
-
Vue.js 2.0和Cordova开发webApp环境搭建方法
HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用
-
Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使
-
Vue.js中的组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技术的诞生,都是为了解决特定的问题.组件的出现就是为了解决页面布局等等一系列问题.vue中的组件分为两种,全局组件和局部组件. 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后,我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使
-
Vue.js每天必学之内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 -- 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题.下面我们开始深挖 Vue.js 响应系统的底层细节. 如何追踪变化 把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter.这是 ES5 特性,不能打补丁
-
实例讲解Vue.js中router传参
Vue-router参数传递 为什么要在router中传递参数 设想一个场景,当前在主页中,你需要点击某一项查看该项的详细信息.那么此时就需要在主页传递该项的id到详情页,详情页通过id获取到详细信息. vue-router 参数传递的方式 Parma传参 贴代码: /router/index.vue export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work