Vue第一次使用

这篇博客介绍了Vue.js的基础知识,包括它的渐进式特性、视图层焦点和简单API。通过创建第一个Vue项目,展示了如何使用Vue CLI创建vuedemo01应用并启动服务。接着,文章转向了Element-UI的介绍,它是基于Vue 2.0的桌面端UI框架。文中给出了Element-UI的CDN引入方式,以及一个简单的按钮和对话框组件的示例代码。
摘要由CSDN通过智能技术生成

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

创建第一个vue:
环境:
vscode打开终端:
安装好node.js,安装npm,以及镜像cnpm国内:
在这里插入图片描述

在这里插入图片描述
查看yarn环境:
在这里插入图片描述
在这里插入图片描述
安装vue脚手架:cnpm install -g @vue/cli
在这里插入图片描述
查看版本并且创建vuedemo01项目:
在这里插入图片描述
进入目录:启动服务

cd  vuedemo01

在这里插入图片描述
就会看到:
在这里插入图片描述
在这里插入图片描述
之后ctrl+左键进入localhost:8080
就会看到:
在这里插入图片描述
启动成功!

接下来就是element ui的安装;

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。

cdn引入:<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

或者(推荐):npm i element-ui -S
在这里插入图片描述
一个实际例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
<el-button @click="visible=true">Button</el-button>
<el-dialog :visible.sync="visible" title="HEllo world">
<p>Try element-ui</p>
</el-dialog>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js">
  </script>
  <script src="https://unpkg.com/element-ui/lib/index.js">
  </script>
  <script> 
  new Vue({
      el: '#app',
      data: function() {
        return {
          visible:false
        }
      }
    })
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值