如何在现有资源的基础上，利用路由来准备基于Vue组件的项目？

Question

我在Vue是个新手，所以也许这对你来说是个显而易见的问题。

我正在研究微服务体系结构中的Java应用程序，我决定用Vue来准备我所有服务的前端部分。我的前端视图计划看起来非常相似，因为这将是一个CRM类型的应用程序。我已经准备好了我的HTML框架、CSS样式和使用Pingendo的JS。

重要的是，我需要在指定的微服务中始终保持我的页眉和页脚部分相同。这样做的最佳选择是在Vue中使用路由，并且只在页眉和页脚组件之间选择内容。一般比较明显的想法。

问题是如何使用已经准备好的HTML、CSS和JS文件创建新的Vue项目？

我使用Vue CLI创建我的项目，只运行默认配置的vue create project-name命令。

Pingendo使用Bootstrap、JQuery和Popper库，我必须使用npm install bootstrap jquery popper.js将它们导入到Vue项目中来安装它，而且我现在没有由于缺乏对这个库的依赖而表示的警告和错误。

我还遵循了本指令，并使用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

在Vue中使用jQuery是有问题的。您可以在没有jQuery的情况下在Vue中完成需要做的事情，所以我首先要检查您是否正确地选择了所需的工具。你到底需要什么jQuery才能让Vue处理不了呢？

另外，Vue有很多插件可以正确地处理细微差别，所以对于Bootstrap，您也应该安装Bootstrap-Vue。检查您想要使用的库没有特定到Vue的版本。这将使您避免这些问题。

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