vue 引入公共css檔案

阿新 • • 發佈：2019-01-16

通過vue-cli 建立好專案目錄後

如果不想把css寫在單檔案元件裡如這樣：

<template>
  <div id="app">
     <div class='nav-box'>
        <ul class='nav'>
            <li>
              <a href="#/">home</a>
            </li>
              <li>
              <a href="#/odocument" 
>document</a>
            </li>
             <li>
              <a href="#/about">about</a>
            </li>
        </ul>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app' 

}
</script>

<style>
#app{
     text-align:center;
     color:#2c3e50;
     margin-top:60px;
}
</style>

可以將css樣式寫在外部，再通過下面三種方法中的一種引入：

1、在入口js檔案main.js中引入，一些公共的樣式檔案，可以在這裡引入。

import Vue from 'vue'
import App from './App' // 引入App這個元件
import router from './router' /* 引入路由配置 */
import axios from 
 'axios'
import '@/assets/css/reset.css'/*引入公共樣式*/

2、在index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>y</title>
    <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css">/*引入公共樣式*/
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、在app.vue中引入，但是這樣引入有一個問題，就是在index.html的HEADH上會多出一個空的

<template>
  <div id="app">
     <div class='nav-box'>
        <ul class='nav'>
            <li>
              <a href="#/">home</a>
            </li>
              <li>
              <a href="#/odocument">document</a>
            </li>
             <li>
              <a href="#/about">about</a>
            </li>
        </ul>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
   @import './assets/css/reset.css'; /*引入公共樣式*/
</style>

vue 引入公共css檔案

1、在入口js檔案main.js中引入，一些公共的樣式檔案，可以在這裡引入。 import Vue from 'vue' import App from './App' // 引入App這個元件 import router from './router' /* 引入路由配

vue 引入公共css檔案

通過vue-cli 建立好專案目錄後如果不想把css寫在單檔案元件裡如這樣： <template> <div id="app"> <div class='nav-box'> <ul

vue引入公共css檔案

1、在入口js檔案main.js中引入，一些公共的樣式檔案，可以在這裡引入。import Vue from 'vue' import App from './App' // 引入App這個元件 import router from './router' /* 引入路由配置 *

用vue-cli腳手架建的專案中引入公共css檔案的幾種方法

1、在入口js檔案main.js中引入，一些公共的樣式檔案，可以在這裡引入。 import Vue from 'vue' import App from './App' // 引入App這個元件 import router from './router' /* 引入路由配置

vue 引入通用 css

組件 oba outer style 路由配置 smart rom eight css 1、在入口 js 文件 main.js 中引入，一些公共的樣式文件，可以在這裏引入。import Vue from ‘vue‘ import App from ‘./App‘ // 引入

webpack4對第三方庫css，專案全域性css和vue內聯css檔案提取到單獨的檔案(二十二)

在講解提取css之前，我們先看下專案的架構如下結構： ### 目錄結構如下： demo1 # 工程名 | |--- dist # 打包後生成的目錄檔案

vue引入外部js檔案和scss檔案

最近在做一個vue專案，已經有一段時間了。之前對在vue專案如何引入外部的js檔案和scss檔案一片空白。網上百度也是魚龍混雜,很少有用的東西。後來自己通過一個線上專案學習到了。所以將自己的實現記錄下來我將寫在vue檔案的js抽出來，放在一個js檔案裡面。然後在vue引入的形式如下(es6的寫

vue 引入外部js檔案 - 配置component

1.main.js 2.importJs.js // 匯入外部js import Vue from 'vue' // 匯入外部js import Vue from 'vue' Vue.component('remote-script', { re

vue引入animate.css及樣式大全

一、首先我們要在小黑窗中下載： npm install animate.css --save 二、在main.js中引入： import animated from ‘animate.css’ Vue.use(animated) 三、開始寫我們的t

JSP頁面引入外部CSS檔案，重新整理後不起作用如何解決

一般CSS程式碼可以寫在專門的CSS檔案中，然後某個頁面需要時直接呼叫CSS檔案即可。但發現將CSS檔案引入後仍然不起作用。重新整理後無效果。其實只要在<link>標籤裡新增一個charset="utf-8"就可以了。就像下面這樣：<link rel="st

公共css檔案初始化

body, html{ height: 100%; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, f

引入的css檔案不起作用

按F12檢視開發者工具中顯示，有common.css，但是頁面上的樣式卻沒有改變,程式碼如下： <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

在php模版檔案和html檔案中引入js,css檔案錯誤解決

1,html檔案引入js一些資原始檔時候：可以寫相對路徑來引入，<script src="../lib/layer/layer.js"></script> <script src="../lib/jquer.min.js">&l

jsp.html中的引入js.css檔案的問題，以及檔案路徑詳解。

首先我把檔案的位置已截圖的形式發出(eclipse工作欄)，看清楚各個檔案路徑的位置。 </pre>其中test1.css中寫了一個測試程式碼：</p><p><pre name="code" class="html">.AA

vue實際專案開發中，公共js(全域性引入)檔案如何寫，如何引入到入口檔案main.js

公共js檔案，比如commen.js通過export default暴露出來export default { install(Vue,options){　　Vue.prototype.方法名=function(){}}在入口檔案main.js引入import comm form './assets/js/c

前端框架Vue（13）——vue 中如何對公共css、 js 方法進行單檔案統一管理，全域性呼叫

1、前言最近，為公司開發交付的一個後臺管理系統專案，我使用了 Vue 框架進行開發實踐。模組化、元件化、工程化的開發體驗非常好。良好的 api，優雅的設計，對於工程師非常友好。但是由於模組比較多，我對於每個模組分配了不同的

如何在vue檔案中引入css檔案

目錄結構新建vue檔案User.vue <template> <div id="user"> <div class=""> 未引用css檔案渲染樣式{{message}} <

vue-cli搭建的專案引入.css檔案報錯

Module build failed: ParseError: E:\Demo\vuedemo\myvuedemo\node_modules\swiper\dist\css\swiper.css:4:96 1| // style-loader: Adds

vue實現完整的專案（二：引入公共的頭部檔案）

首先，建立頭部檔案在需要引入公共頭部檔案的vue中，通過import匯入重點來了，需要通過compents將頭部元件啟用，然後再template模板中，直接引入頭部檔案 <login-header></login-header>其中需要注意的是

在HTML中引入多個css檔案

在HTML中引入css的兩個方法：匯入式和連結式。匯入式和連結式的目的都是將一個獨立的css檔案引入一個檔案中，二者的區別不大，事實上，二者最大的區別在於連結式使用html的標記引入外部css檔案，而使用匯入式則是使用css規則引入外部css檔案。因此它們的語法也不同。 1. 連結式

vue 引入公共css檔案

通過vue-cli 建立好專案目錄後

相關推薦