【求教】Vue 项目中应该怎样组织 css ？
在 Vue 项目中组织 CSS 的方式有很多种，以下是一些建议：
- 使用 CSS 模块化：可以使用 CSS Modules 或者 Scoped CSS 来实现组件级别的 CSS 样式。CSS Modules 可以让你在 CSS 文件中使用局部作用域的类名，从而避免样式冲突。Scoped CSS 则可以将组件的样式限制在组件范围内，避免全局样式的干扰。
- 使用 CSS 预处理器：可以使用 CSS 预处理器，如 Sass、Less 或 Stylus 等，来提高 CSS 的可维护性和可读性。这些预处理器可以支持变量、嵌套、混合等功能，使得编写和维护 CSS 变得更加方便。
- 使用 CSS-in-JS 库：可以使用 CSS-in-JS 库，如 styled-components、emotion 等，将 CSS 代码直接嵌入到 JavaScript 中。这种方式可以让你在组件中直接使用 JavaScript 变量和函数，从而实现更加动态化的样式处理。
- 使用 BEM 命名规范：可以使用 BEM 命名规范来规范 CSS 类名的命名，以提高代码的可读性和可维护性。BEM 命名规范包括三个部分：块（block）、元素（element）和修饰符（modifier），可以帮助你更好地组织和管理 CSS 代码。
推荐的腾讯云相关产品：
- 云服务器：提供高性能、稳定、安全、可扩展的云服务器，可以满足不同应用场景的需求。
- 对象存储：提供可靠、安全、高效、低成本的云存储服务，可以存储各种类型的数据，包括图片、视频、文档等。
- 数据库：提供 MySQL、PostgreSQL、MongoDB 等多种数据库服务，可以满足不同应用场景的数据存储需求。
- 内容分发网络：提供高速、稳定、安全的内容分发服务，可以加速网站、应用程序和 API 的交付。
产品介绍链接地址：
相关·内容
1回答
我正在构建VueJS组件库，其中包括vue-元素和其他一些第三方库。
我把我的图书馆包括在我的主要项目中。
但是我的主要项目包含了与其他一些表单组件相同的第三方库(vue-element)。
所以问题是如何管理第三方css。目前，我正在复制vue元素css文件(一次它包含在我的主要项目中，第二次来自我的库css)。
浏览 0提问于2018-12-11得票数 0
回答已采纳
有人能告诉我如何在JetBrains集成开发环境(例如PyCharm)中显示CSS建议吗？我让他们在Vuetify的常规Vue项目中工作，但在Nuxt项目中，他们没有出现。 这是我在Vue项目中所拥有的，并且希望在Nuxt中也是如此，请参见以下内容： ?
浏览 13提问于2021-03-28得票数 0
回答已采纳
在我的Vue项目中，我的引导带正常工作。我想用Bootswatch的主题。在我的Vue项目中，我用我从Bootswatch站点下载的文件替换了node_modules/ from /dist/bootstrap.min.css文件。但是新的主题并没有改变什么。注意:在我的main.js中，我有以下内容：
导入‘引导’
我怎样才能让新的主题发挥作用？
浏览 1提问于2018-03-10得票数 1
回答已采纳
下面是我的App.vue代码：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import 'material-design-lite'
export default {
name: 'app'
}
</script>
<style lang="stylus">
@import url
浏览 4提问于2017-09-29得票数 1
我正在尝试在TabView项目中使用字体超赞的图标。我可以在页面的其他地方使用相同的代码，它工作得很好。它只是不会在选项卡视图中显示任何图标。
在我的main.js中：
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
'fa': './assets/css/font-awesome.css',
'ion': './ionicons.css
浏览 1提问于2019-01-15得票数 1
我知道这似乎是一个很容易找到的问题，但我的代码在一段时间前起了作用。我使用Vuex绑定来检查我的侧边栏是否可见，所以应该在我的整个项目中设置stateSidebar。
default.vue
<template>
<div>
<TopNav />
<SidebarAuth v-if="stateSidebar" />
<Nuxt />
</div>
</template>
<script>
import TopNav from './part
浏览 1提问于2021-05-25得票数 0
回答已采纳
我初始化了一个基于和 ()的项目，我不知道如何将我的自定义SCSS文件添加到这个项目中。
我创建了src/assets/scss/app.scss文件，并将import './assets/scss/app.scss'添加到src/main.js文件中：
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'boo
浏览 0提问于2018-10-13得票数 0
1回答
我正在使用element-ui在Vue项目中添加一个包含一些数据的表。我只希望更改标题行的背景颜色。我怎样才能做到这一点呢？ 我尝试过的东西： 在:row-class-name prop中添加自定义类： <el-table :row-class-name="headerStyle"> (在方法中) headerStyle() {
return 'customClass'
} 在同一.vue文件中的样式标记中： .el-table .customClass {
/*Custom CSS*/
}
浏览 22提问于2020-12-05得票数 1
回答已采纳
3回答
我现在正在做Hibernate的教程，我下载了hibernate.zip和oracle.jar文件，试图通过右击项目-> build path -> configure build path -> add external jars并选择.jar将它们添加到项目中，但它们并没有导入到“引用的库”中，它们只是作为独立的.jar文件出现，与任何东西都没有关系，也不能被引用。
我怎样才能使它们“进入”被引用的库？当我导入jar文件时，该文件夹甚至都没有创建。
谢谢!
浏览 3提问于2016-04-14得票数 1
在我的项目中，我在src/components/header/中创建了一个新文件header.vue。代码是
<template>
<div class="header">
I am header!!
</div>
</template>
<script type="text/ecmascript-6">
export default({})
</script>
<style lang="stylus" rel="stylesheet/sty
浏览 1提问于2018-07-12得票数 0
回答已采纳
2回答
我创建了一个基于的项目，并在项目中添加了。我将我的webpack.dev.conf.js、webpack.prod.conf.js和webpack.base.conf.js更改如下(仅假设相关部分)：
Dev和prod
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery
浏览 1提问于2017-04-12得票数 2
我想扩展我用scss定义的类，但是不管怎样，他都得到了它，例如1.vue-按钮.vue-x .vue-y .vue-z，我想要它covered.then 2. vue- to .vue-x .vue-x，我想要覆盖它。作为css，我想写我作为scss所做的事情，但是它没有按照我想要的方式工作
总结他想要做的事，
如何将下面编写的CSS示例编写为SCSS？
css示例
.vue-button, .vue-x, .vue-y, .vue-z{
display: inline-block;
white-space: nowrap;
}
.vue-button, .vue-x{
pa
浏览 1提问于2022-04-18得票数 0
我在我的项目中使用Vuexy仪表板，Vuexy附带Vue 2，所以我尝试将它升级到Vue 3，在修复了一些错误之后，我被困在这个项目上，任何帮助都是非常感谢的。谢谢。这是我的package.json文件：
{
"name": "vuexy-vuejs-react-html-laravel-admin-dashboard-template",
"version": "6.4.0",
"private": true,
"scripts": {
"serve":
浏览 10提问于2022-05-22得票数 8
1回答
顶层菜单/script.js
module.exports = {
components: {
'topmenuSearch': require('vue').extend(require('./topmenu-search/component.vue'))
}
}
/topmenu/template.html
<div class="search-overlay" v-if="topmenuSearch.searching"></div>
/topmenu/
浏览 1提问于2016-04-21得票数 0
回答已采纳
我是vue的新手，正在尝试将它集成到我的一个项目中，在这个项目中我使用的是Laravel 5.4。我使用vee-validate进行验证。我正在使用yarn来管理包。当我在npm run dev之后访问页面时，我在firebug控制台栏中得到以下错误：
TypeError: value is undefined (this one is in app.js file)
ReferenceError: require is not defined (this one is in plugin.js file)
这是我的app.js文件：
/**
浏览 0提问于2017-04-21得票数 0
我正在尝试在我的VueThreeSixty + Vite项目中使用组件。
我导入了所有东西，将VueThreeSixty添加到组件对象中，但是看起来我仍然缺少什么东西，您能帮我找出什么吗？
[Vue warn]: Component is missing template or render function.
这是我的密码。
<template>
<Navigation></Navigation>
<div class="tb_header">
</div>
<di
浏览 5提问于2022-01-08得票数 3
回答已采纳
我试着安装laravel并将vuejs与之集成。vuejs组件不在laravel项目中加载。
我的刀片代码是：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Laravel
浏览 2提问于2022-02-20得票数 0
我在我的webpack-简单的Vue.js项目中使用Bootstrap 4和Buefy。当我导入Buefy时，就像在Docs中一样，我的标签不会放大引导带4中显示错误宽度的文本和导航条。
我的main.js文件如下所示
import Vue from 'vue';
import "bootstrap/dist/css/bootstrap.min.css";
import 'buefy/dist/buefy.css';
import Buefy from 'buefy';
Vue.use(Buefy);
当我删除导入Buefy时应该
浏览 2提问于2018-11-09得票数 0
回答已采纳
我正在尝试将Ant Design 作为模块添加到Nuxt3项目中。
import { fileURLToPath } from "node:url"
import { defineNuxtModule } from "@nuxt/kit"
export default defineNuxtModule({
setup (_, nuxt) {
nuxt.options.css.push("ant-design-vue/dist/antd.css")
},
hooks: {
浏览 11提问于2022-06-09得票数 1
回答已采纳
我一直在努力将和实现到一个Nuxt项目中。我相信这和DOM和SSR有关。我检查了所有的文档，从滚动代理Gsap，到Nuxt和火车头，但我没有更多的线索。
如果你们有什么建议的话，我们非常欢迎你们帮忙。谢谢您抽时间见我。
这里是错误
TypeError:无法读取未定义的属性“滚动”
Uncaught：_triggers_i.update不是函数
未定义TypeError:无法读取未定义属性的“匹配”
是在plugins/中创建的
import Vue from "vue";
import locomotiveScroll from "locomotive-scro
浏览 2提问于2021-03-01得票数 1
1回答
我正试图在我的vue项目中使用光滑的旋转木马。我正在遵循以下步骤：
但我总是收到这样的信息：
npm警告slick@1.8.1需要一个对等的jquery@>=1.8.0，但没有安装。您必须自己安装对等依赖项。
npm警告vue-slick@1.1.13需要一个jquery@*的对等程序，但是没有安装。您必须自己安装对等依赖项。
这是我的package.json
"dependencies": {
"axios": "^0.17.1",
"element-ui": "^
浏览 0提问于2018-09-10得票数 1
回答已采纳
1回答
无法使用Vuex显示数据
、、、
我是一个新的.net+vuejs学习者，我正在使用
我试图在我的项目中使用vuex从数据库中显示国家数据，但它不起作用
main.js
import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
index.js
import {
浏览 4提问于2022-05-27得票数 0
1回答
在我正在开发的项目中，我使用了laravel和vue js。我已经安装了vue-color npm软件包，以便加载一个颜色选择器.
成功安装npm软件包。但是当我试图将它导入到刀片时，它会显示下面的错误。
Uncaught :无法在模块外使用导入语句
下面的代码将显示我如何在刀片内使用。
@section
<div>
.......
</div>
@endsection
@push('script')
<script>
import Photoshop from 'vue-color'
浏览 3提问于2020-02-26得票数 1
回答已采纳
在我的vuejs项目中，我希望将我的个人css文件包含到根据*.vue文件中的样式生成的缩小css文件中。
在App.vue中，我有：
<style lang="scss">
@import '/static/css/AdminLTE.min.css';
@import '/static/css/style.css';
@import '/static/js/plugins/pace/pace.min.css';
</style>
我使用ExtractTextPlugin来提取和缩小*.vue文
浏览 1提问于2017-11-08得票数 0
1回答
我试着运行一个构建任务，我以前已经使用过这个任务很多次了，工作得很好。但神奇的是它不再起作用了。 下面是构建任务："build:css": "tailwind build style.css -o public/style.css" ? 下面是package.json的内容 {
"name": "doksi",
"version": "0.1.0",
"private": true,
"scripts": {
"serve
浏览 21提问于2020-10-25得票数 0
1回答
Vue资产图像url自动更改
、、、、
我将从另一个项目中获得一个在Vue项目中用作url的图像。当我这样称呼它的时候，它没有问题：
<v-img
class="header__logo"
lazy-src="@/assets/images/mail.jpg"
src="@/assets/images/mail.jpg"
alt="Logo"
></v-img>
当我查看浏览器中的url时，我看到添加了粗体标记的位置，并且每次发布时，代码都会更改。
我怎样才能不改变它呢？
浏览 5提问于2022-06-07得票数 0
回答已采纳
请帮帮我。在我的vue项目中添加了Nuxt(SSR)。全部移动到项目的根目录，创建了一个页面文件夹。出现了以下错误：
ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/sr
浏览 3提问于2021-08-22得票数 1
回答已采纳
1回答
我正在使用Vite (Vue3)和Windi开发一个库。对于构建()，我使用库模式，配置如下：
vite.config.js
export default defineConfig({
plugins: [vue(), WindiCSS()],
build: {
lib: {
entry: path.resolve(__dirname, 'src/lib.js'),
name: 'MyLIB',
},
rollupOptions: {
// make sure to externalize de
浏览 0提问于2021-07-29得票数 1
我在vue-sfc-汇总项目中添加了尾风3，但它不起作用。
ERROR Failed to compile with 1 error
error in ./dev/index.css
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
浏览 9提问于2021-12-21得票数 0
我试图改变我的网页应用程序的CSS特性vue介绍教程。我很难更改工具提示按钮的颜色，即vue-intro.js中的主题。
我想更改Next按钮的颜色。因此，如何在nuxt.js项目中更改CSS。
我添加了下面的代码作为插件。但是我不能改变CSS
import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'
Vue.use(VueIntro)
浏览 4提问于2021-03-30得票数 1
我正试着在我的laravel项目中使用Vue。并为该项目导入vuetify。 但是它会将所有的css内联到项目中。 我的app.js是avobe： window.Vue = require('vue');
//import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import {store} from './store/store'
import vuetify from './plugins/vuetify' // path to
浏览 12提问于2020-01-25得票数 0
我正在构建一个包含html文件中表单的vue组件。需要使用vuelidate库验证表单。
下面显示的是警告，验证不起作用。
Vue警告:属性"$v“在呈现过程中被访问，但没有在实例上定义。在…
const { required, minValue, minLength, email } = window.validators;
const {Vuelidate} = window.vuelidate;
const vue = {
template:
/*html*/
`<div>
浏览 3提问于2022-01-08得票数 3
回答已采纳
4回答
在Laravel+Vue项目中，我试图使用axios来获得API响应。Axios调用Laravel端点并获得控制器响应。
代码看起来
JS
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";
import Vuetify from "vuetify"
浏览 3提问于2020-03-20得票数 0
我喜欢在我的项目中使用inline svg，因为使用css和js(道具)可以很好地控制宽度、高度、填充颜色、笔画宽度和笔画颜色。我通常为每个SVG图标创建一个vue.js证监会()。下面是一个例子：
<!-- IconsArrowRight.vue -->
<template>
<svg
viewBox="0 0 14 14"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d
浏览 5提问于2022-04-10得票数 1
回答已采纳
1回答
我想在我的项目中使用Vuatefie2.0，目前正在阅读有关组件的内容，该组件用于通过编号步骤显示进度。
在中，我看到他们使用<template>元素包装v-stepper组件的内容。HTML看起来如下(注意:我删除了不必要的细节)：
<v-stepper>
<template v-for="n in steps">
<v-stepper-content
:key="`${n}-content`"
:step="n"
>
</v-stepp
浏览 0提问于2019-08-09得票数 9
回答已采纳
大家好，我在Vue 3项目中使用了Aos libray import App from './App.vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
import { createApp } from "vue";
const app = createApp({
render: (h) => h(App),
created(){
AOS.init()
}
});
app.mount('#app') 并添加
浏览 98提问于2021-07-22得票数 1
回答已采纳
1回答
请在我的项目中使用Vue.js，您需要提供一长串的项目，以提高性能，我想使用这样一个工具：
现在我尝试使用这个插件，提供我所需要的。我的问题是，我没有设法使它工作，因为当滚动显示的列表为空。有没有人在这个插件或Vue Js有经验谁可以帮助我？
我的代码：
Js
var ListView = require('./vue-list-view/lib/list-view');
var myListView = ListView.default({
template: '<div>{{ item.foo }}{{ item.bar }}</div&
浏览 0提问于2016-05-02得票数 1
回答已采纳
首先，我将vuejs项目作为vue-cli的测试容器。然后，我在本地环境中从Vuejs组件创建一个npm包"vue-npm-example"，并在上面的测试项目中导入。
在包中，
我运行npm link，在项目中运行npm link vue-npm-example，
Example.vue
<template>
<div id="vue-npm-example">
<h1>{{ msg }}</h1>
</div>
</template>
<scrip
浏览 2提问于2018-04-18得票数 4
1回答
在我的VUE项目中，我将使用Bootstrap库。
结果是，当我导入引导程序库，文本字体，甚至图标时，路径有一个下划线。当我只在Vuetify工作的时候，我没有这个问题。
import "bootstrap/dist/css/bootstrap.css";
当我注释掉导入库的项目中的行时，下划线就消失了。
我如何解决这个问题而不需要在项目中的每一条路径中添加类？
"vue": "2.6.14",
"bootstrap": "4.6.1",
"bootstrap-vue": "2.21.2&#
浏览 7提问于2021-12-09得票数 0
回答已采纳
我在有个书记员
我试图让在其中工作，但我得到了以下错误：
vue-datetime.js:189 Uncaught TypeError: Cannot read properties of undefined (reading 'DateTime')
pen.js:5 Uncaught ReferenceError: Datetime is not defined
Refused to execute inline script because it violates the following Content Security Policy directive: "
浏览 21提问于2022-08-12得票数 0
回答已采纳
1回答
我在一个项目中使用Nuxt3，当在docs中使用cli安装它时，它生成了一个vue 2.7项目。
我怎样才能使用vue 3？
浏览 2提问于2022-08-20得票数 1
回答已采纳
如果.vue文件中有样式，我似乎无法使用单个文件组件构建Vue项目。
它在没有样式标记的情况下成功构建。但一旦我加了样式就给我一个错误。
ERROR in ./src/Martins.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/Martins.vue?vue&type=style&index=0&lang=css&) 9:0
Module parse failed: Unexpected
浏览 1提问于2019-05-09得票数 0
回答已采纳
我是这个vue的新手，当我尝试运行(npm运行服务)时，我遇到了这个错误：
***WARNING Compiled with 4 warnings
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./src/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
浏览 3提问于2020-09-24得票数 5
1回答
我们有不同的组织，每个开发人员都有跨越这些组织的工作项。
我想要一个单一的报告，其中包含分配给开发人员的所有这些组织的工作项。
因此，我的选择是创建一个新项目，并使用在新创建的项目中为每个开发人员创建工作项。但是，我们需要一个新的服务，它还将监视新创建的工作项的状态，并将其设置为与原始项目/组织中的状态相同。
我只是想检查一下Azure Dev Ops中是否有现有的解决方案可以做到这一点。如果不是，这是解决这个问题的正确方法吗？
浏览 7提问于2019-09-06得票数 0
我已经安装了vuetify.js，但在webpack的配置中出现了错误。
我已经更改了webpack的v4配置，也安装了节点sass和sass加载程序。
Webpack.config.js
{
test: /\.(s*)css$/,
loader:['style-loader', 'css-loader', 'sass-loader']
}
这是错误
错误在./node_node/vuetify/src/样式/main.sass 3:0模块解析失败:意外字符'@‘(3:0)您可能需要一个适当的加载程序来处理此文件类型。@
浏览 3提问于2019-09-25得票数 2
我想在我的项目中安装npm的最新版本，如果我运行npm install，我会收到npm WARN Module错误(来自./node_modules/ vue-loader /lib/index.js)：vue-loader vue-template-编译器必须作为对等依赖项安装，但没有安装。您必须自己安装对等依赖项。[
浏览 4提问于2021-01-20得票数 0
我在我的Vue项目中使用红色文本。如果我不导入vuetify.js，当我选择文本时，文本颜色不会改变。但是我导入了vuetify.js，选择的文本颜色从红色变成了黑色。即使我导入(使用) vuetify，我怎么能不改变选择文本的颜色呢？ 当没有验证css时 ? Codepen 导入时验证css ? Codepen 我在我的vue项目中使用HTML编辑器(Tiptap)。但是vuetify改变了我项目的整体风格。这让我很尴尬。当我通过选择文本来改变文本颜色时，我不知道颜色是否改变。因为选择的颜色始终是黑色。 我怎么能忽略某些组件或Div中的一些广告css。
浏览 66提问于2019-10-18得票数 0
回答已采纳
在我的vue(2.0)+ webpack项目中，我配置了vue-html-loader，但是在我的.vue文件中，img标签不能加载静态源图像。下面是我的webpack配置：
module: {
loaders: [
...
{
test: /\.html$/,
exclude: /node_modules/,
loaders: ['html', 'html-minify']
}
, {
test
浏览 1提问于2016-11-22得票数 5
2回答
我即将启动第一个vue 3项目。我正在安装基本的vue包，并且已经安装了vue-cli。文档说:对于Vue 3，你应该使用在npm上可用的Vue CLI v4.5作为@vue/cli。若要升级，您需要全局重新安装最新版本的@vue/cli。 全局安装是否会影响vue 2项目工具？我希望能够在一些项目中保留vue 2，并在其他项目中使用vue 3。这应该如何配置。 IT人
浏览 35提问于2021-01-20得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
