项目初始化

01. 创建项目

（1）在微信开发者工具的开始界面，检查左侧项目类型为「小程序」

（2）在右侧点击「+」开始创建项目

（3）在创建小程序页面输入项目的相关信息，点击「创建」。

02. 项目初始化

（1）npm初始化，生成 packgae.json 文件

npm init

（2）重置 app.js

App({})

（3）删除 app.json 中 pages 下的 pages/logs/logs 路径，同时手动删除对应目录

（4）删除 app.json 中 rendererOptions 和 componentFramework

（5）清空 app.wxss 中的默认样式

（6）删除 components 下的自定义组件 navigation-bar

（7）重置 pages/index 目录下的 index.json、index.wxss、index.js 以及 index.wxml 文件

index.json

{
  "usingComponents": {}
}

index.wxss

/**样式清空**/

index.js

Page({})

index.wxml

<!--index.wxml-->
<view>hello world</view>

（8）更新 utils 下 util.ts 的文件名为 formatTime.js

（9）清除缓存，重新编译

03. 自定义构建 NPM

（1）规范项目结构

.
├─ miniprogram
│  ├─ components
│  ├─ pages 
│  ├─ utils 
│  ├─ app.js 
│  ├─ app.json
│  ├─ app.wxml
│  └─ app.wxss
├─ .eslintrc.js
├─ package.json
├─ project.config.json
└─ project.private.config.json

（2）在 project.config.json 文件中配置 miniprogramRoot 选项

{
  "miniprogramRoot": "./miniprogram", // 指定小程序的源码目录
}

（3）在 project.config.json 文件中配置 setting 选项

{
	"setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ]
  }
}

（4）安装 vant，然后 npm构建，测试是否能够 vant 构建成功

npm i @vant/weapp -S --production

安装完成后，点击「工具」下的「构建npm」

04. 集成 Less

在 project.config.json 文件中配置 setting 选项，然后将所有 wxss 文件的后缀名改为 less

{
	"setting": {
    "useCompilerPlugins": [
      "less"
    ],
  }
}