1. 程式人生 > >vue 引入公共css檔案

vue 引入公共css檔案

通過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,專案全域性cssvue內聯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. 連結式