我在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
我的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/
[将jQuery与Vue结合使用时值得怀疑。您可以在不使用jQuery的情况下在Vue中完成所需的工作,因此我首先要检查您是否正确选择了所需的工具。您对于Vue无法处理的jQuery到底需要什么?
另外,有很多Vue插件可以正确处理细微差别,因此对于Bootstrap,您也应该安装Bootstrap-Vue
。检查您要使用的库没有特定于Vue的版本。这样可以避免这些问题。
供参考:https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/