Tabla de contenido
Crea un proyecto llamado hello-vue
Dependencias de instalación: cuatro complementos: vue-router, element-ui, sass-loader y node-sass
Luego abra el proyecto creado con idea.
2. Crea una página de inicio de sesión
Elimine primero los archivos no utilizados
Cree el componente Main.vue de vista de página principal en el directorio de vistas
Cree una página de inicio de sesión para ver el componente Login.vue en el directorio de vistas
Configurar el enrutamiento en main.js
3. Pruebe npm run dev para ver los resultados
Preparar:
- Documentación oficial de Vue: Inicio | Enrutador Vue (vuejs.org)
- Documentación oficial de ElementUI: Element - Herramienta de creación rápida de prototipos de sitios web
1. Crea un proyecto
Crea un proyecto llamado hello-vue
vue init webpack hello-vue
Dependencias de instalación: cuatro complementos: vue-router, element-ui, sass-loader y node-sass
#进入工程目录
cd hello-vue
#安装vue-routern
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
Descripción del comando npm:
- npm install moduleName: instala el módulo en el directorio del proyecto
- npm install -g moduleName: -g significa instalar el módulo globalmente, y la ubicación específica en el disco depende de npm
- La ubicación del prefijo de configuración
- npm install -save moduleName: –save significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo de dependencias del archivo del paquete, -S es la abreviatura de este comando
- npm install -save-dev moduleName: –save-dev significa instalar el módulo en el directorio del proyecto y escribir dependencias en el nodo devDependencies del archivo del paquete, -D es la abreviatura de este comando
Luego abra el proyecto creado con idea.
2. Crea una página de inicio de sesión
Elimine primero los archivos no utilizados
La estructura del proyecto es la siguiente:
ilustrar:
- activos: se utiliza para almacenar archivos de recursos
- componentes: se utiliza para almacenar componentes funcionales de Vue
- vistas: se utiliza para almacenar componentes de vista de Vue
- enrutador: se utiliza para almacenar la configuración de vue-router
Cree el componente Main.vue de vista de página principal en el directorio de vistas
vista principal:
<template>
<div>首页</div>
</template>
<script>
export default {
name:"Main"
}
</script>
<style scoped>
</style>
Cree una página de inicio de sesión para ver el componente Login.vue en el directorio de vistas
<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>
index.jsCree un archivo de configuración de enrutamiento vue-router llamado vue-router en el directorio del enrutador
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
},
]
})
Escribir APP.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.jsConfigurar enrutamiento en
import Vue from 'vue'
import App from './App'
import router from "./router"
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(router)
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render:h=>h(App)
})
3. Pruebe npm run dev para ver los resultados
