【Vue】12.Element-ui

1.简介

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建
官方: http://element-cn.eleme.io/#/zh-CN.

2.测试

2.1创建Vue-cli项目

删除多余的Vue

2.2导入npm包管理器

npm install vue-router --save-dev 			路由
npm i element-ui -s  					 Element-ui
npm install                                 加载所有依赖
npm install node-sass@4.14.1           加载sass，针对css的一种可编程的css拓展语言，方便开发
npm install sass-loader --save-dev
//npm install axios   加载axios
//npm install echarts --save

2.2.1 安装element插件

2.3测试运行

2.4创建文件夹

2.5 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");
                    } 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>

2.6 Main.vue

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

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

<style scoped>

</style>

2.7 index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../view/Main'
import Login from "../view/Login"

Vue.use(Router);
export default new Router({
    routes:[
        {
            path:'/main',
            component:Main
        },
        {
            path: '/login',
            component: Login
        }
    ]
});

2.8 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//ElementUI引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false

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

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2.9 App.vue

<template>
  <div id="app">
    <router-link to="/login">登陆</router-link>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

3.运行

npm run serve

4.VsCode配置vue模板

文件–>首选项–>用户片段–>搜索 vue.json

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}