Vue Cli脚手架实战

最新推荐文章于 2024-07-08 16:10:00 发布

curd_boy

最新推荐文章于 2024-07-08 16:10:00 发布

阅读量194

点赞数

分类专栏： # Node.js

本文链接：https://blog.csdn.net/weixin_43746433/article/details/106402553

版权

Node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

脚手架的功能

在这里插入图片描述

npm config set registry=http://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm i vue-cli -g
 
npm install -g webpack
 
vue init webpack  Demo

使用阿里rap2接口

http://rap2.taobao.org/

vsocde 安装插件open in browser

遍历

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
        <li v-for="(item, index) in items">
          {{item.message}} --- {{index}}
        </l1>  # 传数据的{{}}
    
    </div>
    
    <!-- built files will be auto injected -->

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script>
        // 创建vue对象,Vue首字母大写的
        let vm = new Vue({
            el:"#app", // 当前vue对象可以操作的页面范围，一般就是ID元素的选择符
            data:{     // 当前vue对象要输出到html页面中的数据
              items:[
                { message:"登录错误!"},
                { message:"登录错误!"},
                { message:"登录错误!"},
              ]
            }
        });
    </script>
  </body>
</html>