利用 eslint + prettier + Easy LESS + Vant Weapp 搭建的微信小程序原生开发模板
- eslint + prettier 统一代码风格
- Easy LESS 利用 VS Code 可以在小程序中用 less 编写样式,保存的时候自动转化成
wxss
- Vant Weapp 轻量、可靠的小程序 UI 组件库(可根据需求确定是否使用或者更换其他 UI 组件库)
-
Node.js
推荐版本:
v12.18.0
或以上,理论上不能小于10.0
,避免意料不到的问题
下载地址 | 版本说明 |
---|---|
👉点我 | 👉点我 |
-
下载开发环境相关工具
-
下载 Visual Studio Code 所需插件
插件名 作用 ESLint 用于 用于代码校验和格式化 Easy LESS 用于 less
转wxss
-
在
VS Code
的settings.json
中添加配置:"less.compile": { "outExt": ".wxss" }
-
项目根目录安装依赖
npm i
-
项目目录说明
├─.eslintrc.js ------------------- // eslint配置 ├─.gitignore --------------------- // git提交忽略配置 ├─.prettierrc.js ----------------- // prettier配置 ├─LICENSE ------------------------ // 开源协议 ├─README.md ---------------------- // 使用文档 ├─package.json ------------------- // 项目npm依赖包 └─src ---------------------------- // 微信小程序项目根目录 ├─app.js ----------------------- // App实例配置 ├─app.json --------------------- // 公共配置 ├─app.wxss --------------------- // 公共样式表 ├─behavior.js ------------------ // 全局混入 ├─components ------------------- // 组件存放目录 ├─config ----------------------- // 配置文件存放目录 │ └─api.js --------------------- // 接口配置 ├─config.wxss ------------------ // 全局样式变量配置,如颜色宽度等 ├─control ---------------------- // 全局可复用业务逻辑存放目录 ├─images ├─miniprogram_npm -------------- // 微信小程序构建npm生成目录 │ └─@vant ├─pages ├─project.config.json ---------- // 构建小程序相关配置 ├─sitemap.json ----------------- // 小程序页面是否允许被微信索引配置 ├─template --------------------- // 复用模板存放目录 ├─utils ------------------------ // 工具集合目录 │ ├─WxNotificationCenter.js ---- // 微信小程序内部实现通知 │ ├─router.js ------------------ // 路由封装 │ └─util.js -------------------- // 常用工具类方法 └─utils.wxss ------------------- // 全局功能性样式 如.text-ellipsis