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 的视图组件
• 创建登录页视图在 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
• 

嵌套路由

• 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，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);
          });
        }
      }
    }