day80 前端项目

目录

• 一、初始化项目
• 二、安装路由vue-router
  • 1 配置路由
    • 1.1 初始化路由对象
    • 1.2 注册路由信息
    • 1.3 在视图中显示路由对应的内容
  • 2 路由对象提供的操作
    • 2.1 页面跳转
    • 2.2 参数传递
• 三、ElementUI
  • 1 快速安装ElementUI
  • 2 配置ElementUI到项目中

一、初始化项目

项目一般通过cmd创建比较好，会比ide创建少一些ide需要的文件，这些文件在将来上线项目的时候用不到

vue init webpack renran

创建完项目后通过pycharm打开项目配置快速启动按钮

（红框为需要修改的地方）

相当于执行了npm run dev

然后删除HelloWorld.vue组件和清空App.vue内所有其他内容留下一个初始化完成的vue项目。

二、安装路由vue-router

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

通过终端执行安装命令

npm i vue-router -S
==》npm install vue-router --save

1 配置路由

1.1 初始化路由对象

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

在路由文件中复制初始化代码

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

// 导入组件
// import Home from '../components/Home'
// 在vue中@表示src目录的绝对路径

import Home from '@/components/Home';
import Login from '@/components/Login';
import Goods from '../components/Goods'
import Reg from '../components/Reg'
import User from "../components/User";

// 2. 暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用
export default new Router({
  // 设置路由模式为‘history’，去掉默认的#
  mode: "history",
    // 路由数组，数组套对象的格式
 routes:[
    {
      path:'/home', //url地址
      component:Home, // 组件名
      name:'Home' // 别名，通常和组件名相同
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/reg',
      component: Reg,
    },
    {
      path: '/goods',
      component: Goods,
    },
    {
      path: '/user/:name',
      component: User,
    }
  ]
})

1.2 注册路由信息

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

// 导入路由对象
import router from './router/index';


new Vue({
  el: '#app',
  router,// 新增内容，挂载路由对象到Vue中，供所有的vue对象使用
  components: { App },
  template: '<App/>'
});

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

在App.vue组件中添加以下代码

<template>
  <div id="app">
    <!-- 标签名必须是这个rouer-view -->
    <router-view/>
  </div>
</template>

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

2 路由对象提供的操作

注册好vue-router组件以后，vue-router在vue项目中帮我们创建了全局范围内组件都能使用的两个对象

this.$router // 可用于js代码中进行页面跳转
this.$route // 可用于获取地址栏上面的url参数

2.1 页面跳转

vue-router提供了两种页面跳转的方式：

1. 使用<router-link to='url地址'>跳转到指定页面
2. 在<script>标签中使用this.$router.push('url地址')来跳转

在index.js中配置url地址后，在Home.vue中书写代码：

方式一 :router-link方式跳转

<template>
    <div>
      首页页面组件
      <a href="/user">个人中心</a>
      <!-- router-link标签，本质上就是a标签，只是由vue-router进行加工处理
      可以显示局部页面刷新，不会重新加载内容，进行ajax跳转
       -->
        <!--to后面可以放具体的url，可以放变量或者对象，此时要在to前面加：-->
      <router-link to="/user">个人中心</router-link>
      <router-link :to="url">个人中心</router-link>
      <router-link :to="{name:'User'}">个人中心</router-link>
    </div>
</template>

方式二：js代码实现跳转

同样在Home.vue中

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 开发中可以先进行权限，登录之类的判断，然后再进行跳转
                // this.$router.back(); // 返回上一页，本质上就是 location.back()
                // this.$router.go(-n); // 返回上n页，本质上就是 location.go()
                // this.$router.forward(); // 跳转到下一页，本质上就是 location.forward()
                this.$router.push("/user"); // 跳转到站内的制定地址页面中，本质上就是 location.href
                // 注意,this.$router.push() 不能跳转到其他网站。如果真的要跳转外站，则使用location.href="站外地址，记得加上http://协议"
          }
        }
    }
</script>

2.2 参数传递

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也可以理解是路由参数，就是看我们的页面中是否需要接收而已。（类似无名分组）

方式一：查询字符串

传递参数页面

<template> 
<router-link to="/goods?name=hz">参数传递</router-link>
      <router-link :to="{path:'/goods',query:{'name':'hz'}}">参数传递</router-link>
      <router-link :to="`/goods?name=${name}`">参数传递</router-link>
      <router-link :to="'/goods?name='+name">参数传递</router-link>
      <router-link :to="'/goods?name='+name+'&pwd='+pwd">参数传递</router-link>
</template>

接受参数页面

<script>
    export default {
        name: "User",
        created() {
            // 接收地址栏上面的参数
            // this.$route是vue-router提供的一个用于接收地址参数的对象。
            // 经过main.js里面注册router对象以后，
            // 将来在所有的子组件中，可以通过this.$route来获取参数或者通过this.$router跳转页面
            // 查询字符串参数
            // query是this.$route里面的一个数组，this.$route会自动收集地址栏上所有的参数保存到query里面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``里面，${}圈住的内容会被js当成变量来解析
        }
    }
</script>

方式二：获取路由参数

比如用户访问的都是user页面但是根据用户的id展示不同的页面/user/id，类似于django中的无名分组

在index.js中设置路由参数

export default new Router({
  mode:"history",  // 路由地址的显示模式： 默认hash，表示地址栏上面出现#
  routes:[
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user/:id", // 表示user后面还要跟上任意字符来标识id
      component: User
    },
  ],
});

传递数据页面

 <router-link to="/user/100/img-10086">路由参数</router-link>

接受参数页面

<script>
    export default {
        name: "User",
        created() {
             // params是this.$route里面的一个数组，this.$route会自动收集路由列表中已经标记为路由参数所有内容保存到params中
            let id = this.$route.params.id;
            console.log(id);
        }
    }
</script>

三、ElementUI

对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，常用的UI框: bootstap，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

1 快速安装ElementUI

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

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

然后就可以根据官网开始写前端样式了