Vue入门开发

脚手架搭建项目

1. 全局安装

npm install -g @vue/cli

2. 创建项目
   cd到项目文件夹（不用新建uni-app文件夹，下面的语句会自动创建的，my-project就是uni-app项目名称）

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

提示选择模板。选择默认模板。
之后提示cd到项目目录，并运行小程序

输入cd my-project
运行服务不要输入 run serve.而是往下执行第3步

npm install sass-loader@10.1.1
npm install node-sass@4.14.1

3. 启动项目（微信小程序）

npm run dev:mp-weixin

看到这个提示说明成功了，接下来导入项目。

4. 微信开发者工具导入项目
   打开微信开发者工具，点击巨大的 + 号，选择导入项目，在目录点选刚才新建的项目目录，进入 my-project 文件夹，点击 dist - dev - mp-weixin , 选择文件夹。例如，我的路径是：
   E:\WebDevelopment\MyUniProject\my-project\dist\dev\mp-weixin
   
   点击导入 后，出现 uni-app 的 Hello 界面，就说明导入成功了。

5. 搭建过程中可能出现的问题

① vue 和 vue-templte-complier 版本不一致
根据提示重新安装对应的vue版本即可。npm install vue@2.6.10
然后重新运行项目: npm run dev:mp-weixin

②当安装sass 时，使用 npm i node-sass sass-loader ，再在项目中运行时，可能会出现编译失败的问题，
error in ./src/pages/index2/index.vue?vue&type=style&index=0&lang=scss&

原因是sass版本太高了，降级版本:

npm install sass-loader@10.1.1

同时降级node sass 版本，先卸载，再重新安装：

npm uninstall node-sass
npm install node-sass@4.14.1

或者, 如果使用 yarn (default in newer CRA versions)

yarn remove node-sass
yarn add node-sass@4.14.1

Vue目录结构介绍

文件夹my-project 右键用Visual Studio Code打开。整个目录中最重要的部分是src 目录。其它的只要做了解即可。
static 目录内不要放样式，因为脚手架不会对这里面的样式做编译。
在pages 下新增一个页面，一定要在pages.json 里面同样新增一个pages. pages.json 谁在前面，谁就是首页。
在Visual Studio Code修改代码保存后，在微信开发者工具可预览小程序页面。

插件安装

在vscode 插件市场搜索vetur , 安装vue语法提示插件

安装组件语法提示：
npm i @dcloudio/uni-helper-json

更多介绍见官方文档：当 uni-app 遇见 vscode

样式和sass

rpx 小程序中的的单位。
750rpx = 屏幕宽度
vw h5 单位
100vw = 屏幕宽度
100vh = 屏幕高度

在uni-app中使用sass， 需要安装依赖：
cd到my-project:

npm i node-sass sass-loader

重新启动应用：

npm run dev:mp-weixin

在style 标签里添加 lang="scss"
如果运行出现错误，请见 5. 搭建过程中可能出现的问题

计算属性

<view>{{ money }}</view>
<view v-for="item in filterList" :key="item.id">{{ item.text }}</view>

<script>
export default {
 data() {
   return {
     title: "计算属性",
     list: [{ id: 0, text: "苹果" }, {id:1,text:"梨子"}],
   };
 },
 computed: {
   money() {
     return "$ 100";
   },
   filterList(){
   	return this.list.filter(v=>v.id>0)
   },
   processList(){
   	return this.list.map(v=> {
   		v.color = "red";
   		return v;
   	})
   }
   
 }
};
</script>

事件的使用

@click="handleClick" 绑定点击事件
传参：直接在括号内传参
自定义属性传参：增加$eventt

<view @click="handleClick">click</view>
<view data-index="100" @click="handleClick1(10,$event)">click 传参</view>

export default {
  methods:{
	  handleClick(){
		  console.log("work harder");
	  },
	  handleClick1(n,event){
		  console.log(n);
		  console.log(event);
		  console.log(event.currentTarget.dataset.index);
	  }
  }
};

组件（重点）

组件的简单使用

组件的定义
在src目录下新建文件夹components 用来存放组件
在components目录下直接新建组件 *.vue

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

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

组件的使用
在页面的标签中，直接使用组件，<组件名></组件名>

输入 d ，按 ↑ 移到最下面，可以一键生成vue模板代码

<template>
  <view class="content">
        <!-- 4. 使用组件 尽管在引入组件时使用了驼峰式命名，但使用组件时 uni-app 推荐用小写中间带-  -->
        <img-border></img-border>
  </view>
</template>

<script>
// 2. 引入自定义组件
import imgBorder from "@/components/img-border"; // imgBorder 必须是驼峰形式，不能加 - 

export default{
  // 3. 注册组件
  components:{
    imgBorder  // 属性名：属性值。如果两者一样，可省略
  }
};

</script>
<style lang="scss">

</style>

新建components 文件夹，新建vue文件：

<template>
<view>
    给我显示啊！(不知道为什么使用网络图片无法显示，而本地图片可以)
    <image class="img-border" src="/static/img1.jpg"/>
    </view>
</template>

<script>
export default {

}
</script>

<style>
.img-border{
    border-radius: 50%;
    }
</style>

组件更详细的知识在官方文档 Vue-组件

组件传递参数

 <!-- 4. 使用组件 尽管在引入组件时使用了驼峰式命名，但使用组件时 uni-app 推荐用小写中间带-  -->
        <img-border :mysrc="src2"></img-border>

export default{
  data() {
    return {
      src1:"/static/img1.jpg",
      src2:"/static/logo.png",
    }
  },
  // 3. 注册组件
  components:{
    imgBorder  // 属性名：属性值。如果两者一样，可省略
  }
};

components:

<template>
<view>
    给我显示啊！
    <!-- 这里的:src不能换成其它名称，不然就不显示了. mysrc是父组件传递下来的 -->
    <image class="img-border" :src="mysrc"/> 
    </view>
</template>

<script>
export default {
    props:{
        mysrc:String    
    }
}
</script>

<style>
.img-border{
    border-radius: 50%;
    }
</style>

全局共享数据

1. 通过Vue的原型共享数据
   在main.js 里进行全局导入和注册

Vue.config.productionTip = false
// 定义全局数据
Vue.prototype.baseurl = "www.baidu.com";

App.mpType = 'app'

2. App.vue 在后面加上

<script>
	export default {
		globalData:{
			base:"www.360.com"
		}
	}
</script>

pages/index.vue引用：

onLoad(){
    // 通过Vue原型获取全局数据
    console.log(this.baseurl);
    // 获取globalData数据
    console.log(getApp().globalData.base );;
  }

组件插槽

插槽也是数据的一种，想实现动态的父组件给子组件传递标签，就可以使用插槽slot
通过 slot 来实现占位符
子组件：

<view class="content">
      <view class="title">标题</view>
      <view class="content">内容

          <slot></slot>

      </view>

  </view>

父组件：

<template>
  <view class="content">
        <my-form>
            <input type="text" />
            <radio></radio>
            <checkbox></checkbox>
        </my-form>
  </view>
</template>

<script>
// 2. 引入自定义组件
import MyForm from '@/components/my-form.vue';

export default{
  // 3. 注册组件
  components:{
    MyForm  // 属性名：属性值。如果两者一样，可省略
  },
};
</script>