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

发布了192 篇原创文章 · 获赞 318 · 访问量 28万+

猜你喜欢

转载自blog.csdn.net/zyxhangiian123456789/article/details/100891558