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

• 路由模式有两种：
  • hash：路径带 # 符号，如 http://localhost/#/login
  • history：路径不带 # 符号，如 http://localhost/login
• 修改路由配置，代码如下：

• 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);
          });
        }
      }
    }