【node.js】零基础运行基于Vue和ElementUI开发的一款表单设计器项目

简介

在github上找到了一个vue项目：基于Vue,ElementUI开发的一款表单设计器，该项目是一位前端大佬开发的，能够通过拖拽的方式自动生成表单代码，让笔者这样的后端开发者从困难的表单代码编写中解放出来。

没有任何基础，瞬间蒙了，好在慌乱中恢复了淡定~

Vue是什么？

Vue (读音类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。其实这些都是百度上找到的介绍，并不了解具体说的是什么意思，不过没关系。

Element是个什么东西了？

网站快速成型工具 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，可以快速生成网站主题：

目录

1. 安装node

2. 安装cnpm

3. 安装vue-cli脚手架构建工具

4. 运行项目

4.1 下载项目

4.2 安装项目

4.3 启动项目

---

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组件的代码。