浅淡一个VFP+VUE项目的搭建的心得

我也不知道是加菲猫曾老师的第几期学生，但是我记得我是2018年认识的曾老师。当时的我对猫框理解不深入，再一个没有太多的业务开展，处于编程的边缘，视野封闭，所以没有深入学习，但是一直在这个微信社群里混迹。直到最近7月份的VFP极简BS开发的课我才突然间明白了猫框的意义所在，并尝试着制作了第一个VFP为后台的web网站，并得到了应用，使用的是web1.0的技术，类似于早期的asp技术。 前台页面：

后台登录页面：

后台管理页面：

人生如逆水行舟，不进则退，作为程序员固步自封也是不可取的。

趁热打铁，我又参加了曾老师的vue培训，接触到了node.js npm vue axios等知识，学习中犹如接触到了新大陆，太宽广了，有太多的知识需要恶补啊。突然间好像是我们在用VFP，又好像没有在用VFP,为什么这么说呢？因为擅长的工具要干擅长的事。我们只要学会用VFP混合一切即可。下面讲述开发一个BS系统需要的步骤。

要装备的工具系列：

1. VFP9.0(7423版本以上)
2. 猫框（自定义提供webapi接口 实时调试服务器 数据连接等功能）
3. HBuildX
4. Node.JS NPM VUE(cli) AXIOS 等。 如果采用web1.0技术的话，只需要准备工具1，2，3即可。 如果采用web2.0技术的话，需要准备步骤1，2，3，4即可。 VFP9的安装、猫框的部署结构、HBuildX安装部分不再赘述。我们来了解一下第4部分的安装过程：
5. 下载并安装Node.JS（Node.js 就是运行在服务端的 JavaScript）

1. 但是我们完成第一步的目的是使用NPM(NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题)

1. 国内的话，可以安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 安装@vue/cli (俗称脚手架) npm install -g @vue/cli

使用vue -V 可查看版本号。

1. 创建网站项目 vue create 项目名称（例myweb），自动下载node_modules(大小110M,占用空间138M),（所以第四步可以省略，也可以用VUE UI 启动交互界面创建项目）

1. 进入网站目录命令行方式启动网站 npm run serve ,用vue serve 也可启动网站。但是须满足： a) 安装全局加载项（安装命令：npm i -g @vue/cli-service-global ） b) 必须转入src目录 vue serve main.js 或 vue serve App.vue 采用UI方式启动网站方式见下图：

1. 打开浏览器输入 - Local: http://localhost:8080/ 或在UI界面中启动App

到此完成了一个web应用的布署，接下来使用HBuildX编辑src下的文件，进行网站编辑。

自从学习开发bs系统，脑袋变得特别的发散，告别了表单主线或者prg主线的做法。web1.0应该是prg对应html模板文件。（一对多或多对一，主要取决了模板文件的设计）。