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>
上一篇: 【转】php 软件工程师