每天都要写，但也不知道该写啥了，那就闲来无事开发个小程序玩玩吧，估计能写不少篇。

一、搭建基础

写小程序，从最基础的开始，最开始都比较简单，写这个主要是为了从头开始，想写一个完整的小程序。

创建项目

选择uniapp,使用的工具是vscode，个人比较喜欢这个。

首先全局安装@vue/cli,我相信大多数写vue项目的人，肯定都是全局安装的，这个没啥的

npm install -g @vue/cli

安装成功之后，我们创建uniapp项目，通过命令。

vue create -p dcloudio/uni-preset-vue my-project     

执行命令以后，你会看到这个选择项，像官网一样选择hello uni-app就可以了，然后回车

当项目下载好就是这个样子了

然后执行项目

npm run serve

执行之后默认的是h5，你看到的应该是这样的结果

我们需要用的是微信小程序的，所以要改下执行的命令

npm run dev:mp-weixin

下面是执行成功后的结果

导入小程序

打开小程序开发工具，如下图

看到第一个空白的区域，点击加入刚刚创建的小程序。

命名好小程序的名称、目录还有AppID，点击确定就OK了

确定之后，那我们就看到了刚刚创建好的小程序了，如下

到页面路径的内容，我们随便修改一个文字，我在文档里加了1111

结果如下：

以下就确认了热更新没有问题了。剩下的我们就要根据我们的项目，修改内容了。

二、目录介绍

以下是我们创建出来的项目目录。

• dist下的dev/mp-weixin目录是我们项目编译后的产物！每次我们修改了内容，通过热更新，小程序开发工具监听这个这个目录，做出更新操作。

• node_modules是所有的依赖，我们的依赖用npm加载，这个没有什么好说的。

• public 窗口目录，里边有我们index.html文件

• src目录，这个目录是我们所有的项目文件

• common目录：写着所有的公共方法

• components目录：是我们的所有组件

• hybrid：App端存放本地html文件的目录

• pages: 业务页面文件存放的目录

• platforms: 存放各平台专用页面的目录

• static: 存放本地静态资源

• store: vue的状态树vuex

• uni_modules: 存放[uni_module]规范的插件

• main.js： Vue初始化入口文件

• App.vue： 应用配置，用来配置App全局样式以及监听 [应用生命周期]

• manifest.json： 配置应用名称，appid，logo等打包信息

• pages.json： 配置页面路由

• uni.scss： 配置样式

剩下的部分，我们就准备改造了，下一篇写！

如有不正确之处，望指点。鞠躬！