一、Vue脚手架

1、安装脚手架

脚手架是基于node的环境。

nodejs安装
脚手架全局安装：在cmd提示命令符中输入 npm i -g @vue/cli
检测是否安装成功：安装好后可输入vue -V 查看是否安装成功及版本号

2、创建项目

切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
创建一个项目： vue create myvue(名字随意命名，我这里项目命名为 myvue)

这里选第二个，然后等一段时间即可完成

如果你安装在C盘根目录，打开C盘就可以找到myvue文件：

3、Vue文件

node_modules 包下载地址
public 模板和共用文件地址
src 项目源文件目录
--assets 资源目录
--components 组件存放目录
--App.vue 项目根组件
--main.js 项目入口文件
.gitignore 规定哪些文件不上传
babel.confg.js ES6转ES5配置文件
jscofig.json js语法检测配置
package.json 项目包管理目录
package-lock.json 包下载缓存地址
README.md 项目说明目录
vue.config.js vue的配置文件

4、运行项目

切换到项目目录：在提示命令符中输入 cd /myvue
运行项目：然后输入 npm run serve

复制链接然后在浏览器打开即可（提示命令符不要关闭）

二、Vue路由

1、spa

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-view>div {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .nav a:hover {
            color: red;
            transition: .5s;
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <div class="nav">
        <a href="#/home" class="router-link">首页</a> |
        <a href="#/about" class="router-link">关于</a> |
        <a href="#/user" class="router-link">用户</a> |
        <a href="#/produce" class="router-link">产品</a>
    </div>
    <!-- 视图页面 -->
    <div class="router-view">
        <div id="home">首页页面</div>
        <div id="about">关于页面</div>
        <div class="user">用户中心页面</div>
        <div class="produce">产品页面</div>
    </div>
</body>
<script>
    // 配置让 地址栏与组件一一对应起来
    var routes = [
        { path: "/home", component: document.getElementById("home") },
        { path: "/about", component: document.getElementById("about") },
        { path: "/user", component: document.querySelector(".user") },
        { path: "/produce", component: document.querySelector(".produce") }
    ]
    // 监听hash变化
    window.onhashchange = handler;
    function handler() {
        // 拿到hash值
        var hash = location.hash.slice(1); //移除#号
        // 遍历routes配置，如果hash值等于遍历item的path值我们就让对应的component显示，否则隐藏
        routes.forEach(item => {
            if (item.path === hash) {
                // 如果path值与hash值相等显示对应component
                item.component.style.display = "block";
            } else {
                // 否则隐藏对应的component
                item.component.style.display = "none";
            }
        })
    }
    window.onload = function () {
        // 获取hash值
        var hash = location.hash || "#" + routes[0].path;
        // 设置hash值
        location.hash = hash;
        handler(); // 默认执行一次检查hash
    }
</script>

</html>

singlePageApplication：一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换
优点：资源公用；前后端分离；页面切换流畅
缺点：对SEO搜索引擎不友好
原理：地址改变，不刷新页面，监听地址栏变化实现页面局部更新
Hash路由：锚点（hash）变化不会刷新页面；window.onhashchange
历史记录路由：H5新增特性；history.onpopstate

2、创建Vue路由项目

切换到根目录/项目需要所在目录：在cmd提示命令符中输入 cd /
创建一个项目： vue create myroute(名字随意命名，我这里项目命名为 myroute)

1.这里选择第三个

2.找到对应选项按空格选中，然后按回车

3.选择第二个

4.这里输入n，然后按回车

5.选第一个按回车

6.选第一个按回车

7.选第一个按回车

8.输入N，按回车，然后等待一段时间即可完成

如果你安装在C盘根目录，打开C盘就可以找到myvue文件：

3、运行项目

切换到项目目录：在提示命令符中输入 cd /myvue
运行项目：然后输入 npm run serve

复制链接然后在浏览器打开即可（提示命令符不要关闭）

4、Vue路由文件

router/index.js 路由配置
store/index.js 全局数据配置
views 页面存储地址
---AboutView.vue 关于页面
---HomeView.vue 首页页面
App.vue 根节点

5、添加路由

1.在views文件夹中创建一个页面，如：UserView.vue (名字必须用驼峰式写法)

2.在router/index.js 配置路由

普通路由：

{
path:"/user", //匹配的地址
name:"user", //名称
component:()=>improt(xxx)  //配置对应的页面，xxx是文件路径
}

传参路由：

{
path:"/product/:id", 
name:"product", 
component:()=>import(xxx)
}

//在ProduceView.vue获取
//{
   
   {$route.params.id}}

<template>
  <div class="product">
    <h1>这里是产品页面 {
   
   { $route.params.id }}</h1>
  </div>
</template>

子路由：

{
path:"/admin",name:"admin",component:AdminView,
  children:[
    {path:"dash",name:"dash",component:DashView},
    {path:"even",name:"even",component:EvenView},
    {path:"",redirect:"dash"}
  ]
}

子路由页面嵌套（AdminView.vue）：

<template>
  <div>
    <h1>后台管理页面</h1>
    <div class="container">
      <div class="left">
        菜单<br />
        <router-link to="/admin/dash">概览</router-link><br />
        <router-link to="/admin/event">事件</router-link>
      </div>
      <div class="content">
        内容区域
        <!-- 存放子路由页面 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

子路由+子路由页面嵌套效果：

404页面：

// 在最后面配置
{
path: "*",
name: "nomatch",
component: () => import('../views/NoMatch.vue')
}

效果：

3.在App.vue中添加链接（导航）

<template>
  <div id="app">
    <nav class="p">
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/user">用户</router-link> |
      <router-link to="/product/abc">产品abc</router-link> |
      <router-link to="/product/123">产品123</router-link> |
    </nav>
    <router-view></router-view>
    <!-- router-view 用来存放页面
    router-link 改变地址栏，改变hash值 -->
  </div>
</template>

<script>
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

效果：

首页的内容可在views文件夹中的HomeView.vue中修改。

6、当前路由信息（$route）

name名称
params：路由的参数
path：地址信息
fullPath：全地址信息
hash：哈希值
query：查询参数
meta：元信息

7、编程跳转

<template>
  <div class="user">
    <h1>这里是用户页面</h1>
    <button @click="$router.back()">返回</button>
    <button @click="$router.forward()">前进</button>
    <button @click="$router.go(-1)">返回</button>
    <button @click="$router.go(1)">前进</button><br />
    <button @click="$router.push('/about')">关于</button>
    <button @click="$router.replace('/about')">关于(替换)</button>
    <!-- replace 替换历史记录
    跳转到about页面，当前user页面不留历史记录 -->
  </div>
</template>

Vue脚手架与Vue路由