uni-app+脚手架使用_uniapp脚手架搭建

脚手架的搭建

1.全局安装

npm install -g @vue/cli
1

2.创建项目

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

3.启动项目

npm run dev:mp-weixin
1

4.导入项目至微信开发者工具

样式和sass

1. 支持小程序的rpx、和h5的vw、vh
2. npm install sass-loader node-sass
3. 在vue的组件中，在style标签上加上

<style lang="sass">
1

uni发送请求

uni.request({
				url:'http://service.picasso.adesk.com/v3/homepage/vertical',
			}).then(res=>{
				console.log(res)
			})
1
2
3
4
5

计算属性

1.data中数据：

data() {
			return {
				title: 'Hello',
				arr:[50,22,44,60,23]
			}
		}
1
2
3
4
5
6

2.computed属性书写：

这里的computed和data是同级关系

computed:{
			numBig(){
				return this.arr.filter(v=>v>30);
			}
		}
1
2
3
4
5

3.computed的调用

<view class="scss">
			{{numBig}}
</view>
1
2
3

事件的使用

1.注册事件 @click=‘事件名’

<text @click='clickFn'>点击事件</text>
1

2.定义事件监听函数，需要在methods中定义

methods: {
			clickFn(){
				console.log('已经点击')
			}
		}
1
2
3
4
5

3.事件的传参

1. 注册
   <text @click=‘clickFn(2)’>点击事件
   <text @click=‘clickFn(“传入参数”)’>点击事件传参
   <text data-index=‘666’ @click=‘clickFn3(888,$event)’>点击事件传参

2.定义
methods: {
clickFn(e){
console.log(e)
},
clickFn3(index,event){
console.log(‘带data属性的点击事件’,index,event)
}
}

组件

组件的简单使用
1.组件的定义

在src目录下新建components
在components目录下新建组件*.vue

2.组件的引入

在页面中引入组件import 组件名 from ‘组件路径’

3.组件的注册

在页面的实例当中，新增components
属性components是一个对象，吧组件放进去注册

4.组件的使用

在标签中使用<组件></组件>