一起来学Vue.js【13】

uni-app

由于之前已经安装了vue-cli，打开cmd，切到想要搭建项目的盘符和目录下，通过vue create -p dcloudio/uni-preset-vue 项目名称，这条命令就可以创建uni-app的模板
出现图上所示，即代表模板已经创建成功。

然后打开webstorm,导入项目即可。从左侧可以看到一层一层的目录结构（这里可能因为所使用的编辑器不同，所以看到的结构会有所差别）。
运行结果：

由于笔者发现官网推荐的Hbuilder X编辑器更适合uni-app,在此就换掉Webstorm，如果有同志觉得Webstorm也不错，欢迎在评论区留言，因为用Webstorm找不到index.vue。看来很多教程觉得太乱。所以改用Hbuilder X。
使用Hbuilder X，新建项目时就可选择uni-app,前提也是安装了nmp。
创建完后可以看到左侧目录结构。

重点介绍几个常用的目录及文件：
(1) pages:业务页面文件所存放的目录；
(2) static:存放应用引用静态资源（如图片，视频等）的目录，静态资源只能存放于此；
(3)main.js:Vue初始化入口文件；
(4) App.vue:应用配置，用来配置App全局样式以及监听应用生命周期;
(5) manifest.json:配置应用名称、appid、logo版本等打包信息；
(6) pages.json:配置页面路由、导航条、选项卡等页面类信息。
运行结果：

至于为什么两个编辑器运行效果不一样，是因为项目包含的文件内容有差别。点击打开index.vue文件，可以看到他是是由单文件组件组成的。
对代码进行修改。

运行结果也会发生改变。

在项目真正完成以后，可以进行对项目的发布。
对项目进行打包后，可以从控制台看到项目打包后的位置。
把打包后的结果（如下图所示）上传至服务器，就完成了项目的发布。

在此，可以感受到uni-app+Hbuilder X搭建项目，部署项目，发布项目的过程非常便捷，还可以安装一些插件，供开发人员使用。笔者暂时安装了几个插件。

这里使用less编译器来体验一下插件的作用右击项目，选择新建，选择自定义文件。就可以创建一个.less文件。

less是编译为css的，创建less文件后，会看到他的图标是一个花括号，代表css样式。在less文件中编写css样式代码。其中@hbu是一个颜色值为红色的变量。变量值不要使用引号括起来，会识别不了值。

将该样式引用到index.vue文件中。

运行结果：

通过插件安装，就可以实现对任何扩展语言的支持。uni-app提供了组件支持，包含各式各样的组件，比如，switvh。

还可以到插件市场去找各式各样的组件（工具>插件安装>安装新插件>前往插件市场安装）。在分类中找需要的组件，笔者选择了支付组件。

在components中就出现该组件的文件。

然后通过import导入组件文件，并使用components声明单文件组件，在< div >中就可以使用定义好的组件标签。

运行结果：


再者，可以使用自定义组件。在components里新建组件。

在< template >中定义组件的模板，在< script >中使用props给组件增加title和content两个属性，这两个属性值为String,默认值为空。

接着在index.vue里声明自定义的单文件组件，组件中使用之前定义好的两个属性。

运行结果：

在组件和父级组件的数据传递，通过在父级组件中加入事件来执行。

在自定义组件的tap1事件里添加了 $ emit函数，把组件的事件传递给调用者，这个调用者是index.vue。$emit函数的第一个参数是事件的名称，第二个参数是事件携带的变量。如果想传递的数据很多，可以使用数组的方式传递。

在父级中@(等价v-on:，即绑定)tap1事件，并给该事件添加tap方法，在控制台输出。

点击标题，即可在控制台看到组件内部tap1的输出和父级组件tap的输出。通过绑定tap1，把title的值传入tap的参数e中。

https://cn.vuejs.org/v2/guide/