欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Css样式引入和静态资源存放在assets,后端上传的资源存放在public

程序员文章站 2022-06-06 20:23:19
...

Css样式引入

style:style标签明确scoped属性, 该样式只在组件内部起作用(样式的组件化);

@import url("../publicstyle.css");

<link rel="stylesheet" type="text/css" href="style.css" />
  • 一般尽量不用标签名加css样式;用class;
  • 样式一般比较多,要单独在assets里面创建样式文件,引入;
  • 一般引入我们直接在App.vue这个主组件中引入就可以;

    @import url("./assets/css/style.css");
  • 也可以把样式文件丢到public中,直接在public的index.html中引入
    <link rel="stylesheet" type="text/css" href="./style.css"/>

public和assets放静态资源怎么选择

  • 当你在JavaScript,Css或*.Vue文件中使用相对路径(必须以.开头)引用一个静态资源时,该资源将会被包含进入webpack的依赖图中;

  • 何时使用public文件

    • 你需要在构建输出中指定一个文件的名字;
    • 您有上千个图片,需要动态引用他们的路径;
    • 有些库可能和webpack不兼容,这是你除了将其用一个独立的<script>标签引入没有别的选择;
  • 项目上传变动的图片放在public;

理解

  • public里面可以放img,可以放css文件;但是不建议放,public一般放一些网站用户上传的资源;public里面的资源不会被编译;
  • 网站自己的一些样式和图标,基础资源,js,css,一般放到assets;assets里面会被编译;
  • 前端写的一般都在assets里面, 后端上传的在public里面;

eg

<template>
	<!-- 这三种写法都可以 -->
	<!-- <nav-bar></nav-bar> -->
	<!-- <NavBar/> -->
	<!-- 引入2个组件时,外面记得多加一个标签,跟标签只有1个 -->
	<div id="container">
		<p class="p-cl">我是p标签</p>
		<NavBar></NavBar>
		<Swiper></Swiper>
	</div>
	
	
</template>

<script>
//step1 引入组件  NavBar别名  './components/NavBar.vue'  引入文件
// 下面的引入都是局部引入
import NavBar from './components/NavBar.vue'
import Swiper from './components/Swiper.vue'

export default {
	components:{
		// 注册组件  nav-bar 组件名字   NavBar模板名字
		//组件名字和模板别名一致的时候,可以简写,上面渲染模板也可以简写
		//局部注册组件
		// 'nav-bar':NavBar
		NavBar,
		Swiper
	}
  
}
</script>

<style scoped="scoped">
	
	/* 引入css,这里面引入了,子组件里面也会有的,因为这个组件包含了子组件,
	如果只在子组件使用,就单独写一个样式文件,在子组件单独引入 */
	@import url("./assets/css/style.css");
	
	
</style>

相关标签: Vue css引入