仿造问卷星--开发一套调查问卷设计工具（1/3）--完整流程

一，开发前的准备

第一步，初始化项目
创建package.json

首先，新建一个空文件夹项目，在空文件上按shift键同时鼠标右击，打开命令终端窗口
在这里插入图片描述

npm init

在这里插入图片描述
第二步，安装项目依赖

Parcel 快速部署工具，官网：https://parceljs.org/docs/
在这里插入图片描述

Parcel是一款极速零配置WEB应用打包工具，快速、几乎零配置是它最大的特点，开箱即用。相比webpack，Parcel对于新手来是一个很好的选择。

NPM安装

npm install --save-dev parcel

项目所需其他工具依赖：

pretty-print-json 打印和游览漂亮json的工具 https://pretty-print-json.js.org/
copy-to-clipboard 复制内容到剪切板 https://www.npmjs.com/package/copy-to-clipboard
gotpl 一个轻量级、高性能的JavaScript模板引擎。 https://www.npmjs.com/package/gotpl

安装上面三个依赖工具

npm i pretty-print-json copy-to-clipboard gotpl

在这里插入图片描述
最终目录结构：

二，在项目目录中分别创建三个文件:index.html index.css index.js

修改index.html如下：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"/><title>问卷调查编辑工具</title><link rel="stylesheet" href="index.css" /><script type="module" src="index.js"></script></head><body><h1>欢迎使用问卷调查编辑工具!</h1></body>
</html>

三，修改package.json文件：

{"name": "questionnaire-design","version": "1.0.0","description": "调查问卷设计","source": "index.html","scripts": {"start": "parcel","build": "parcel build"},"author": "tigerhhzz","license": "ISC","devDependencies": {"parcel": "^2.8.3"},"dependencies": {"copy-to-clipboard": "^3.3.3","gotpl": "^8.4.5","pretty-print-json": "^1.4.1"}
}