uni-app (1): 正式接触

正式开始学习uni-app, 在以前须要学习vue的相关知识，还有其余一些知识一样须要了解，虽然不须要太过深刻，可是至少提到后要会用，或者说心中有数，下面这些技术：

node、npm、less/sass/scss、webpack、babel等等，由于在实际学习过程当中会有不少地方涉及到它们，若是对他们没有必定的了解，在学习过程当中会有不少困惑，因此务必须要花上一些时间去学习。

 

关于学习为何学习uni-app , 除了说是想多学学知识外，无外乎是想接触接触终端应用，小程序，对于一致接触pc的我尤其有吸引力，而uni-app 号称多端开发其中又有条件编译，并且还有不少支持，好比html+、native.js 、nvue（native vue）等等，感受是否是又高端了一点（对于其余一些框架或集成环境），以前用过apicloud一段时间，说实话，也很方便，对于新手来讲仍是比较友好的，可是在使用过程当中若是你不想去多学一些关于vue其余的一些知识，彻底ok，由于webview环境下跟浏览器同样，写html和js 就完了，关于ui插件什么的，用插件市场中的就好，可是总感受少了些什么，而uni-app不一样，若是你想使用它就必须学习这些知识，是挑战也是提高，由于人是懒惰的，只有逼到份上才能向前一步不是么，另外关于apicloud 关于小程序之类的不是太完善，这但是想学习uni-app的一部分缘由，大概就是如此，若是你想的和我同样，那么咱们一块儿开始吧~

 

在关于uni-app 的随笔中其中会掺杂一些我的的理解，说的不对的地方烦请指正。

 

关于uni-app,官网中是这样介绍的：uni-app 是一个使用 Vue.js 开发全部前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H五、以及各类小程序（微信/阿里/百度/头条/QQ）等多个平台。

是一套框架，也就是半成品工程，利用这个工程能够省去不少咱们在开放时间，提高开发效率。

在白话uni-app 中，对uni-app 进行了一些说明，uni-app 提供了一个api 库，同时定义许多经常使用的内置组件，并解释了终端运行环境与pc浏览器运行环境的区分，咱们知道的，node是基于v8 引擎的运行环境，而混合式开放中的webview 则是根据终端类型进行区分。

在node环境中是没有window、doc这些浏览器内置对象的，故uni-app 中也不会有，数据的渲染与绑定彻底交由vue。

另外由于uni-app 是参考了小程序的，可是其中除了追加了一些api外，基本上与小程序中提供的api一致，只是前缀改了

关于CSS

 

 关于尺寸单位使用px 和rpx ，自适应用rpx。关于布局没得说你们都推荐使用flex。

 

关于静态图，保存在static 中的：

 

基本上这篇官方的介绍就是这些，开始根据官方文档学习~

开发规范：

首先要了解什么是SFC、还有相关的介绍vue-loader，它与webpack配合对vue文件进行预编译与打包。在看这些以前建议必定要看完webpack，至少看完webpack基本概念~

在vue-loader 的介绍中提到了预处理器，其中关于sass/scss 我的没有看，只是看了less，看我的喜爱了。另外若是是style 和 图片资源使用webpack引入，须要把  "sideEffects": false 这个取消掉，不然不会webpack不会进行解析。

在style 标签中使用lang 属性能够指定处理类型，好比

<style lang="scss">
/* 在这里撰写 SCSS */
</style>

相比sass/sacss ，less的配置就简单多了，下载loader，在module中配置lessloader便可：

{
                test: /\.(css|less)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

另外还有stylus，PostCSS，我的没关注。

关于webpack与babel ，能够参考 https://www.webpackjs.com/loaders/babel-loader/

 

scrop css ，但单文件组件中，表有scoped 属性的style 标签中的样式至做用域当前组件，对于其余引入的组件不起做用。

另外注意的是：

 

关于基础组件：

uni-app 提供的组件复合VUE 组件规范，因此能够进行扩展，若是写html 好比div等这些编译器会编译为view等等。

另外关于组件vue文档中可使用两种形式，连字符和驼峰，可是建议使用连字符，由于就算是驼峰在转义的过程当中也会标记为连字符，且不区分大小写。

故uni-app 组件的注意事项以下：

另外uni-app 处理提供基础组件外，还提供其余的扩展组件，这些扩展组件并非自带的，使用的时候须要单独安装，另外还有一些其余的扩展组件，其中一部分是官方的还有一些是用户自传的。

安装方法：

npm ：https://www.npmjs.com/package/@dcloudio/uni-ui

zip：https://github.com/dcloudio/uni-ui

做为一个模块包的存在，使用起来也是很是方便的。

 

 另外，安装文档中提到：其实你不使用sass 也须要安装文档说明安装scss插件，若是是cli建立的项目也要在webpack中使用相对应的loader

 

再往下看若是不本身跟着敲一敲估计不行了~

那么开始建立第一个uni-app 练习项目