Vue第一次使用

最新推荐文章于 2022-04-12 17:07:30 发布

cxuyuanLch

最新推荐文章于 2022-04-12 17:07:30 发布

阅读量681

点赞数

文章标签： html css 前端 vue

本文链接：https://blog.csdn.net/cxuyuanLch/article/details/123356884

版权

这篇博客介绍了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>