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,專案全域性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. 連結式