记录Vue结合Element-Ui组件库的安装与基本用法

记录Vue结合Element-Ui组件库的安装与基本用法

1. 创建工程

• 选择一个文件夹 cmd 创建一个名字为 hello-vue 的工程

	vue init webpack hello-vue

• 安装依赖，需要安装 vue-router、element-ui、sass-loader、node-sass 四个插件（如果安装失败尝试使用 cnpm 安装）

// 进入 hello-vue 目录
cd hello-vue
// 安装 vue-router 路由
npm install vue-router --save-dev
// 安装 element-ui
npm i element-ui -S
// 安装依赖
npm install
// 安装 sass加载器
cnpm install sass-loader node-sass --save-dev
// 启动测试
npm run dev

2. 测试vue基本语法和使用

• 取值

<div id="app">
    {{message}}
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        }
    });
</script>

• v-if

<div id="app">
    <h1 v-if="ok">
        yes
    </h1>
    <h1 v-if="!ok">
        no
    </h1>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
           ok:true,
        }
    });
</script>

• v-for

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message:"hello java"},
                {message:"hello php"}
            ]
        }
    });
</script>

• 绑定事件

<div id="app">
    <button v-on:click="sayHi">
        sayHi
    </button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hi java and vue"
        },
        methods:{
            sayHi :function () {
                alert(this.message)
            }
        }
    });
</script>

• 双向绑定

<div id="app">
    <br>输入框
    输入的文本：<input type="text" v-model="message"/>
    {{message}}

    <br>单选框
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女
    {{sex}}

    <br>select选择框
   <select v-model="select">
       <option disabled>请选择</option>
       <option>A</option>
       <option>B</option>
       <option>C</option>
   </select>
    {{select}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"111",
            sex:'',
            select:''
        }
    });
</script>

• 定义组件

<div id="app">
    <it v-for="item in items" v-bind:its="item"></it>
</div>
<script>
    <!--定义一个Vue组件-->
    Vue.component("it",{
        props:['its'],
        template:'<li >{{its}}</li>',
    });

    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","php","css"]

        }
    });
</script>

3. 使用element-ui

• main.js中引入 ElementUI 和 router

import Vue from 'vue';
import App from './App';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js';

Vue.use(ElementUI);
Vue.use(router);

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

• src下创建/router/index.js文件，安装路由并且配置导出路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/user/login'
//安装路由
Vue.use(VueRouter);
//配置路由导出配置
export default new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/login',
            component:Login
        }
    ]
});

• 创建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="dialogVisible"
      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: '密码不能为空',trigger:'blur'}
          ]
        },
        //对话框显示和隐藏
        dialogVisible:false
      }
    },
    methods:{
      onSubmit(formName) {
        //为表单绑定验证功能
        this.$refs[formName].validate((valid) =>{
          if (valid){
            //使用 vue-router路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main/"+this.form.username);
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>
<style 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>

• npm run dev 启动项目，http://localhost:8080/login访问
  

• 路由嵌套传递参数
  

路由嵌套：在router/index.js的routes中使用children:[ ]。
传递参数：<router-link :to="{name:'profile',params:{id:1}}">，
并且path路径后加/：id，在router/index.js的routes的children:[ ]中使用属性 props:true，可以实现参数的传递，props:[‘参数名’]接收。（若没有设置props属性可以使用{{ $route.params.id}}接收）

1. 创建Main.vue文件

<template>
<div>
      <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>

              <el-menu-item index="1-1">
                <!-- profile -->
                <router-link :to="{name:'profile',params:{id:1}}">个人信息</router-link>
                <!-- <router-link to="/profile">个人信息</router-link> -->
              </el-menu-item>

              <el-menu-item index="1-2">
                <router-link :to="{name:'list',params:{id:123}}">用户列表</router-link>
                <!-- <router-link to="/list">用户列表</router-link> -->
              </el-menu-item>

              <el-menu-item index="1-3">
                <!-- <router-link :to="{name:'list',params:{id:1}}">用户列表</router-link> -->
                <router-link to="/main">goMian</router-link>
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <e1-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </e1-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right:15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{name}}</span>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container>
</div>
</template>

<script>
export default {
    name: 'Main',
    props:['name']

}
</script>

<style scoped>
    .el-header {
      background-color: #0399e4;
      color: rgb(26, 23, 207);
      line-height: 60px;
    }

    .el-aside {
      color: rgb(30, 7, 230);
    }

2. 创建List.vue、Profile.vue文件

<template>
 
    <div>
        <h1>Profile</h1>
       {{ $route.params.id}}
    </div>
    
</template>

<script>
export default {
    name:'Profile',
    beforeRouteEnter:(to,from,next)=>{

        console.log('进来了');
        next(vm=>{
            vm.getData();
        });
   
     
    },
    methods: {
        getData:function(){
            this.axios({
                method:'get',
                url:'http://localhost:8080/static/mock/data.json'
            }).then(function (response){
                console.log(response)
            });
        }
    },
}
</script>

<style>

</style>

<template>
  <div>
      <h1>List</h1>
      <!-- {{$route.params.id}} -->
      {{id}}
  </div>
</template>

<script>
export default {
    props:['id'],
    name:'Lsit'

}
</script>

<style>

</style>

3./router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Main from '../views/user/Main'
import List from '../views/user/List'
import Profile from '../views/user/profile'
import Login from '../views/user/login'
import NotFound from '../views/user/NotFound'


Vue.use(VueRouter);

export default new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/main/:name',
            props:true,
            name:'main',
            component:Main,
            children:[ 
                {
                    path:'/list/:id',
                    name:'list',
                    component:List,
                    props:true
                },
                {
                    path:'/profile/:id',
                    // path:'/profile',
                    name:'profile',
                    component:Profile
                }
            ]
        },
        {
            path:'/login',
            component:Login
        }
    ]
});

• 重定向

{ 
    // 重定向
   path:'/goMian',
   redirect:'/main'
}

• 404页面

path:’*’ 路径未匹配到则走 * 路径 到404页面

<template>
  <div>
      <h1>404,页面没有找到</h1>
  </div>
</template>

<script>
export default {
    name:'NotFound',
}
</script>

<style>

</style>

{
   path:'*',
   component:NotFound
}

• 使用路由钩子发起axios异步请求

1. 安装 axios

npm install --save axios vue-axios

2. main.js引入axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3. beforeRouteEnter

<script>
export default {
    name:'Profile',
    beforeRouteEnter:(to,from,next)=>{

        console.log('进来了');
        next(vm=>{
            vm.getData();
        });
   
     
    },
    methods: {
        getData:function(){
            this.axios({
                method:'get',
                url:'http://localhost:8080/static/mock/data.json'
            }).then(function (response){
                console.log(response)
            });
        }
    },
}
</script>