mpvue 快速创建小程序项目

mpvue 快速初始化项目

三种初始化方法

官方初始化

教程在这里，其中核心的语句是：

# 安装vue-cli
$ npm install --global vue-cli@2.9
# 创建一个项目
$ vue init mpvue/mpvue-quickstart my-project
# 切换到项目文件夹，并安装依赖
$ cd my-project
$ npm install
# 运行
$ npm run dev

这样这样就可以新建一个mpvue的默认项目。

mpvue-cli

官方初始化有个缺点，就是一个页面要用一个文件夹来表示。比如首页,就要在index文件夹下放一个index.vue和一个main.js，这样的话就很不舒服。幸好有了mpvue-entry这个库，可以让我们用一个vue文件表示一个页面，配合着一个pages.js就可以建立文件与页面之间的对应关系。
于是基于mpvue-entry，出现了mpvue-cli这个库，使用这个库配置的项目会自动使用mpvue-entry，这样开发起来就很顺手了。其使用方式如下：

# 安装这vue-cli
$ npm install -g vue-cli
# 新建一个项目
$ vue init spencer1994/mpvue-cli mpvuesimple
# 切换到项目文件夹，并安装依赖
$ cd mpvuesimple
$ npm install
# 运行
$ npm run dev

mpvuesimple-quickstart

上面两种都是不能直接引入微信小程序原生组件的，在mpvue-cli的基础上，增加了import-weapp-component这个库，并且内置了一些UI组件。其使用方式如下：

# 安装vue-cli
$ npm install -g vue-cli
# 初始化一个项目
$ vue init blackjack0v0/mpvuesimple-quickstart  mpvuesimple
# 切换到这个项目
$ cd  mpvuesimple
# 安装依赖
$ cnpm install
# 下载静态组件
$ git clone https://github.com/blackjack0v0/static 
# 运行 
$ cnpm run dev

为什么需要引入自定义组件？（因为下面这种样式不想自己写了，都已经有现成的了，拿来主义！）

比较

相同点

发现三种方法都是首先安装vue-cli：

$ npm install -g vue-cli

然后下载各自的模板（原作者上传好的）：

vue init xxx yyy

xxx是作者上传的文件夹路径，yyy是自己想要新建的文件夹名称。
然后都要切换到这个文件夹、安装依赖并运行，在此不再赘述。

不同点

框架、库的出现都是为了满足开发者的需求，我们自己手写代码的时候总会发现有很多不便，第一反应肯定是去搜看有没有现成的实现，如果没有的话有能力的人就会自己造一个，这就是社区的重要性。
简言之，可以用下面一幅图来解释三者之间的关系：