当您使用 Vue CLI 3.0 生成应用程序并选择 PWA 支持时。它生成一个public/manifest.json文件。但是，这些设置不会在元标记中使用，例如更改文件中的主题颜色manifest.json不会更改<meta name="theme-color" ...>标记。
要配置它，您必须遵循自述文件@vue/cli-plugin-pwa并在文件中添加选项vue.config.js。
那么这个manifest.json文件有什么用呢？
我正在使用 vue cli 3 构建一个 chrome 扩展。我的基础知识运行良好，但我希望还可以通过构建过程运行我的内容和后台 javascript，而不是仅仅将它们放入我的公共文件夹中并将其复制到区。这主要是为了让我可以使用导入/导出来清理我的文件结构。
我能够将它们添加为 vue 配置中的新“页面”，即使没有 html 模板文件，它们也会正确构建并移动到 dist 中。
问题是，然后他们将缓存破坏字符串附加到其文件名中，因此我无法在扩展清单中引用它们。例如，background.js变为background.d8f9c902.js
是否可以告诉 vue 配置某些“页面”不应被缓存清除？这里的文档似乎没有将其公开为参数。
提前致谢！
我正在尝试更改项目中的“主要”、“危险”、“信息”等主题颜色。我使用 bootstrap-vue。我尝试更改node_modules中bootstrap文件夹中的variables.sass文件，但没有任何反映。我查看了主题文档，但我似乎无法理解它，或者不知道我应该做什么。他们的示例看起来与 CLI 4 的脚手架项目完全不同。我应该创建自定义 sass 文件、安装 sass 加载程序并导入它吗？
main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);
const router = new VueRouter({mode: 'history',routes});
new Vue({
router,
render: h => h(App)
}).$mount('#app')
应用程序.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
@import 'assets/main.css';
@import 'assets/custom_scss.scss';
</style>
我刚刚通过 Vue CLI 创建了一个新的 Vue 应用程序，但我无法使用 debugger 或 console.log，否则我会在浏览器中收到错误，为什么以及如何允许它？
Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7
我正在尝试将 Tailwind.css 添加到 Vue.js 项目中。有很多关于如何执行此操作的资源，其中大多数都遵循与此视频相同的路径。为了确保我处于与视频中相同的条件，我使用vue-cli默认预设从头开始创建了一个 Vue 应用程序。在此步骤之后，我执行了以下操作：
npm install tailwind.csssrc/styles/tailwind.css@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwind init创建文件tailwind.config.jspostcss.config.js在项目的根目录下创建，并将以下内容添加到该文件中：module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
tailwind.config.js文件中：module.exports = {
theme: {
colors: {
"awesome-color": "#56b890",
},
extend: {},
},
variants: {},
plugins: [],
};
<p>元素添加到HelloWorld.vue生成的组件中vue-cliTailwind类来设计它的样式最后，问题是：我可以应用一些类，例如bg-awesome-colorortext-xl并让它们正确渲染，但许多其他类将无法工作。
例如，删除这些类并尝试改为bg-black, bg-orange-500, …
学习 vuejs3 我用命令创建了新的 @vue/cli 应用程序
vue create myapp
选择 vuejs 3 后，我将 Router 添加到我的项目中，并在我的 src/main.js 中添加了 Router 引用：
import { createApp } from 'vue'
import { createRouter/*, createWebHistory */ } from 'vue-router'
import WelcomeScreen from './pages/WelcomeScreen.vue'
import UsersList from './pages/UsersList.vue'
import App from './App.vue'
const router = createRouter({
// history: createWebHistory(),
mode: 'history',
routes: [
{ path: '/', component: WelcomeScreen },
{ path: '/users', component: UsersList }
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
但在控制台中我看到警告：
"export 'createRouter' was not …我疯狂地试图将 Vue 3 CLI 输出调和成适用于各种教程和插件的东西，这些教程和插件都使用 Vue 对象，如Vue.createApp(.... 在我的项目中，我可以使用
import {createApp} from 'vue';
createApp(...
但import Vue from 'vue';导致 Vue 仍未定义。我通过 NPM 安装了 Vue 3。显然，我不了解 NPM 导入的一些关键问题，{createApp}如果导入整个模块不起作用，导入如何工作？
来自 package.json：
"dependencies": {
"@babel/polyfill": "^7.12.1",
"apexcharts": "^3.22.1",
"core-js": "^3.6.5",
"d3": "^6.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.1",
"vue3-apexcharts": "^1.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
这是我的临时 main.js。这将打印“未定义”，然后是正确的 createApp 函数定义：
import Vue from 'vue';
import {createApp} from …我正在使用vue.js和vue-cli构建一个应用程序，您可以在其中配置订单。用户应该能够选择是否要在每个订单后配置另一个订单，或者是否完成。为了实现这一目标，我想递归地重用我的订单组件：
订单.vue：
<template>
<div id="order">
<other> // just to show that I used other components here and how
<div>
<button class="CustomButton" v-on:click="finalizeOrder">
Finalize Order
</button>
<button class="CustomButton" v-on:click="configureAdditionalOrder">
Configure Additional Order
</button>
</div>
<order v-if="additionalOrder" @passOrderObject="catchOrderObjectFromRecursiveChild" @finalizeOrder="passFinalizeOrder" />
</div>
</template>
<script>
import Other from '@/components/Other.vue'
export default {
components: {
Other
},
data () {
return {
additionalOrder: false
}
},
methods: {
configureAdditionalOrder () {
this.buildOrderObject()
this.additionalOrder = true
},
catchOrderObjectFromRecursiveChild (order) {
this.$emit('passOrderObject', order) …我如何npm run test:unit在编写和保存测试时保持命令运行，我需要像npm run serve热重载这样的东西，我已经试过了，npm run test:unit --watch但它不起作用。
我的 Vue 组件在顶级 HTML 文件中声明时工作正常，如下所示
<body>
<div class='app' id='app'>
<header-bar id='headerBar'></header-bar>
<journal-page></journal-page>
</div>
<script src="js/app.js"></script>
</body>
但是在<journal-card>组件内部使用<journal-page>组件会给我带来错误：
[Vue 警告]：无法解析组件：journal-card at
<JournalPage>。
我该如何解决这个问题？
这是我加载 Vue 组件的顶级代码app.js：
import * as _vue from 'vue';
import _headerBar from './widgets/headerBar.vue';
import _journalCard from './widgets/journalCard.vue';
import _journalPage from './widgets/journalPage.vue';
import _store from './data/store.js';
const app = _vue.createApp
({
components:
{
'headerBar': _headerBar,
'journalCard': _journalCard,
'journalPage': _journalPage
},
data : _store,
methods: {}
});
const mountedApp = app.mount('#app');
这是我的journal-page.vue …