基于vue的微信小程序学习

脚手架搭建

 

项目全局安装

1.npm install -g @vue/cli （出现bug）

解决：执行删除
npm config rm proxy
npm config rm https-proxy
npm install -g cnpm --registry=https://registry.npm.taobao.org安装淘宝的cnpm创建项目 

执行cnpm install -g @vue/cli 

2.vue create -p dcloudio/uni-preset-vue my-project（出现bug禁止运行脚本）解决：管理员身份打开powershell,set-ExecutionPolicy RemoteSigned 授予权限Yes

启动项目
cnpm run dev:mp-weixin

 

 

 

 

 

安装sass依赖

cnpm i node-sass sass-loader

 

 

 

 

 

 

 

使用数据

<template>
    <view class="content">
    <!-- 使用数据 -->
    <view>{{msg}}</view>
    <view>{{money}}</view>
    <view>{{isRich}}</view>
    <view>{{person.name}}</view>
    <view>{{person.skill}}</view>
    <!-- 在标签上，通过属性的方式使用数据 -->
    <view :data-color="color">{{msg}}</view>
    </view>
</template>

<script>
    export default {
    data(){
        // 存放数据
        return{
            msg:"宝宝",
            money:10000,
            isRich:false,
            person:{
                name:"孙悟空",
                skill:"72变" 
            },
            color:"aqua" 
        } 
    }        

    }
</script>

index.vue