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

创建工程

 

  • 创建要给名为 hello-vue 的工程:vue init webpack hello-vue
  • Element + Vue 创建前端项目(IDEA版)_第1张图片
  • 安装依赖,我们需要安装 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 为该命令的缩写
  • 创建登录页面

  • 把没有用的初始化东西删掉!
  • Element + Vue 创建前端项目(IDEA版)_第2张图片
  • Element + Vue 创建前端项目(IDEA版)_第3张图片
  • 完善目录结构:
  • Element + Vue 创建前端项目(IDEA版)_第4张图片
  • 创建首页视图,在 views 目录下创建一个名为 Main.vue 的视图组件
  • 
    
    
    
    
  • 创建登录页视图在 views 目录下创建一个名为 Login.vue 的视图组件,其中 el-* 的元素为 ElementUI 组件
  • 
    
    
    
    
    
  • 创建路由,在 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 组件代码
  • 
    
    

测试

  • 控制台输入:cnpm run dev
  • 可能会报错,出现 sass-loader 版本过高的问题,改成 7.3.1 即可
  • 在浏览器打开http://localhost:8080/#/login
  • Element + Vue 创建前端项目(IDEA版)_第5张图片

嵌套路由

  • 嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
  • /user/foo/profile                     /user/foo/posts
    +------------------+                  +-----------------+
    | User             |                  | User            |
    | +--------------+ |                  | +-------------+ |
    | | Profile      | |  +------------>  | | Posts       | |
    | |              | |                  | |             | |
    | +--------------+ |                  | +-------------+ |
    +------------------+                  +-----------------+
  • 用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件
  • 
    
    
    
    
  • 用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件
  • 
    
    
    
    
  • 配置嵌套路由修改 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 布局容器组件,代码如下:
  • 
    
    
    
    
  • 说明:在 元素中配置了 用于展示嵌套路由,主要使用 个人信息 展示嵌套路由内容

参数传递

  • 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。此时我们就需要传递参数了
  • 修改路由配置, 主要是在 path 属性中增加了 :id 这样的占位符
  • {
      path: '/user/profile/:id',
      name: UserProfile,
      component: UserProfile
    }
  • 传递参数
  • 此时我们将 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和路由中的 name 属性名称匹配,因为这样 Vue 才能找到对应的路由路径
  • 
    个人信息
  • 接收参数, 在目标组件中
  • 
    
    

    个人信息

    {{$route.params.id}}

使用 props 的方式

  • 修改路由配置 , 主要增加了 props: true 属性
  • {
        path: '/user/profile/:id', 
        name:'UserProfile', 
        component: UserProfile, 
        props: true
    }
  • 传递参数和之前一样
  • 接收参数为目标组件增加 props 属性
  • 
    
    
    
    

组件重定向

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

路由模式与 404

  • 路由模式有两种:
    • hash:路径带 # 符号,如 http://localhost/#/login
    • history:路径不带 # 符号,如 http://localhost/login
  • 修改路由配置,代码如下:
  • export default new Router({
      mode: 'history',
      routes: [
      ]
    });
  • 处理 404 创建一个名为 NotFound.vue 的视图组件,代码如下:
  • 
    
    
    
    
    
  • 修改路由配置,代码如下:
  • 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);
            });
          }
        }
      }

 

你可能感兴趣的:(Vue,Element)