从2019年起，K12在线教育，就是个热词。
今年疫情影响了大部分企业，但却是在线教育平台发展的契机。
不少高校改为线上授课，许多高校计算机学院的上机实验也借助了线上教育平台提供的环境。
比如，在线编程教育网站“实验楼”就在年初接到了国内部分高校的计算机开课请求，让学校们可以使用实验楼的在线环境进行教学工作。
使用平台搭建好的Linux在线环境，边敲代码边学习，效率更高。
教程节选：
本节实验主要介绍VueCLI的使用。学会使用VueCLI创建Vue项目，了解Vue项目结构，对跨域有个简单了解，同时搭建Vue前端开发环境和Django后端开发环境，最终配置Vue开发环境跨域。
此项目所需的知识点是HTML+CSS+JS。如果你此前没有这方面的知识，在跟随实验进行的前期可能会受到一些阻碍，不过好消息是，一旦你完成了实验，就会对HTML+CSS+JS有一个较为全面的认识，同时为了有成就性的进行开发，我们直接使用实验楼的后端API，进行真实数据交互体验。
节奏基调
项目一开始不会安装及配置过多的内容，随着实验的深入会逐一将所需的内容安装，项目选用Vue作为前端框架，同时没有选用CSS框架，这样可以同时实践HTML+CSS+JS。
Vue-cli是用来帮我们快速创建Vue开发的工具，提供可视化的项目配置、安装插件、同时提供开发服务。
当前阶段下我们只需要知道怎么用它来创建一个Vue并跑起来就好了。
Vue-cli创建项目
安装Vue-cli，这个过程可能有点儿慢，请耐心等待：
npminstall-g@vue/cli安装之前首先需要安装Node.js，实验环境中已经安装好了。
接下来我们用@vue/cli创建一个名为vue-shiyanlou的项目：
vuecreatevue-shiyanlou它会提示你选择preset，这里按Enter键选择默认的就好。babel是一个转码器，我们暂且不需要管它。eslint是一个代码检查工具，它可以提示我们哪里代码写的不符合规范。
包管理方面使用yarn还是npm都不会对本实验有所影响。
最后看到：
就是创建成功了。使用命令把项目先跑起来：
实验楼的环境下还不能直接查看效果，我们先来把后端转发也搭起来最后再一次性配置。
出于安全性考虑，我们是不能直接使用实验楼的API，所以需要一个转发。
Python的使用不在本实验范围内，所以这里只需要安装运行即可。
点击左上角Terminal->NewTerminal开启一个新的终端，安装PythonDjango环境，实验环境中已经安装，这里就不需要再重复操作：
sudopip3installdjangosudopip3installdjango-cors-headerssudopip3installrequests下载转发API:
已经运行起来啦，你可能还不知道有哪些API，如何去获取它们。
不用着急，下节实验会一起探索如何去分析得到的这些API。
上节中我们说到实验楼的API不能直接使用，这是因为浏览器出于安全性的考虑默认对一些没有配置跨域链接的限制。
要打破这一限制通常需要后端配合，我们自然无法去修改实验楼的服务器，所以只能通过一个中转来跨过浏览器这道坎。
Vue开发环境跨域配置
Vue开发环境下我们还需要做些配置来达到跨域，同时还要让项目在实验楼中跑起来才行。
首先在vue-shiyanlou目录下创建一个vue.config.js文件，大部分配置都可以在里面完成：
你已经完全搭建起了Vue和Python环境，如果还没看到Vue的欢迎界面，马上点web服务去看一下吧。
本节实验结束后推荐“保存实验环境”，后面的实验都会在本实验基础环境中进行。
之后的内容还有“使用Chrome分析实验楼API”“编写实验楼首页”等等。