Vue简单使用及整合elementui

已于 2023-07-12 14:46:49 修改
阅读量1.1k 收藏
点赞数
文章标签： vue.js elementui 前端
于 2023-07-11 01:06:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Persistence___/article/details/131587172
版权

创建vue工程

在vue工程目录下npm install vue
在这里插入图片描述
下载离线vue
https://v2.vuejs.org/v2/guide/installation.html
在这里插入图片描述
引入工程中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <h1>
            {{name}}，好帅
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三"
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
测试
在这里插入图片描述

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>
            {{name}}，好帅,有{{num}}个人为他点赞
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num: 1
            }
        });
    </script>
</body>
</html>

测试页面
在这里插入图片描述
修改vm对象，绑定的值跟着变化
在这里插入图片描述

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>

        <h1>
            {{name}}，好帅,有{{num}}个人为他点赞
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app", //绑定元素   
            data:{  //封装数据
                name:"张三",
                num: 1
            },
            methods:{ //封装方法
                cancle(){
                    this.num -- ;
                }
            }
        });
    </script>
</body>
</html>

安装服务端vue2语法提示

在这里插入图片描述

安装浏览器vue工具

谷歌商店下载
在这里插入图片描述
在打开html时候可以看到有个vue选项看到vue中的对象
在这里插入图片描述

Vue模块化开发

全局安装npm install webpack -g
在这里插入图片描述
全局安装npm install webpack -g @vue/cli-init
在这里插入图片描述
安装 sudo npm install -g @vue/cli
在这里插入图片描述
创建文件夹，使用vue init webpack vue-demo
在这里插入图片描述
选择默认的
在这里插入图片描述
进入demo工程启动，npm run dev
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

自己编写自己的vue的模块化页面

1.新增组件

在这里插入图片描述

<template>
  <div>
    <h1>你好，hello，{{ name }}</h1>
  </div>
</template>

<script>

export default {
  name: 'Hello',
  data () {
    return {
      name: "张三"
    }
  }
}
</script>

<style scoped></style>

2.在index.js中引入新的组件并且添加新的路由配置

在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

3.测试/hello

在这里插入图片描述

4.添加项目route本地跳转

在App.vue中添加 <router-link跳转

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/hello">去hello</router-link>
    <router-link to="/">去首页</router-link>
    <!-- 路由视图 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.测试在这里插入图片描述

安装element ui

npm i element-ui
在这里插入图片描述
在工程中也可以看到
在这里插入图片描述

1.在main.js中引入elementUI模块

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.在Hello.vue组件中添加element 元素

<template>
  <div>
    <h1>你好，hello，{{ name }}</h1>
    <el-radio v-model="radio" label="1" border>备选项1</el-radio>
    <el-radio v-model="radio" label="2" border>备选项2</el-radio>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      name: '张三',
      radio: '2'
    }
  }
}
</script>
<style scoped>

3.测试结果，radio显示正常

在这里插入图片描述

4.添加Vue的快捷模版

在这里插入图片描述
在这里插入图片描述
粘贴保存

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}

5.创建组件

<!--  -->
<template>
        <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            tableData: Array(20).fill(item)
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>

在这里插入图片描述

6.添加路由/table

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

7.修改App.vue

将el-main抽离到组件里

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']" router="true">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="/table">用户列表</el-menu-item>
          <el-menu-item index="/hello">去hello</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    
    <el-main>
      <router-view></router-view>
      <!-- <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table> -->
    </el-main>
  </el-container>
</el-container>
</template>

<script>
  // export default {
  //   data() {

  //   }
  // };
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

8.测试

在这里插入图片描述

Persistence___
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueAdmin:使用Vue+ElementUI搭建的管理系统的简单架子
05-28
vue-admin 原型是根据做了一些修改 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 目前版本为 v4.0+ 基于 vue-cli 进行构建 对前端不是很了解 所以就是一边看一边搜 根据自己想要的修改了一些 整合自己的后端基础版本 完成了登录注销等 获取用户信息附带信息是写死的 使用SpringCloud Alibaba构建的 包含一些基础模块 动态路由是先把所有的页面都定义在asyncRoutes中 然后根据登录的角色 去匹配路由meta里的角色来生成路由 然后根据路由生成菜单 暂时没太看明白这里的具体逻辑 后面懂了再写 原作者重写了导航栏这一部分 不是用的ElementUI 所以对获取路由变成菜单的逻辑还不是很懂 详解(有空再
electron +vue +elementui整合的项目
01-05
electron +vue +elementui 框架整合 ，减少整合的麻烦 相关的命令有 npm install npm run dev npm run build -- --win npm run build -- --mac
【Vue】Vue集成Element-UI框架
m0_55394328的博客
03-23 1684
点击进入Element-UI 是一套基于 Vue 2.0 的桌面端组件库，由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件，简化了常用组件的封装，大大降低了开发难度，使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密，开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。今日之学习篇章已然落笔，愿诸君有所收获。🤩倘若您对此深感兴趣，不妨关注此专栏，新知将持续涌现，与您共舞思维的华章。😎。
vue项目安装elementui
最新发布
weixin_52236586的博客
06-04 189
【代码】vue项目安装elementui。
【VUE】4、VUE项目中引入Element-UI
热门推荐
Asurplus
04-02 8万+
一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率 Efficiency 简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别
Vue整合ElementUI
越努力越幸运的博客
10-09 2万+
Vue整合ElementUI 首先说一个事儿，要用ElementUI，最好是用Vue的脚手架先搭建好项目再用，如果直接在HTML中通过导入在线的vue、axios、elementUI的依赖，然后直接用的话。。。。会很麻烦，而且布局可能也会跟官网给你的不太一样。（这雷我先踩了，不信的小伙伴也大可以自己去试一下，毕竟也有可能是本人智力问题嘿嘿嘿） ok，废话不多说，我们直接从vue怎么整合ElementUI说起。 首先，我们通过vue-cli创建我们Vue的脚手架。（不知道怎么下载vue-cli和搭建的，可以看
ElementUI安装与使用指南
ChinaDragon10的博客
01-30 2616
ElementUI使用指南
Element UI组件的安装及使用
钱多多的博客
10-30 7708
按需引入不同于全部引入，不会一上来引入全局的组件和样式，而是看使用了哪些组件，根据使用的组件进行注册，并且只引入这些组件相关的样式。目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。组件库中UI组件丰富，将60多个组件划分了基础类、form类、data类及提示和导航类等，文档描述齐全，使用方便。优点：组件丰富，文档齐全，兼容性也很高，支持主流的浏览器和移动端。借助插件，可以只引入需要的组件，以达到减小项目体积的目的。
从0-1创建Vue项目,整合ElementUI
m0_55627541的博客
04-22 3828
从0-1创建Vue2.0项目
vue中使用elementUI组件手动上传图片功能
10-15
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
ssm整合 vue+elementui+ssm
06-15
在Vue.js与ElementUI的整合中，前端开发者会在`src`目录下创建`components`、`views`、`router`等子目录，分别存放可复用的组件、页面视图和路由配置。使用ElementUI的组件，可以快速构建出美观且响应式的用户界面。...
vue使用elementui结合高德地图的定位以及位置显示
11-25
下面将详细解释如何在Vue项目中实现ElementUI与高德地图的整合，特别是定位和位置标记功能。 首先，我们需要在项目中引入ElementUI和高德地图API。安装ElementUI可以通过npm命令`npm install element-ui --save`...
前端nodejs+vue+elemetUI的安装配置
落白的博客
11-23 568
前端nodejs+vue+elemetUI的安装配置 文章目录前端nodejs+vue+elemetUI的安装配置一、Node.js的环境搭建1.nodejs介绍2.npm是什么?3.环境搭建与安装3.1 下载3.2 解压3.3 环境变量配置3.4 配置npm全局模块路径和cache默认安装位置3.5 修改npm镜像提高下载速度一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 一、Node.js的环境搭建 1.nodejs介绍 Node.js是一个基于Chrome V8引擎的[Ja
创建vue项目：vue ui界面创建项目后，安装Element Ui插件、axios 依赖，如何启动vue项目，npm run serve，启动vue项目方式（保姆级教程三）
zhangfuping123456789的博客
12-07 2017
node、vue、element ui、axios
ElementUI组件的安装和使用
u013558123的博客
02-22 1330
ElementUI组件的安装和使用
第11讲：vue脚手架集成ElementUI
分享日常工作技术
12-15 1699
使用如下命令集成ElementUI在src/main.js文件中引用ElementUI。
在vue项目中进行ElementUI 组件的安装、引入
莫绝岚的小屋
09-01 3155
在vue项目中进行ElementUI 组件的安装、引入，点击package.json文件，查看element-ui插件是否安装成功。建立plugins目录，并创建elements.js文件，导入相关配置。在main.js文件中导入element.js文件。按照以上步骤配置完成即可使用element组件。执行以下命令安装element-ui插件。
Vue与elementUi联合使用
红豆和绿豆的博客
04-23 5747
（1）vue支持elementUI的组建 ​​​​​​Element - The world's most popular Vue UI framework （2）如何在代码中引入elementUI npm 安装 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S ¶CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式
element ui 安装 简易过程 已解决
PHP代码的博客
02-22 1359
<div></div>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值