wx-mini
使用 webpack, babel, scss 开发的微信小程序项目脚手架
本项目重要开发工具本版说明
webpack 3.8.1yarn 1.9.4node 8.11.1npm 5.6.0gulp 3.9.1
功能
- 支持引用
node_modules模块 - 支持通过配置
alias来避免../../../之类的模块引用 - 通过
babel支持更丰富的ES6兼容,包括async/await - 内置
promise和lodash(lodash按需引入相应模块,不会全部引入) - 使用
scss编写.wxss文件,内置了一些有用的mixins和extends - 提供
ENVIRONMENT和process.env.NODE_ENV全局常量辅助开发 - 支持
eslint基础代码检测
开始使用
确保安装了 Node.js (>= v4.2) 和 yarn 或 npm
git clone此项目- 通过命令行工具
cd到这个目录,执行npm install或yarn安装依赖模块 - 执行
npm run dev或yarn dev开始开发 - 通过微信开发者工具,添加
dist目录到项目上
内置命令
- 执行命令
npm run dev或yarn dev运行项目(不带有压缩项目的功能) - 执行命令
npm run build或yarn build生产编译打包项目(不带有压缩项目的功能) - 执行命令
npm run minify或yarn minify生产编译压缩打包项目(带有压缩项目的功能)
项目目录结构说明
wx-mini
|---------dist 项目编译打包后的文件
|---------src 项目开发文件
|-----------components 开发组件文件
|-----------images 项目所用图标或图片文件
|-----------pages 页面开发文件
|--------index 首页
|------index.js 首页js
|------index.json 首页json
|------index.scss 首页scss
|------index.xml 首页xml
|-----------sass 项目全局或公用scss文件
|-----------utils 项目公用方法或工具类方法
|-----------wxs 项目公用过滤器
|-----------app.js 小程序主js文件
|-----------app.json 小程序主json配置文件
|-----------app.wxss 小程序主wxss样式文件
|---------gulpfile.js 项目压缩的脚本配置文件
|---------package.json npm初始文件
|---------README.md 项目说明文件
|---------webpack.config.babel.js 项目编译打包配置文件
|---------.eslintrc js代码规范检测配置文件
|---------.babelrc es6转换
|---------.gitignore 上传git时,指定忽略上传文件的配置文件
注意事项
- 每次启动项目后,都需重新打开微信开发者工具
