vue之路由、无痕浏览加Nodejs环境安装及elementui介绍

一、路由

依赖导入

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

<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">
           
           <router-link to ="/home" >首页</router-link>
           <router-link to ="/about" >关于我的</router-link>
               
           <router-view></router-view><br>
           {{msg}}

       </div>
   </body>

方法

<script type="text/javascript">
       //2.定义组件首页关于自己的组件
       const Home= Vue.extend({
           template:'<div> 这是首页内容~</div>'


       });
       const About= Vue.extend({
           template:'<div> 这是关于我的内容。。。。。。。。。</div>'


       });
       //3.定义路由和组件的对应关系

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

       ]
       //4.生成路由对象
       const router=new VueRouter({routes:routes});



       new Vue({
           el:'#app',
           router,//5.将vue对象挂载大vue实例里

           data(){
               return {
                   msg:'hello '
               }
           }

       })
   </script>

二、无痕浏览

“replace”的使用

<body>

       <div id="app">
           
           <router-link to ="/home" replace="" >首页</router-link>
           <router-link to ="/about" >关于我的</router-link>
               
           <router-view></router-view><br>
           {{msg}}

       </div>
   </body>

回退只能继续浏览首页功能

三、Nodejs环境安装

使用背景：
为啥我们需要一个包管理工具呢？
因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
Nodejs为脚本语言的运行环境
npm其实是Node.js的包管理工具（package manager），相对于后台的maven。

1 .下载地址：https://nodejs.org/zh-cn/download/

2.解压到非中文目录下文件夹储存

node_home

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全局模块路径和cache默认安装位置
打开cmd，分开执行如下命令：
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"

以下操作注意网络通畅将安装包：nmgwap-vueproject-master解压在此目录下：E:\temp\t280\vueproject

## 5. 启动项目
npm run dev

操作成功

四、 elementui介绍

1. ElementUI简介
   我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
   所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

   ElementUI官网：http://element-cn.eleme.io/#/zh-CN

   注1：类似前端框架还有iview

## demo1.html(非模块化)
## hello elementUI
2. Vue+ElementUI安装
  2.1 CDN方式
      <!-- 1. 导入css -->
      <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
      <!-- 2. 引入vue和vue-router-->
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
      <!-- 未使用vue路由功能可不导入 -->
      <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
      <!-- 3. 引入ElementUI组件 -->
      <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

原文链接：https://blog.csdn.net/qq_66924116/article/details/126712539