我在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/