Vue第一次使用

cxuyuanLch

于 2022-03-08 17:03:22 发布

阅读量645

点赞数

文章标签： html css 前端 vue

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

版权

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>

cxuyuanLch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue第一次使用

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。创建第一个vue：环境：vscode打开终端：安装好node.js，安装npm,以及镜像cnpm国内：查看yarn环境：安装vue脚手架：cnpm install -g @vue/cli查看版本并且创建vuedemo01项目：进入目录：启动服务cd vued
复制链接

扫一扫