zoukankan      html  css  js  c++  java
  • vue elementUi 环境安装应用

    1.安装node.js

    步骤:https://nodejs.org/en/ node官网,选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,安装完打开cmd命令行输入node -v,如果出现版本信息即表示安装成功。

    2.安装淘宝镜像安装相关依赖,打开cmd命令行输入:

    npm install -g cnpm --registry=http://registry.npm.taobao.org 
    

    3.安装vue-cli脚手架构建工具,打开cmd命令行输入:

    npm install -g vue-cli
    

    4.选定路径,新建vue项目,这里我建到D盘下面的vue文件里

    5.新建vue项目,打开cmd命令行输入:vue init  webpack +项目名称,例如:

    vue init webpack helloVue
    

     6.一路Yes 就行行了

    ? Project name mydemovue                        # => 项目名称
    ? Project description A Vue.js project          # => 项目描述
    ? Author malun <malun666@126.com>               # => 作者
    ? Vue build standalone                          # => 是否支持单文件组件
    ? Use ESLint to lint your code? Yes             # => 是否支持ESLint代码校验
    ? Pick an ESLint preset Standard                # => 校验的标准是什么?
    ? Setup unit tests with Karma + Mocha? Yes      # => 是否使用单元测试
    ? Setup e2e tests with Nightwatch? Yes          # => 是否使用e2e测试
    

    7.安装element-ui,打开cmd命令行输入:  

    npm i element-ui -S
    

    8.在项目中使用element-ui:

        在main.js引入,并使用:

    // 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/>'
    })
    

    9.查看效果:

        修改下components->HelloWorld.vue:

    <template>
      <div>
        <el-button @click="show = !show">Click Me</el-button>
        <div style="display: flex; margin-top: 20px; height: 100px;">
          <transition name="el-fade-in-linear">
            <div v-show="show" class="transition-box">.el-fade-in-linear</div>
          </transition>
          <transition name="el-fade-in">
            <div v-show="show" class="transition-box">.el-fade-in</div>
          </transition>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data: () => ({
          show: true
        })
      }
    </script>
    
    <style>
      .transition-box {
        margin-bottom: 10px;
         200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
      }
    </style>
    

    10.启动项目,打开cmd命令行输入:

    npm run dev

     

  • 相关阅读:
    内存泄漏 Memory Leaks 内存优化 MD
    Handler Thread 内部类引起内存泄露分析
    为什么不取消注册BroadcastReceiver会导致内存泄漏
    WebChromeClient 简介 API 案例
    WebViewClient 简介 API 案例
    java.net.URI 简介 文档 API
    android.net.Uri 简介 API
    RV 多样式 MultiType 聊天界面 消息类型 MD
    JS函数声明与定义,作用域,函数声明与表达式的区别
    CSS中table tr:nth-child(even)改变tr背景颜色: IE7,8无效
  • 原文地址:https://www.cnblogs.com/newbo/p/12454501.html
Copyright © 2011-2022 走看看