微信开发者工具CSS布局 微信开发者工具 vue

搭建过程（简单介绍）

1. 下载安装好所需的集成环境，node，vue，微信开发者工具，vscode（自己喜欢的编辑器即可）
2. 搭建一个新的项目 命令：vue init mpvue/mpvue-quickstart 项目名称（如果你用的是vue-cli3.x及以上版本的话，将会报错没有init命令,请参考vue-cli官方文档安装好init）
3. 打开微信开发者工具，选择新增项目，项目地址指向刚刚创建的项目所在地址，appid可使用测试号或自己注册一个，进入后可查看到刚刚创建项目的界面效果
4. 将微信开发者工具的菜单》设置 》编辑设置 中，将“保存时自动编译小程序”勾选上，这样当你在vscode中更改的代码自动编译完成后，模拟器就会自动刷新界面。

mpvue介绍

mpvue是基于vue的框架，在用法上与vue基本一致，对于使用过vue开发的同学上手成本非常低，开箱即用。不熟悉vue的同学建议先去熟悉一下vuevue官方文档

生成的新项目文件解读

项目文件如下：

先来说一下微信小程序原生代码结构吧

• 全局配置文件：app.json，在这个文件里面可以配置首页样式，页面路径等等，具体参考小程序配置文档API
• 页面文件wxml，类似于html，只是标签使用的小程序特有的标签，在小程序中每个页面都最好建一个文件夹，里面包含页面所需的wxml，wxss，js文件，wxss类似css，给页面添加样式的，js文件定义页面需要的数据交互，与用户的动态交互等

回到我们的mpvue项目中来

• 其中的dist文件夹下面放置的就是编译好的微信小程序源文件
• src放置的是我们web端的vue开发文件，也就是说mpvue在中间做了一个转换，让我们可以使用vue进行开发，而后自动编译成小程序文件