如何基于现有资源使用路由准备基于Vue组件的项目?

问题描述 投票:0回答:1

我在Vue中很新,所以也许对您来说是一个显而易见的问题。

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

重要的是,在指定的微服务中,我的Header和Footer部分始终保持相同。最好的选择是在Vue中使用路由,并且仅路由Header和Footer组件之间的内容。总的来说,这个想法很明显。

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

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

Pingendo使用Bootstrap,JQuery和Popper库,我必须使用npm install bootstrap jquery popper.js将其导入到我的Vue项目中进行安装,并且由于没有对该库的依赖而现在没有警告和错误。

我也遵循this instructions,并使用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

我的T​​est.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/

javascript vue.js webpack routing loader
1个回答
0
投票

[将jQuery与Vue结合使用时值得怀疑。您可以在不使用jQuery的情况下在Vue中完成所需的工作,因此我首先要检查您是否正确选择了所需的工具。您对于Vue无法处理的jQuery到底需要什么?

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

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

© www.soinside.com 2019 - 2024. All rights reserved.