Python正课132 —— Vue 进阶5

本文内容皆为作者原创，如需转载，请注明出处：https://www.cnblogs.com/xuexianqi/p/13179358.html

一：项目搭建

1.创建项目目录

cd 项目目录[荏苒资讯]
vue init webpack renran

例如，我要把项目保存在桌面下的子目录renran ~/Desktop/renran，可以如下操作：

cd Desktop/renran
vue init webpack renran_pc

上面的操作步骤，等同于执行了下面这句命令。

npm run dev

接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)

2.初始化项目

清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式

二：安装路由vue-router

官方文档：https://router.vuejs.org/zh/

1.下载安装路由组件

npm i vue-router -S
# npm install vue-router --save

2.配置路由

初始化路由对象

在src目录下创建routes路由目录，在router目录下创建index.js路由文件

index.js路由文件中，编写初始化路由对象的代码 .

// 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

// 2. 暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用
export default new Router({
  // 设置路由模式为‘history’，去掉默认的#
  mode: "history",
  routes:[
    // 路由列表
    // {
    //   name:"路由名称[对应组件的name值，将来用于跳转页面]",
    //   path: "访问url路径",
    //   component: 组件名
    // },
  ]
})

3.注册路由信息

打开main.js文件，把router路由规则对象注册到vue中，代码：

// 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/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
});

4.在视图中显示路由对应的内容

在App.vue组件中，添加显示路由对应的内容。代码：

注意：如果在vue创建项目的时候，设置安装vue-router，则项目会自动帮我们生成上面的router目录和index.js里面的代码，以及自动到main.js里面注册路由对象。

三：路由对象提供的操作

1.在我们安装注册了vue-router组件以后，vue-router在vue项目中会帮我们在全局范围内所有组件里面创建2个对象给我们使用：

1.this.$router，可用于在js代码中进行页面跳转。

2.this.$route，可用于获取地址栏上面的url参数。

2.页面跳转

在vue-router提供的操作中， 进行页面跳转有2种方式：

1. 使用来跳转

2. 在

   this.$router.push()跳转

   4.参数传递

   vue-router提供了this.$route，可以让我们接收来自其他页面的附带参数。参数有2种：

   1.查询字符串(query string)，就是地址栏上面?号后面的参数，

   例如：http://localhost:8008/user?name=xiaoming&pwd=123，这里name=xiaoming&pwd=123就是查询字符串参数。

   2.路由参数(router params)，就是地址栏上面路由路径的一部分，

   例如：http://localhost:8080/user/300/xiaoming，此时，300属于路由路径的一部分，这个300就是路由参数.，当然，xiaoming,或者user也可以理解是路由参数，就是看我们的页面中是否需要接收而已。

   3.获取查询字符串

   1. 必须先有一个页面跳转发送参数。例如，在Home组件中跳转到User组件中，需要传递name和pwd查询字符串。

   Home.vue代码：

   2. 可以下一个页面中，这里代表的就是User组件，接收来自Home组件的参数。

   5.获取路由参数

   例如：我们用户的界面都是一样的，但是每一个用户来到自己的页面中，显示的内容肯定都是不一样的，此时，我们需要使用不同的路径来区分不同的用户。这时候，可以在路由路径中使用路由参数表示不同用户的id

   例如：我们就需要设置一个route/index.js中路由信息里面，哪一段路由属于路由参数。

   src/routes/index.js设置路由参数。

   // 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
   import Vue from "vue";
   import Router from "vue-router";
   
   Vue.use(Router); // Router是类
   // 2. 暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用
   
   // 导入组件
   // import 组件名 from "../components/组件名"
   import Home from "../components/Home";
   import User from "../components/User";
   
   export default new Router({
     mode:"history",  // 路由地址的显示模式： 默认hash，表示地址栏上面出现#
     routes:[
       // {
       //   name:"路由名称[对应组件的name值，将来用于跳转页面]",
       //   path: "访问url路径",
       //   component: 组件名
       // },
       {
         name:"Home",
         path: "/",
         component: Home
       },{
         name:"User",
         path: "/user/:id/img-:img_id",
         component: User
       },
     ],
   });
   
   // vue-router除了可以进行组件和url地址的绑定以外，还可以
   // 进行不同组件的页面跳转，
   
   

   然后我们就是在Home中如果需要转到User里面。

   Home.vue代码：

   User.vue，组件中可以通过this.$route.params接收路由参数。

   四：ElementUI

   1.简介

   对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，常用的UI框: bootstrap，H-ui框架，lay-UI框架，Amaze UI，zui框架，ElementUI.

   Vue开发前端项目中，比较常用的就是ElementUI了。

   ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。

   中文官网：http://element-cn.eleme.io/#/zh-CN

   文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart

   2.快速安装ElementUI

   1.项目根目录执行以下命令:

   npm i element-ui -S
   

   上面的命令等同于 npm install element-ui --save

   2.配置ElementUI到项目中

   在main.js中导入ElementUI，并调用。代码：

   // elementUI 导入
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   // 调用插件
   Vue.use(ElementUI);
   

   成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。

   五：首页

   首页采用了上下页面布局，首页是导航栏、轮播图。。。脚部等几个小模块。所以我们可以把首页作为一个组件进行开发，然后把首页的这些小模块作为单独的组件来进行开发。

   1.创建首页组件

   在src/components目录下创建文件 Home.vue

   2.创建首页对应的路由

   在router/index.js中引入Home组件，并设置Home组件作为首页路由。

   import Vue from "vue"
   import Router from "vue-router"
   
   // 后面这里引入可以被用户访问的页面组件
   import Home from "../components/Home"
   
   Vue.use(Router);
   
   export default new Router({
     // 路由跳转模式，注意使用 history
     mode: "history",
   
     // 路由规则
     routes:[
       {
         // name:"路由别名",
         name:"Home",
         // path: "路由地址",
         path: "/",
         // component: 组件类名,
         component: Home,
       },
     ]
   })