vue.js 加element ui不用 vue-cli 脚手架直接导入 vue和 element包形式

最新推荐文章于 2024-09-13 16:01:23 发布

qq_43634411

最新推荐文章于 2024-09-13 16:01:23 发布

阅读量2.7k

点赞数 1

分类专栏： element ui 文章标签： vue js html css 前端

本文链接：https://blog.youkuaiyun.com/qq_43634411/article/details/109954650

版权

element ui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Vue框架构建的应用项目的结构。项目包含sreen.js作为主入口文件，通过定义全局变量components来初始化页面元素的数据，并定义了交互方法集合interactions。此外，还展示了如何在HTML页面中使用Vue指令绑定这些数据和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目的基本项目结构!

在这里插入图片描述

sreen.js

在这里插入图片描述

var vm = new Vue({
  el: '#screen',
  // 引入初始化数据 
  data: components,
  //  引入方法
  methods: interactions,
  // 引入 加载时需要 调用的方法
  mounted: function () {

  }
});

components 下的index.js 文件（全局初始化的一些参数）

在这里插入图片描述

// 定义一个全局变量
var components = {};
// components.debug = false;
//  全局变量中添加 你 要 初始化的 一些东西 
//-------------top区域start----------------
components.topBackground = {
  //header背景
  data: {
    url: "./images/index/headline.png",
  },
  // 消息提醒
  messageIcon: {
    url: "./images/index/message-icon.png",
  },
  //头像
  headPortrait: {
    url: "./images/index/head-portrait.png",
  },
}

interactions 下的 index.js

// 定义 一个 局部的方法 变量 （注意一定要用 let  不能用var 为什么 自己百度一下 var  let const 区别）
let interactions = {};
// 定义一个方法 haha()
interactions.haha = function (val) {
  // this.pagination.currentPage = val;
  console.log(阿斯达)
}

html 页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>日照app管理后台</title>
  <!-- <link rel="stylesheet" href="../dist/screen-0.4.4.min.css" media="all"> -->

  <link rel="stylesheet" href="../lib/element-ui/element-ui-2.4.8.min.css" />
  <link rel="stylesheet" href="../lib/element-ui/icon.css" />
  <link rel="stylesheet" href="./style/index.css">
</head>

<body>
  <div id="screen">
    <div>
      <p @click='haha'>登录</p>
      {{components.topBackground.data.url}}
      <el-button @click='haha'>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </div>
  </div>
</body>

<script src="../lib/vue/vue-2.6.10.min.js"></script>
<script src="../lib/axios/axios-0.18.0.min.js"></script>

<!-- <script src="../dist/screen-0.4.4.min.js"></script> -->

<script src="../lib/element-ui/element-ui-2.4.8.min.js"></script>
<script src="../lib/element-ui/icon.js"></script>
<!-- <script src="../lib/font-awesome/font-awesome-4.7.0/css/font-awesome.min.css"></script> -->

<!-- 这个引入相应的变量和相应的方法集 -->
<script src="./components/index.js"></script>
<script src="./interactions/index.js"></script>
<script src="../common/screen.js"></script>

</html>