vue路由&无痕浏览&nodeJS环境配置&ElementUI简介

一、路由

1.引入路由的js依赖

2.定义组件首页对应的组件

3.定义路由与组件的对应关系

一、路由

1.引入路由的js依赖

2.定义组件首页对应的组件

const Home = Vue.extend({
    template:'这是首页内容、 展示最新的10条博客'
})
const About = Vue.extend({
    template:'这是关于本站显示的内容区域、本站的发展史'
})

3.定义路由与组件的对应关系

let routes = [
    {path:'/home',component:Home},
    {path:'/about',component:About}
]

4.生成路由对象

const router = new VueRouter({routes});

5.将vue对象挂载到vue实例中

new Vue({
    el:'#app',
    //5.将vue对象挂载到vue实例中
    router,
    data(){
        return{
            msg:'hello vue!!!'
        }
    }
})

6.定义锚点

7.触发的事件

首页
关于

完整html：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
 
    <!-- 1.引入路由的js依赖 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        7.触发的事件-->
        <router-link to="/home" replace="">首页</router-link>
        <router-link to="/about">关于</router-link>
<!--        6.定义锚点-->
        <router-view></router-view>
 
 
 
    </div>
<script type="text/javascript">
 
    // 2.定义组件 首页对应的组件
    const Home = Vue.extend({
        template:'这是首页内容、 展示最新的10条博客
'
    })
    const About = Vue.extend({
        template:'这是关于本站显示的内容区域、本站的发展史
'
    })
 
 
    // 3.定义路由与组件的对应关系
    let routes = [
        {path:'/home',component:Home},
        {path:'/about',component:About}
    ]
 
 
    // 4.生成路由对象
    const router = new VueRouter({routes});
 
    new Vue({
        el:'#app',
        //5.将vue对象挂载到vue实例中
        router,
        data(){
            return{
                msg:'hello vue!!!'
            }
        }
    })
</script>
</body>
</html>

测试：

二、无痕浏览

加个replace即可：

三、nodejs环境搭建

①、下载nodeJS安装包

②、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache

③、环境变量配置

NODE_HOME:配置的是nodeJS解压的根路径D:\initPath\node-v10.15.3-win-x64

配置path：

配置好之后进入我们的黑窗口徽标键+R

node -v

npm -v

④、配置npm的全局模块的下载地址

D:\Node\node-v10.15.3-win-x64
npm config set cache "D:\Node\node-v10.15.3-win-x64"
npm config set prefix "D:\Node\node-v10.15.3-win-x64"
npm config set registry https://registry.npm.taobao.org/