6-vue-前端项目搭建流程、路由配置、页面跳转、参数传递、ElementUI
1. 客户端项目搭建
1.1 创建项目目录
cd 项目目录[荏苒资讯] vue init webpack renran
例如，我要把项目保存在桌面下的子目录renran ~/Desktop/renran，可以如下操作：
cd Desktop/renran vue init webpack renran_pc
打开项目已经，在pycharm的终端下运行vue项目，查看效果。
上面的操作步骤，等同于执行了下面这句命令。
npm run dev
接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)
1.2 初始化项目
清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: ‘App‘,
components: {
}
}
</script>
<style>
</style>接下来，我们可以查看效果了，一张白纸~
1.3 安装路由vue-router
官方文档：https://router.vuejs.org/zh/
1.3.1 下载安装路由组件
npm i vue-router -S # npm install vue-router --save
1.3.2 配置路由
1.3.2.1 初始化路由对象
在src目录下创建routes路由目录，在router目录下创建index.js路由文件
index.js路由文件中，编写初始化路由对象的代码 .
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 User from "../components/User";
// 实例化路由对象，编写路由列表
export default new Router({
// 路由显示模式，默认hash，地址栏上面默认带#，history不会带#号
mode:"history",
routes:[ // 路由列表
{
path: "/home", // 字符串，访问url地址
component: Home, // 变量对象，访问url地址对应的组件
name: "Home", // 字符串吧，访问url的别名
},
]
})1.3.2.2 注册路由信息
打开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‘,
// 挂载路由对象，将来路由对象的所有的属性或方法，都可以通过vm来操作
router,
components: { App },
template: ‘<App/>‘
})
// 这里是不能编写任何js代码的，因为系统不会执行到这里来1.3.2.3 在视图中显示路由对应的内容
在App.vue组件中，添加显示路由对应的内容。代码：
<router-view></router-view>
它的作用调用路由组件：路由组件的作用：识别访问当前站点的url地址，获取地址的路径部分，到路由列表中进行识别判断
<template>
<div id="app">
<!--调用路由组件：路由组件的作用：识别访问当前站点的url地址，获取地址的路径部分，到路由列表中进行识别判断-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘App‘,
components: {
}
}
</script>
<style>
</style>注意：如果在vue创建项目的时候，设置安装vue-router，则项目会自动帮我们生成上面的router目录和index.js里面的代码，以及自动到main.js里面注册路由对象。
1.3.3 路由对象提供的操作
在我们安装注册了vue-router组件以后，vue-router在vue项目中会帮我们在全局范围内所有组件里面创建2个对象给我们使用：
this.$router，可用于在js代码中进行页面跳转。this.$route，可用于获取地址栏上面的url参数。
1.3.3.1 页面跳转
在vue-router提供的操作中， 进行页面跳转有2种方式：
使用
<router-link to="url地址">站内跳转，ajax跳转不刷新页面在
<script>中使用this.$router.push(url地址)来跳转到站内的指定路径，ajax跳转不刷新页面如果想跳转到别的网站，则需要用到原生js停供的
windows.location.href="http://www.baidu.com"，在
<script>中还可以使用this.$router.go(整数)，跳转到历史记录的N页，负数为上几页，正数为下几页在
<script>中还可以使用this.$router.back(整数)，返回上一页在
<script>中还可以使用this.$router.forward(整数)，前进一页
1.3.3.1.1 router-link标签
例如，我们就可以在Home.vue组件中，使用router-link跳转到User.vue组件中。
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",
component: User
},
],
});
// vue-router除了可以进行组件和url地址的绑定以外，还可以
// 进行不同组件的页面跳转，Home.vue代码：
<template>
<div>
首页页面组件
<a href="/user">个人中心</a>
<!-- router-link标签，本质上就是a标签，只是由vue-router进行加工处理
可以显示局部页面刷新，不会重新加载内容，进行ajax跳转
-->
<router-link to="/user">个人中心</router-link>
<router-link :to="url">个人中心</router-link>
<router-link :to="{name:‘User‘}">个人中心</router-link> 逆向解析
</div>
</template>
<script>
export default {
name: "Home",
data(){
return {
url: "/user",
}
},
methods:{
}
}
</script>
<style scoped>
</style>