内容大纲
- 安装路由
- 配置路由
- 路由对象router:页面跳转,传递参数
- ElementUI
前端项目
笔记
为什么要在linex中开发?
1.公司服务器是linex,如果也用linex开发,会减少bug(linex权限很多,严格)
2.进程,线程管理和window,mac中有差异
2. 客户端项目搭建
2.1 创建项目目录
cd 项目目录[荏苒资讯]
vue init webpack renran
例如,我要把项目保存在桌面下 ~/Desktop/renran,可以如下操作:
cd Desktop/renran
vue init webpack renran_pc
打开项目已经,在pycharm的终端下运行vue项目,查看效果。
上面的操作步骤,等同于执行了下面这句命令。
npm run dev
接下来,我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行,8080端口被占据了,服务器会自动改端口,所以根据自己实际在操作中看到的地址来访问。)
访问:http://localost:8080
2.2 初始化项目
清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式

<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
接下来,我们可以查看效果了,一张白纸~

2.3 安装路由vue-router
官方文档:https://router.vuejs.org/zh/
2.3.1 下载安装路由组件
npm i vue-router -S
npm install vue-router --save
2.3.2 配置路由
2.3.2.1 初始化路由对象
在src目录下创建routes路由目录,在router目录下创建index.js路由文件
index.js路由文件中,编写初始化路由对象的代码 .
import Vue from "vue";
import Router from "vue-router";
// 注册路由组件
Vue.use(Router);
// 导入组件
// 在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";
import Show from "../components/Show";
import TodoList from "../components/TodoList";
// 创建实例化路由对象,编写路由列表
export default new Router( {
mode:"history", // 路由显示模式,默认hash,地址栏上默认带#,一般用history,history不带#
routes:[
{
path:"/home", // 访问url的地址,字符串
name:"Home", // 路由别名,可写可不屑,字符串
component: Home, // 访问url地址对应的组件,变量
},
{
path: "/Login",
component: Login,
name:"Login",
},
{
path: "/Reg",
component: Reg,
name: "Reg",
},
{
path: "/Goods",
component: Goods,
name: "Goods",
},
{
path: "/User/:name/:id",
component: User,
name: "User"
},
{
path: "/Show",
component: Show,
},
{
path: "/Todolist",
component: TodoList,
},
]
})
2.3.2.2 注册路由信息
打开main.js文件,把router路由规