•  目錄結構

• 新建vue檔案User.vue

<template>
  <div id="user">

    <div class="">
      未引用css檔案渲染樣式{{message}}
    </div>
    <!--定義需要渲染樣式元素的類名-->
    <div class="userClass">
      引用css檔案渲染樣式{{message}}
    </div>

  </div>
</template>

<script>
  export default{
   data(){
  return{
    message:'——樣例',
  };
  },
  }
</script>

<style>
  /*引入css 樣式檔案*/
  @import '../styles/user.css';
</style>
 

新建css檔案 user.css 

/* 設定樣式*/
.userClass{
  color:red;
  font-size: 23px;
}

•  簡單的路由配置 router目錄下，index.js檔案

  
  import Vue from 'vue'
  import Router from 'vue-router'
  import HumanList from '../container/HumanList.vue'
  import User from '../container/User.vue'
  import CameraMain from '../container/System-CameraMain.vue'
  
  
  Vue.use(Router);
  
  /*配置路由*/
  export default new Router({
    routes: [
      {
        path:'/',
        name:'HumanList',
        component:HumanList
      },
      {
        path:'/cameraMain',
        name:'CameraMain',
        component:CameraMain
      }, {
        path:'/user',
        name:'User',
        component:User
      },
    ]
  })
  
   
  

   

• 結果樣式  vue點選 npm下的dev 執行，瀏覽器輸入 http://localhost:8081/#/user