简介
在github上找到了一个vue项目:基于Vue,ElementUI开发的一款表单设计器,该项目是一位前端大佬开发的,能够通过拖拽的方式自动生成表单代码,让笔者这样的后端开发者从困难的表单代码编写中解放出来。
没有任何基础,瞬间蒙了,好在慌乱中恢复了淡定~
Vue是什么?
Vue (读音类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。其实这些都是百度上找到的介绍,并不了解具体说的是什么意思,不过没关系。
Element是个什么东西了?
网站快速成型工具 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,可以快速生成网站主题:
目录
1. 安装node
node.js的官方地址:https://nodejs.org/en/
出现如下界面,代表安装成功:
2. 安装cnpm
npm是node官方的包管理器, 因为网络原因无法使用npm下载,因此,cnpm就派上用场了,您可以把它看作是一个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持)。如果想进一步了解cnpm的,请移步淘宝npm镜像官网。
npm install -g cnpm --registry=http://registry.npm.taobao.org
3. 安装vue-cli脚手架构建工具
在命令行中输入以下命令:
cnpm install -g vue-cli
等待安装完成。(注意,这里使用cnpm来替代npm,不然速度超级慢,会导致卡在那)
4. 运行项目
4.1 下载项目
从github上下载该项目:
4.2 安装项目
打开cmd,cd进入解压后的项目目录中,运行以下命令:
npm install
4.3 启动项目
输入以下命令启动服务器并打开默认浏览器:
npm run serve
4.4 生产环境部署
运行如下指令,生成静态html文件:
npm run build
可以看到会生成如下的dist文件夹:
将dist中的所有的文件上传到github上,就可以实现该工具的部署:https://jack13163.github.io/VueFormMaking/,但是这样生成的组件无法生成vue组件的代码。