如何在vue文件中引入css文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Frankenstein_/article/details/84584099

•  目录结构

• 新建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