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>