vue-cli搭建与vue-router（路由配置）

1.Vue-cli：
Vue-cli 是专门搭建 vue 开发环境的脚手架；

2.安装 Vue-cli：
（1）安装：npm  install  vue-cli  -g

（2）检测是否安装，查看版本：vue  -V

3.创建项目：
（1）vue create 自己的项目名称（完成之后会生成含有自己项目名称的文件夹，也就是自己的项目）；

　　第一次创建项目 不需要太多依赖 只选择babel —>package.json

（2）跳转的自己的项目文件夹中：cd  项目名称；

（3）安装所有的插件：npm  install；

（4）写完自己的项目之后，进行打包：npm  run  build（会生成一个 dist 文件夹（需要上线的文件夹），会将自己写的所有 js 文件合并在一个 build.js 中）；

（5）最后运行服务：npm  run  dev；

4.路由：

　　直接在vue的项目中根目录中安装   命令：vue add router（安装过程中会提示，是否在路由中使用历史模式，路由分为历史模式和hash模式）

　　安装完成后 配置路由:main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import HelloWorld from './components/HelloWorld.vue'
 
Vue.config.productionTip = false
 
//全局注册组件
// Vue.component("users", User);
Vue.use(VueRouter)
 
//配置路由
const router = new VueRouter({
  routes: [
　　//当路径为/时 跳转到Home组件中
    { path: "/", component: Home },
  ],
//路由模式为历史模式
  mode: "history"
})
 
 
/* eslint-disable no-new */
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
})

　　在main.js中通过路由设置了两个访问路径：

　　大概意思就是，当访问路径“/”时，跳转到组件Home页面，当访问路径“/helloworld”时，跳转到组件HelloWorld页面。

　　注意：import(导入)路由和使用到的组件。

　　在main.js中通过new Vue实例化了一个Vue对象，其中

　　router：使用配置的路由；

　　el（element）：需要获取的元素，一定是html中的根容器元素，这样就把main.js文件和index.html文件联系起来了；

　　component/template:使用 components 属性注册需要用到的组件App.Vue

App.vue代码如下：

<template>
  <div id="app">
    <!-- <a href="/">Home</a>
    <a href="/HelloWorld">Hello</a>-->
    <!-- 使用a标签做导航栏每次点击都重新加载整个页面-->
    <router-link to="/">
      <span>Home</span>
    </router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: "App",
  data() {
    return {};
  },
  components: {}
};
</script>
 
<style>
span {
  background: rgb(211, 196, 196);
  font-size: 30px;
}
span:active {
  background: green;
  color: white;
}
</style>

每个.vue文件中包含三部分内容：

（1）template模板：html结构

（2）script行为：处理逻辑

（3）style样式：解决样式

<router-link> </router-link> 相当于a标签，通过to属性指定目标地址

<router-view></router-view>路由匹配到的组件将渲染在这里。

css作用域：仅在当前页面作用

Home.vue 代码如下：

<template>
  <div id="home">
    <!-- <h1>{{title}}</h1> -->
    <header-app></header-app>
    <users></users>
    <footer-app></footer-app>
  </div>
</template>
 
<script>
//局部注册组件
import Users from "./Users";
import Header from "./Header";
import Footer from "./Footer";
 
export default {
  name: "home",
  data() {
    return {};
  },
  components: {
    users: Users,
    "header-app": Header,
    "footer-app": Footer
  }
};
</script>
 
<style>
</style>