使用wepy框架搭建一个小程序项目框架

一、环境配置

1、安装node

• node官网 https://nodejs.org/en/ or http://nodejs.cn/

查看node版本号： node -v
查看npm版本号：npm -v

2、设置淘宝源

• npm install -g cnpm --registry=https://registry.npm.taobao.org

3、小程序开发必备

• 安装微信开发者工具
• 粗略熟悉小程序的框架、语法、以及api、组件 ，官方说明文档

4、安装vscode

• vscode官网
• 安装完了后，给vscode安装插件，可参考 打造自己的vs code

必要插件，有关wepy的插件建议做wepy项目的时候安装，不做wepy项目时可卸掉

• 简体中文 Chinese (Simplified) Language Pack for Visual Studio Code
• Beautify
• wepy snippets
• Vetur-wepy
• minapp
• wpy-beautify
• Easy Sass (编写sass文件保存自动生成css文件，自选）
• Easy Less(编写less文件保存自动生成css文件，自选）

备注说明：vscode，不同的插件会影响你编码时给你提示的快捷生成标签的模型和js方法。所以当你不打算用wepy框架开发，而是用其他框架开发的时候，建议将在vscode中将有关wepy的插件卸载掉

5、使用说明

• 开发的时候在vscode进行开发，在vscode运行代码
• 代码运行后，在微信开发者工具，导入项目，然后查看项目运行结果（微信开发者工具不能读取和编辑wpy文件）
  
• 小程序运行是，勾选不校验某些选项，（不勾选的话会运行报错）
  
• 使用npm 安装插件太慢的话，用cnpm替代npm会快很多
• 假如用的是mac，命令不通时，试试sudo+命令
• 假如明明项目在vscode运行正常，但页面在微信开发者工具就是不出来的情况，可以试试删掉dist、node_modules文件，重新执行npm install 命令，再运行

二、开始搭建

1、前期初始化项目

• 说明：wepy版本以1.7版本的为主 使用教程 https://wepyjs.github.io/wepy-docs/1.x/#/
• 我的电脑是mac，所以有的命令前面有sudo,非mac系统，在运行命令时可去掉sudo

全局安装wepy-cli脚手架
sudo npm install wepy-cli -g
在一个空目录，初始化myproject项目，myproject是项目名称
sudo wepy init standard myproject
切换至项目目录
cd myproject
安装依赖
sudo npm install
开启实时编译，运行
sudo npm run dev

报错记录（踩坑说明）
本地如果已经运行了一个wepy项目时，在别的地方重新初始化一个wepy项目是会报各种错的。解决办法就是，停止运行本地项目，再初始化别的项目

2、安装scss（可不装）

wepy默认已经安装了less，习惯scss来写的话，可自行安装scss插件，
或者报了以下错误，也需要自行安装scss

[WARNING] 找不到编译器：wepy-compiler-sass。
[Error] 未发现相关 sass 编译器配置，请检查wepy.config.js文件。

//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
 
//配置wepy.config.js
module.exports = {
    "co