vue+elementUI

vue+elementUI

工程准备

根据之前创建vue-cli项目一样再来一遍 创建项目
1． 创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2． 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 初始化一个vue工程
vue init webpack hello-vue
# 进入项目
cd hello-vue
# 路由安装
npm install vue-router --save-dev
# elementUI安装
npm i element-ui -S
# 安装依赖
npm install
# 安装sass加载器
npm install sass-loader --save-dev 
npm install node-sass --save-dev

注意：node-sass和sass-loader版本问题，建议：sass-loader:7.3.1,node-sass:4.14.1

npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev

idea打开项目，清理不需要的文件

项目搭建

1. 根目录下创建views,创建vue文件Login登陆页，Main主页

2. Main.vue

   <template>
     <h1>首页</h1>
   </template>
   <script>
     export default {
       name: "Main"
     }
   </script>
   <style scoped>
   </style>
   

   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>
   

3. 根目录创建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
       },
     ]
   
   })
   

4. src/main.js

   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);
   
   new Vue({
     el: '#app',
     router,
     render: h => h(App) //element-ui
   })
   

5. src/App.vue

   <template>
     <div id="app">
       <router-view/>
     </div>
   </template>
   
   <script>
   
   export default {
     name: 'App'
   }
   </script>
   

6. 启动，访问：http://localhost:8080/#/login

路由嵌套

views/user/Profile.vue

<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "UserProfile"
  }
</script>
<style scoped>
</style>

views/user/List.vue

<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "UserList"
  }
</script>
<style scoped>
</style>

修改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">
                <!--插入的地方-->
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/user/list">用户列表</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>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-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>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
<script>
    export default {
        name: "Main"
    }
</script>
<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

修改 router/index.js

//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//导入子模块
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/main',
      component: Main,
      //  写入子模块
      children: [
        {
          path: '/user/profile',
          component: UserProfile,
        }, {
          path: '/user/list',
          component: UserList,
        },
      ]
    },
    //首页
    {
      path: '/login',
      component: Login

    },
  ]
})

访问测试：http://localhost:8080/#/main

参数传递

方式1：取值

1. Main.vue

   <router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
   

2. router/index.js

   path: '/user/profile/:id',
   component: UserProfile,
   name: 'UserProfile'
   

3. Profile.vue取值

   # 注意不能直接在template写，可以放在div标签里
   {{$route.params.id}}
   

方式2： props 减少耦合

1. Main.vue不变

2. router/index.js 增加props：true

   path: '/user/profile/:id',
   component: UserProfile,
   name: 'UserProfile',
   props: true
   

   3. Profile.vue

   <template>
     <div>
       <h1>个人信息</h1>
       {{id}}
     </div>
   
   </template>
   
   <script>
   export default {
     //接收参数
     props: ["id"],
     name: "UserProfile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

   重定向

   1. Main.vue增加重定向的连接

      <!--重定向-->
      <el-menu-item index="1-3">
        <router-link to="/goHome">回到主页</router-link>
      </el-menu-item>
      

   2. router/index.js /goHome会重定向到/main主页

   {
     path: '/goHome',
     redirect: '/main'
   }
   

登陆后显示用户信息

Login.vue 传参

this.$router.push("/main/" + this.form.username);

router/index.js

path: '/main/:name',
props: true,

views/Main.vue

//取参展示
<span>{{name}}</span>

export default {
  props: ["name"],
  name: "Main"
}

路由模式

• 默认：hash 带#的 user/#/add
• 常用：history 不带# user/add

router/index.js

export default new VueRouter({
  mode: "history",

404页面配置

自定义404页面views/NotFound.vue

<template>
  <h1>404</h1>
</template>

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

<style scoped>

</style>

router/index.js配置路由

import NotFound from "../views/NotFound"

{
  path: '*',
  component: NotFound
}

路由钩子与异步请求

• beforeRouteEnter：进入路由前执行
• beforeRouteLeave：离开路由前执行

准备data.json数据放在 static/mock/下，启动项目，确定能通过http://localhost:8080/static/mock/data.json访问到数据

安装axios

npm install axios --save
npm install vue-axios --sava

src/main.js

import Axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, Axios);

views/user/Profile.vue

<template>
  <div>
    <h1>个人信息</h1>
    <!--取参方式1-->
    <!--    {{$route.params.id}}-->
    <!--取参方式2，路由里添加：props:true-->
    {{ id }}
  </div>

</template>

<script>
export default {
  props: ["id"],
  name: "UserProfile",
  beforeRouteEnter(to, from, next) {
    console.log("进入路由前")
    next(vm => {
      vm.getData();
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log("离开路由前")
    next();
  },
  methods: {
    getData: function () {
      this.axios({
        method: "get",
        url: "/static/mock/data.json"//或者http://localhost:8080/static/mock/data.json
      }).then(function (res) {
        console.log(res);
      })
    }
  }
}
</script>

<style scoped>

</style>