Element + Vue 创建前端项目(IDEA版)

创建工程

 

  • 创建要给名为 hello-vue 的工程:vue init webpack hello-vue
  • 安装依赖,我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
  • # 进入工程目录
    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
  • npm 命令解释:
  • npm install moduleName:安装模块到项目目录下
  • ​​npm install -g moduleName:-g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置
  • npm install -save moduleName:–save 的意思是将模块安装到项目目录下,并在 package 文件的 dependencies 节点写入依赖,-S 为该命令的缩写
  • npm install -save-dev moduleName:–save-dev 的意思是将模块安装到项目目录下,并在 package 文件的 devDependencies 节点写入依赖,-D 为该命令的缩写
  • 创建登录页面

  • 把没有用的初始化东西删掉!
  • 完善目录结构:
  • 创建首页视图,在 views 目录下创建一个名为 Main.vue 的视图组件
  • <template>
      <div>首页</div>
    </template>
    
    <script>
        export default {
            name: "Main"
        }
    </script>
    
    <style scoped>
    
    </style>
  • 创建登录页视图在 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;
                        }
                    });
                }
            }
        }
    </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>
    
  • 创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件​​​
  • import Vue from 'vue'
    import Router from 'vue-router'
    
    import Login from '../views/Log'
    import Main from '../views/Main'
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          // 登录页
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          // 首页
          path: '/main',
          name: 'Main',
          component: Main
        }
      ]
    });
    
  • 配置路由,修改入口代码,修改 main.js 入口代码
  • // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    // 导入路由
    import router from './router'
    // 导入 ElementUI
    import ElementUI from 'element-ui'
    // 使用 element-ui 还需要导入一个 css 文件
    import 'element-ui/lib/theme-chalk/index.css'
    
    // 安装路由
    Vue.use(router);
    // 安装 ElementUI
    Vue.use(ElementUI);
    
    new Vue({
      el: '#app',
      // 启用路由
      router,
      // 启用 ElementUI
      render: h => h(App)
    });
    
  • 修改 App.vue 组件代码
  • <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App'
    }
    </script>

测试

  • 控制台输入:cnpm run dev
  • 可能会报错,出现 sass-loader 版本过高的问题,改成 7.3.1 即可
  • 在浏览器打开http://localhost:8080/#/login

嵌套路由

  • 嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
  • /user/foo/profile                     /user/foo/posts
    +------------------+                  +-----------------+
    | User             |                  | User            |
    | +--------------+ |                  | +-------------+ |
    | | Profile      | |  +------------>  | | Posts       | |
    | |              | |                  | |             | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+
  • 用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件
  • <template>
        <div>
          个人信息
        </div>
    </template>
    
    <script>
        export default {
            name: "UserProfile"
        }
    </script>
    
    <style scoped>
    
    </style>
  • 用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件
  • <template>
        <div>
          用户列表
        </div>
    </template>
    
    <script>
        export default {
            name: "UserList"
        }
    </script>
    
    <style scoped>
    
    </style>
  • 配置嵌套路由修改 router 目录下的 index.js 路由配置文件
  • import Vue from 'vue'
    import Router from 'vue-router'
    
    import Login from '../views/Log'
    import Main from '../views/Main'
    
    // 用于嵌套的路由组件
    import List from '../views/user/List'
    import Profile from '../views/user/Profile'
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          // 登录页
          path: '/login',
          name: 'Login',
          component: Login
        },
        {
          // 首页
          path: '/main',
          name: 'Main',
          component: Main,
          // 配置嵌套路由
          children: [
            {
              path: '/user/profile',
              component: Profile
            },
            {
              path: '/user/list',
              component: List
            }
          ]
        }
      ]
    });
    
  • 说明:主要在路由配置中增加了 children 数组配置,用于在该组件下设置嵌套路由
  • 修改首页视图,我们修改 Main.vue 视图组件,此处使用了 ElementUI 布局容器组件,代码如下:
  • <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>
  • 说明:在 元素中配置了 用于展示嵌套路由,主要使用 个人信息 展示嵌套路由内容

参数传递

  • 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。此时我们就需要传递参数了
  • 修改路由配置, 主要是在 path 属性中增加了 :id 这样的占位符
  • {
      path: '/user/profile/:id',
      name: UserProfile,
      component: UserProfile
    }
  • 传递参数
  • 此时我们将 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和路由中的 name 属性名称匹配,因为这样 Vue 才能找到对应的路由路径
  • <!-- name: 传组件名, params: 传递参数, 因为需要对象绑定,则使用 v-bind:to 简写为 :to -->
    <router-link :to="{name: 'UserProfile', params: {id:1}}">个人信息</router-link>
  • 接收参数, 在目标组件中
  • <!-- 在 template 中的元素,不能直接在根节点下,需要使用标签包含起来,要不然会报错 -->
    <!-- text {{$route.params.id}}" outside root element will be ignored. -->
    <div>
      <h1>个人信息</h1>
      {{$route.params.id}}
    </div>

使用 props 的方式

  • 修改路由配置 , 主要增加了 props: true 属性
  • {
        path: '/user/profile/:id', 
        name:'UserProfile', 
        component: UserProfile, 
        props: true
    }
  • 传递参数和之前一样
  • 接收参数为目标组件增加 props 属性
  • <template>
      <div>
        个人信息
        {{id}}
      </div>
    </template>
    
    <script>
        export default {
          props: ['id'],
          name: "UserProfile"
        }
    </script>
    
    <style scoped>
    
    </style>

组件重定向

  • 重定向的意思大家都明白,但 Vue 中的重定向是作用在路径不同但组件相同的情况下,比如:
  • {
       path: '/main',
       name: 'Main',
       component: Main
    },
    {
       // 重定向到 main 页面
       path: '/goHome',
       redirect: '/main'
    }
  • 说明:这里定义了两个路径,一个是 /main ,一个是 /goHome,其中 /goHome 重定向到了 /main 路径,由此可以看出重定向不需要定义组件
  • 使用的话,只需要设置对应路径即可
  • <el-menu-item index="1-3">
        <router-link to="/goHome">回到首页</router-link>
    </el-menu-item>

路由模式与 404

  • 路由模式有两种:
  • 修改路由配置,代码如下:
  • export default new Router({
      mode: 'history',
      routes: [
      ]
    });
  • 处理 404 创建一个名为 NotFound.vue 的视图组件,代码如下:
  • <template>
      <div>
        <h1>404, 你的页面走丢了</h1>
      </div>
    </template>
    
    <script>
        export default {
            name: "NotFount"
        }
    </script>
    
    <style scoped>
    
    </style>
    
  • 修改路由配置,代码如下:
  • import NotFound from '../views/NotFound'
    {
       path: '*',
       component: NotFound
    }

路由钩子与异步请求

  • beforeRouteEnter:在进入路由前执行
  • beforeRouteLeave:在离开路由前执行
  • 上代码:
  •   export default {
        props: ['id'],
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
          console.log("准备进入个人信息页");
          next();
        },
        beforeRouteLeave: (to, from, next) => {
          console.log("准备离开个人信息页");
          next();
        }
      }
  • 参数说明:

    • to:路由将要跳转的路径信息
    • from:路径跳转前的路径信息
    • next:路由的控制参数
      • next() 跳入下一个页面
      • next(’/path’) 改变路由的跳转方向,使其跳到另一个路由
      • next(false) 返回原来的页面
      • next((vm)=>{}) 仅在 beforeRouteEnter 中可用,vm 是组件实例
  • 在钩子函数中使用异步请求
  • 安装 Axios cnpm install --save vue-axios
  • 在main.js引用 Axios
  • // 引入 axios
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    // 安装 VueAxios
    Vue.use(VueAxios, axios);
  • 准备数据 :只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
  • // 静态数据存放的位置
    static/mock/data.json
  • 在 beforeRouteEnter 中进行异步请求
  •  export default {
        props: ['id'],
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
          console.log("进入路由之前");
          // 加载数据
          // 注意,一定要在 next 中请求,因为该方法调用时 Vue 实例还没有创建,
          // 此时无法获取到 this 对象,在这里使用官方提供的回调函数拿到当前实例
          next(vm => {
              // 进入路由之前,执行getData()方法
              vm.getData();
          });
        },
        beforeRouteLeave: (to, from, next) => {
          console.log("准备离开个人信息页");
          next();
        },
        methods: {
          getData: function () {
            this.axios({
              method: 'get',
              url: 'http://localhost:8080/static/mock/data.json'
            }).then(function (response) {
              console.log(response);
            }).catch(function (error) {
              console.log(error);
            });
          }
        }
      }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值