如何在現有資源的基礎上，准備帶有路由的 Vue 組件化項目？

Question

我是 Vue 的新手，所以這對你來說可能是一個明顯的問題。

我正在研究微服務架構中的 Java web 應用程序，我決定在 Vue 中准備我所有服務的前端部分。 我的前端視圖應該看起來非常相似，因為這將是 CRM 類型的應用程序。 我已經使用 Pingendo 准備了我的 HTML 骨架、CSS styles 和 JS。

重要的是，我需要在指定的微服務中始終保持 Header 和頁腳部分相同。 這種事情的最佳選擇是在 Vue 中使用路由並僅路由 Header 和頁腳組件之間的內容。 一般比較明顯的想法。

問題是如何使用已經准備好的 HTML、CSS 和 JS 文件創建新的 Vue 項目？

我使用 Vue CLI 創建我的項目，並使用默認配置運行vue create project-name命令。

Pingendo use Bootstrap, JQuery and Popper libraries, which I have to import to my Vue project using npm install bootstrap jquery popper.js to install it and I have no warnings and errors now coused by lack of dependecies to this libraries.

我也遵循此說明並使用npm install -D vue-loader vue-template-compiler了 webpack 的基本配置，但在npm run serve我有一個錯誤：

 ERROR  Failed to compile with 1 errors                                                                                                         10:10:28 PM

 error  in ./src/components/test

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#
loaders
> <template>
|     <h2>this is TEST Component content</h2>
| </template>

 @ ./src/router/index.js 4:0-37 14:15-19
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

我的 Test.vue 組件非常簡單：

<template>
    <h2>this is TEST Component content</h2>
</template>

<script>
    export default {
        name: 'test'
    }
</script>

<style>

</style>

我不知道我做錯了什么。 一切都有一個帶有必要添加的默認配置。 我應該采取哪些步驟才能使此類項目正常運行？

存儲庫： https://bitbucket.org/jacekmucha91/storycrm-manager-vue/src/master/

Answer 1

將 jQuery 與 Vue 一起使用是有問題的。 您可以在沒有 jQuery 的情況下在 Vue 中做您需要做的事情，所以我會首先檢查您是否正確選擇了所需的工具。 你到底需要什么 jQuery 因為 Vue 無法處理？

此外，Vue 有很多插件可以正確處理細微差別，因此對於 Bootstrap，您也應該安裝Bootstrap-Vue 。 檢查是否沒有您要使用的特定於 Vue 版本的庫。 這將使您避免這些問題。

供參考： https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/