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

拼搏现实的明天。 2023-09-25 21:36 17阅读 0赞

#### 一，开发前的准备 ####

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

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

npm init

![在这里插入图片描述][207fbdf5a0ae441090c3143c5eab9b25.png]  
第二步，安装项目依赖

Parcel 快速部署工具，官网：[https://parceljs.org/docs/][https_parceljs.org_docs]  
![在这里插入图片描述][33d2008020774dcfabd8618dfe298f95.png]

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

NPM安装

npm install --save-dev parcel

项目所需其他工具依赖：

*  pretty-print-json 打印和游览漂亮json的工具 [https://pretty-print-json.js.org/][https_pretty-print-json.js.org]  
    ![在这里插入图片描述][8d4c1fba86054401851b24e7252958dc.png]
 *  copy-to-clipboard 复制内容到剪切板 [https://www.npmjs.com/package/copy-to-clipboard][https_www.npmjs.com_package_copy-to-clipboard]
 *  gotpl 一个轻量级、高性能的JavaScript模板引擎。 [https://www.npmjs.com/package/gotpl][https_www.npmjs.com_package_gotpl]

安装上面三个依赖工具

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

![在这里插入图片描述][8a8c485a9d864ef093f63ee28d6f380c.png]  
最终目录结构：  
![在这里插入图片描述][7be64f0d18f1451a98a210a6d593c3eb.png]

#### 二，在项目目录中分别创建三个文件: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"
      }
    }

#### 四，运行项目： ####

![在这里插入图片描述][2d1ebce0694543119e25e691a5012c6c.png]  
运行成功：  
![在这里插入图片描述][95c636bdbf5844cd878165040bd0a896.png]

访问http://localhost:1234  
![在这里插入图片描述][a048275e1b184e52b574a6cf387c2387.png]

[e0a42cc7bb1c46549997219593b68439.png]: https://img-blog.csdnimg.cn/e0a42cc7bb1c46549997219593b68439.png
[207fbdf5a0ae441090c3143c5eab9b25.png]: https://img-blog.csdnimg.cn/207fbdf5a0ae441090c3143c5eab9b25.png
[https_parceljs.org_docs]: https://parceljs.org/docs/
[33d2008020774dcfabd8618dfe298f95.png]: https://img-blog.csdnimg.cn/33d2008020774dcfabd8618dfe298f95.png
[https_pretty-print-json.js.org]: https://pretty-print-json.js.org/
[8d4c1fba86054401851b24e7252958dc.png]: https://img-blog.csdnimg.cn/8d4c1fba86054401851b24e7252958dc.png
[https_www.npmjs.com_package_copy-to-clipboard]: https://www.npmjs.com/package/copy-to-clipboard
[https_www.npmjs.com_package_gotpl]: https://www.npmjs.com/package/gotpl
[8a8c485a9d864ef093f63ee28d6f380c.png]: https://img-blog.csdnimg.cn/8a8c485a9d864ef093f63ee28d6f380c.png
[7be64f0d18f1451a98a210a6d593c3eb.png]: https://img-blog.csdnimg.cn/7be64f0d18f1451a98a210a6d593c3eb.png
[2d1ebce0694543119e25e691a5012c6c.png]: https://img-blog.csdnimg.cn/2d1ebce0694543119e25e691a5012c6c.png
[95c636bdbf5844cd878165040bd0a896.png]: https://img-blog.csdnimg.cn/95c636bdbf5844cd878165040bd0a896.png
[a048275e1b184e52b574a6cf387c2387.png]: https://img-blog.csdnimg.cn/a048275e1b184e52b574a6cf387c2387.png