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

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>