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

项目的基本项目结构!sreen.jsvar vm = new Vue({el: '#screen',// 引入初始化数据data: components,//引入方法methods: interactions,// 引入加载时需要调用的方法mounted: function () {}});components 下的index.js 文件（全局初始化的一些参数）// 定义一个全局变量var

qq_43634411

2739人浏览 · 2020-11-22 15:36:48

qq_43634411 · 2020-11-22 15:36:48 发布

项目的基本项目结构!

在这里插入图片描述

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^