四、Vue实战快速上手
实战采用ElementUI组件库
1、创建工程
#离线创建webpack模板
vue init webpack vue-elementui --offline
#在线创建webpack模板
vue init webpack vue-elementui
2、安装依赖
#安装vue-router
npm install vue-router --save-dev
#安装ElementUI依赖
npm i element-ui -S
#安装依赖
npm install
#安装SASS加载器
npm install sass-loader node-sass --save-dev
3、npm 命令解释
4、用IEDA打开项目
把没有的初始化东西删掉
在src下创建如下目录:
- assets:用于存放资源
- components:用于存放Vue功能性的组件
- views:用于存放Vue视图组件
- router:存放vue-router配置
5、创建视图
5.1 首页视图Main.vue
在views
目录下创建Main.vue
的视图组件
<template>
<div>首页</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
5.2 登录页视图Login.vue
在views
目录下创建一个名为Login.vue
的视图组件,其中el-*
的元素为 ElementUI 组件;
<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;
}
});
},
handleClose(done){
this.$confirm('确定关闭吗').then(() => {
// function(done),done 用于关闭 Dialog
done();
console.info("点击右上角 'X' ,取消按钮或遮罩层时触发");
}).catch(() => {
console.log("点击确定时触发");
});
}
}
}
</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、创建路由index.js
在router目录下创建index.js
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
Vue.use(Router);
export default new Router({
routes:[
{
path:'/main',
name:'main',
component:Main
},
{
path:'/login',
name:'login',
component:Login
}
]
})
注意:component不要写成components
7、配置路由main.js
在main.js中配置路由
import Vue from 'vue'
import App from './App'
import router from './router'
//导入element-ui
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({
el: '#app',
router, //配置路由
render: h => h(App)//启用 ElementUI
});
8、在App.vue中添加视图
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
9、启动运行测试:npm run dev
报错:
sass-loader版本太高了,修改package.json
"sass-loader": "^7.3.1",
然后重新打包:
cnpm install
有出现了新的错误
Module build failed: Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
解决办法:
// 卸载node-sass
npm uninstall node-sass
// 然后安装4.x版本(5.0之前)
npm install node-sass@4.14.1
然后重新打包:
cnpm install
再次运行:
npm run dev
成功!
测试访问: