ElementUI是饿了么基于 Vue 2.0 的桌面端组件库，https://element.eleme.cn/#/zh-CN/component/installation
下面进入实战，根据之前创建Vue-cli 笔记（十一）一样再来一遍创建项目
1.创建工程，在文件夹下打开cmd
即初始化一个叫 hello-vue 的项目
一路选 no，选第一个，nonono，选最后一个自己安装
会生成下面的文件
2.然后安装插件组件
-
# 进入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
-
3.创建成功后用idea打开，并删除净东西 创建views和router文件夹用来存放视图和路由
4.router目录下新建index.js
-
//导入vue
-
import Vue from
'vue';
-
import VueRouter from
'vue-router';
-
//导入组件
-
import Main from
"../views/Main";
-
import Login from
"../views/Login";
-
//使用
-
Vue.use(VueRouter);
-
//导出
-
export default new VueRouter({
-
routes: [
-
{
-
//登录页
-
path: '/main',
-
component: Main
-
},
-
//首页
-
{
-
path: '/login',
-
component: Login
-
},
-
]
-
-
-
})
-
-
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>
-
-
6.main.js 里配置 导入所有
-
import Vue from
'vue'
-
import App from
'./App'
-
import router from
'./router'
-
// 导入elementUI
-
import ElementUI from
'element-ui';
-
import
'element-ui/lib/theme-chalk/index.css';
-
-
-
Vue.use(router);
-
Vue.use(ElementUI);
-
Vue.config.productionTip =
false
-
-
new
Vue
({
-
el: '#app',
-
router,
-
render:h=>h(App)
//ElementUI
-
})
-
7.App.js
-
<template>
-
<div id="app">
-
<h1>哈哈哈哈哈哈哈swk
</h1>
-
<router-view>
</router-view>
-
</div>
-
</template>
-
-
<script>
-
-
export
default {
-
name:
'App',
-
}
-
</script>
-
8.运行的结果
转载：https://blog.csdn.net/Sunweikai123/article/details/117420352
查看评论