目录
一、vue路由
使用路由跳转不同的组件思路
1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件(就是展示不同的页面效果)
3、需要将不同的组件放入一个容器中(路由集合)
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg}} -->
<!-- 链接到锚点 -->
<router-link to="/Home" >首页</router-link>
<router-link to="/About">关于</router-link>
<!-- 定义锚点 -->
<router-view></router-view>
</div>
</body>
<script>
//定义组件
const Home = Vue.extend({
template: "<div>这是首页</div>"
});
const About = Vue.extend({
template: "<div>这是关于本站,记录了本站的发展史</div>"
});
//定义组件和路由的关系
let routes = [{
path: '/',
component: Home
}, {
path: '/Home',
component: Home
}, {
path: '/About',
component: About
}];
//定义路由
const router = new VueRouter({
routes: routes
})
//挂载路由
new Vue({
el: "#app",
router,
data() {
return {
msg: "hello,vue!"
}
}
})
</script>
</html>
运行效果:
点击关于
二、无痕浏览
添加关键词
运行效果:
多次点击 首页和关于 停留在关于
点击一次回退
三、nodeJS环境搭建
1、下载nodeJS的安装包
2、解压nodeJS的解压包,在根目录下新增两个文件夹node_global和node_cache
3、配置环境变量
NODE_HOME:配置的是nodeJS解压的根路径D:\initPath\node-v10.15.3-win-x64
path:%NODE_HOME%;%NODE_HOME%\node_global
node -v
npm -v
4、配置npm的全局模块的下载地址
npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"
npm config set registry https://registry.npm.taobao.org/
5、下载github的Vue的项目解压
6、在解压的项目中是没有node_modules的,在工程的根目录下需要通过npm install进行再次依赖下载(package.json)
7、在通过npm run dev 启动项目
登录之后的界面
四、ElementUI简介
我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件
ElementUI官网:http://element-cn.eleme.io/#/zh-CN