zoukankan      html  css  js  c++  java
  • element-ui

    npm 安装方法:

    npm i element-ui -S

    CDN:

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    代码:

    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
      <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
    </body>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return { visible: false }
          }
        })
      </script>
    
    
    

    </html>

    vue中引入element
    在 main.js 中写入以下内容:
    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'
    
    Vue.use(ElementUI)
    
    new Vue({
    el: '#app',
    render: h => h(App)
    })
    
     

     注:import Vue from 'vue'; 

    其实最完整的写法是import Vue from "../node_modules/vue/dist/vue.js";

    1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。
    2.可以加载各种各样的文件:.js、.vue、.less等等。
    3.可以省略掉from直接引入。

  • 相关阅读:
    远程服务器同步配置
    什么是微服务架构,.netCore微服务选型
    Servlet与JSP版本历史以及Tomcat支持的版本
    JDK里面的JRE是什么
    JDK与Java SE/EE/ME的区别
    javaBean和Servlet有什么区别
    JSP的JSTL标签使用
    Java语法教程
    eclipse使用教程
    JSP生命周期
  • 原文地址:https://www.cnblogs.com/lhqdbk/p/11481841.html
Copyright © 2011-2022 走看看