vue+element

简介#

官网：https://element.eleme.cn/#/zh-CN

安装element-ui#

# 创建vue-cli 项目
	vue init webpack vue-hello

# 安装 element ui
	cnpm i element-ui -S

//安装SASS加载器 css加载器
cnpm install sass-loader node-sass --save-dev
//启动测试
cnpm run dev 

使用#

完整引入main.js#

import Vue from 'vue';
import App from './App.vue';

//导入element,必要的两个东西
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//声明ElementUI模块
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

第一个的demo#

创建组件button.vue#

# 在路由进行注册
	routes: [{path: '/',component:Button}]

  

button.vue

<template>
  <dvi>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row>
  </dvi>
</template>

<script>
    export default {
        name: "Button"
    }
</script>

<style scoped>

</style>

组件的使用#

# el-组件名字 
	表示组件
# 属性 写在组件上  
	type round表示属性:用来修改样式
<el-button type="primary" round>主要按钮</el-button>

layout布局#

# 通过基础的 24 分栏，迅速简便地创建布局
	分为row 和 24 col 
# 使用
	<el-row>
  		<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
 	 	<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
	</el-row>
	

Input Methods#

# el组件
	元素上存在 属性 ，事件 ，方法(是指组件的方法)
	事件的绑定用 @事件=""
	方法的绑定用 ref="组件别名"  调用时用this.$refs.组件别名.方法

Npm命令解释#

npm install moduleName --save(用于正式环境)

• 将项目模块写入到package.json的dependencies节点
• 安装模块到当前node_modules文件夹下
• 运行npm install时，会将模块下载到当前node_modules目录下

npm install moduleName --save-dev（用于开发环境）

• 将项目模块写入到package.json的devDependencies节点
• 安装模块到当前node_modules文件夹下
• 运行npm install时，会将模块下载到当前node_modules目录下

npm install moduleName -g

• 安装模块到全局，不会在项目node_modules目录中安装
• 不会将模块信息写入到dependencies或devDependencies节点
• 运行npm install时，不会下载该模块

npm install moduleName

• 安装模块到当前node_modules文件夹下
• 不会将模块信息写入到dependencies或devDependencies节点
• 运行npm install时，不会下载该模块

devDependencies节点下的模块是开发时候需要的，如构建工具glup、webpack，预处理器less、sass这些只在开发环境有用，所以使用–save-dev安装

dependencies节点下的模块是线上代码运行需要的，如axios、vue-router、vuex，所以需要使用–save安装

创建目录视图view#

Login.vue#

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onsubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return{
        form:{
          username:'',
          password:''
        },
        //表单验证，需要在 el-form-item 元素中增加prop属性
        rules:{
          username:[
            {required:true,message:"账号不可为空",trigger:"blur"}
          ],
          password:[
            {required:true,message:"密码不可为空",tigger:"blur"}
          ]
        },

        //对话框显示和隐藏
        dialogVisible:false

      }
    },
    methods:{
      onSubmit(formName){
        //为表单绑定验证功能
        this.$refs[formName].validate((valid)=>{
          if(valid){
            //使用vue-router路由到指定界面，该方式称为编程式导航
            this.$router.push('/main');
          }else{
            this.dialogVisible=true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin:180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title{
    text-align:center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

Main.vue#

<template>
    <h1>主页</h1>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

创建路由#

先创建router目录,在创建index.js

import Vue from "vue";
import VueRouter from "vue-router";

import Login from "../view/Login";
import Main from "../view/Main";
//声明路由
Vue.use(VueRouter)

//创建路由
export default new VueRouter({
  //定义路由转发
  routes:[
    {
      //路径,转到哪个组件
      path:"/login",
      component : Login
    },
    {
      //路径,转到哪个组件
      path:"/main",
      component : Main
    }
  ]
})

编写入口#

导入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'

//导入element,必要的两个东西
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


import Router from "./router/index" //就会自动注册组件
Vue.config.productionTip = false

//声明ElementUI模块
Vue.use(ElementUI);



new Vue({
  el: '#app',
  render: h => h(App),
  router:Router//就会自动注册组件
});

bug解决#

TypeError: this.getResolve is not a function

原因：安装的sass-loader的版本为最新8.0.0，查看网上资料说是版本过高导致编译错误。

解决方法：

把项目package.json文件中sass-loader版本改为7.3.1。执行命令，重新安装项目依赖：

Error in render: "TypeError: Cannot read property 'matched' of undef

出现错误的原因是在手写一个vue的路由组件的时候，忘了在new vue 里面写router

解决:

router:Router//就会自动注册组件