uni-app第一天

搭建uni-app

搭建这样一个项目十分简单，不需要像Vue一样去用cmd下载，直接用HBuilderX新建项目的时候选择uni-app即可，开发时体验最好的应该也是HBuilderX了（毕竟是自家产品）

插件安装

在工具中选择插件安装，里面会有各种各样的插件

uni-app 项目中会用到scss，
不装插件的话会无法编译这里我只找到了prettier

为了在手机上真机调试，我把这几个插件也装上了

部分文件的用处

• uni.scss
  
  从图片可看到这里都是一些像是css的东西
  上面注释解释说这里是uni-app内置的常用样式变量
  也就是这一个项目的通用的背景色，字体大小等等
  写样式的时候直接写这里的变量名称即可，后期要更改的话只需要盖着一个地方，能节省不少工作量

• pages.json
  
  做过微信小程序的应该都知道这是干啥的
  pages里面的主要是写每一页的路径还有navigationBar等等
  globalStyle就是一个全局样式一样的存在，如果pages里面没有定义navigationBar那就会用这里的样式
  navigationBar就是这东西
  

• manifest.json
  
  这个文件看着就比较舒服了
  都是些可视化的设置，主要是完成后发布时用的
  如果要开发微信小程序别忘了在微信小程序配置里写上自己的AppID

• main.js
  这个就和vue项目中src目录下的main.js一样了
  比如import点什么东西
  但是要注意，全局的样式表不能在这里import了
  要放在App.vue里

• App.vue
  
  这个和vue里的app.vue有点不同，他没有template了
  script里的三个方法分别是初始化时执行，启动或切前台时执行，切后台时执行
  style中的样式注释已经说了，如果不需要开发头条小程序的可以删掉，static下的字体文件就是用来弄这个的
  如果要用全局样式表可以在style中像引入css文件一样（这好像就是css文件）

@import url('common/styles/reset.css');

• static
  主要是用来存放一些静态资源（图片视频之类的）
  这里面的js代码不会被编译，如果里面有es6的代码，不经过转换直接运行，在手机设备上会报错。
  css等代码也不要放在这里面
• common
  static不能放css文件，那就放common里呗
  这个主要是放一些公共资源（自己创建，生成的项目里没有）
• pages
  顾名思义，就是放页面的文件夹
• components
  和vue里的components一样
  存放组件的

其他的一些注意事项

因为包括小程序的原因吧，像开发微信小程序一样
部分标签要换成小程序那种
div => view
span,p => text
img => image
a => navigator
select => picker
iframe => web-view
ul、li没有了，都要用view来替代

css中的 * 选择器没有了