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

目录

一、路由

1.引入路由的js依赖

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

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

4.生成路由对象

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

 6.定义锚点

  7.触发的事件

二、无痕浏览

三、nodejs环境搭建

四、ElementUI简介

---

一、路由

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：

    
    
    

    
    


    


        首页
        关于

        



    

测试：

 

 

二、无痕浏览

加个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/

 ⑤、下载github的Vue的项目解压
 ⑥、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm              install进行再次依赖下载（package.json）

 ⑦、在通过npm run dev 启动项目 

 

 

 

四、ElementUI简介

网址：

 https://element.eleme.cn/#/zh-CN/component/installation

 1、传统开发模式：html+vue+ElementUI类似于Bootstrap、layui、easyui

 2、前后端分离的开发模式

我是發財 bye~