【VUE】小白学习（1）—Flask 和 Vue.js 开发单页面应用教程

Flask 和 Vue.js 开发单页面应用入门学习【1】【实战&遇到的问题】

前提：对Flask和Python有一定了解，前端也写过但没有做到前后端分离。也想趁机学一下vue和ajax之类的内容。后端不一定要用flask，看个人熟悉选择就可。这个主要记录一些遇到的坑和与下面教程帖子里不同的地方。

1.主要是安装下载要用的资源。

2.根据一个帖子来同时实现一个单页面应用。【见下一篇】

刚开始简单看下vue的文档就行，找一个教程跟着做理解一下再细致的学比较好。
！！！！上教程！！！！！
强推——原文地址：Developing a Single Page App with Flask and Vue.js
译文版本【不完整但是入门妥妥够用】——[译] 用 Flask 和 Vue.js 开发一个单页面应用

0.Flask

这部分按照教程帖子里就行，这部分记录一下虚拟环境下运行，这个比较有必要知道。
项目文件夹：Flask-vue-first
建立一个server子文件夹
在server下面创建激活虚拟环境：创建一个叫env的虚拟环境👇

$ python -m venv env

然后激活时，$ source env/bin/activate这个原教程里的可以不用，我是win10，我们应该用这句：

activate.bat

注意：👆这句不要直接在server路径或者server/env下输入，不然进入的不是我们创建的env虚拟环境而是root环境。
❌两次都进了root，就用deactivate.bat退出环境。。。。

✔正确的是在server/env/Scripts下激活就可👇

然后运行app.py还是到server下哈：👇

至此：flask没啥问题要记录了，其他教程里都明明白白的！

1.VUE

Vue 是一个用于构建用户界面的开源 JavaScript 框架。它综合了一些 React 和 Angular 的优点。也就是说，与 React 和 Angular 相比，它更加友好，所以初学者额能够很快的学习并掌握。它也同样强大，因此它能够提供所有你需要用来创建一个前端应用所需要的功能。
官方文档：https://vuejs.org/v2/guide/index.html

用npm全局下载vue
（1） 没有npm就先下载安装npm
（2）然后下vue，$ npm install -g vue-cli@2.9.3这个是帖子里原来的，但是建议不要固定版本号。直接👇，以后的每次安装也去掉版本号就可，我这么一路下来是没有问题的。

$ npm install -g vue-cli

创建vue新项目
不用自己额外创建一个client文件夹，直接👇就可

$ vue init webpack client

这个过程中遇到一个问题，在? Project name client之后我的配置就停住了，???很疑惑,然后查了之后，说可以node版本太高，降级一下就可以。或者用上面我说的不要带版本号安装vue也可以解决。

在client下运行哈👇

$ cd client
$ npm run dev

一般vue是实时更新的：client端
然后我发现在客户端项目里有任何的空格问题他也会报错，有逗号，分号问题也会报错（根据他的提示改就可以，熟了就自动有判错感知了。。。）

和后端分开的：server端

下一篇记录完成【单页页面】的部分遇到的问题——EchoZhang-2020-03-02