极客观点
项目管理
HarmonyOS
webpack+vue组件开发
建立Vue组件
创建组件
项目目录结构
在src目录下建立components文件夹，并在其中建立app.vue文件
# 项目名称 vue-components-demo
vue-components-demo
└─webpack.config.js //配置文件
└─package.json
└─src //文件入口
└─components //组件存放文件夹
└─app.vue //vue组件
└─main.js //主js文件
└─index.html //主html文件
└─node_modules //项目的依赖所在的文件
└─dist //webpack打包后生成的文件夹
└─bundle.jshtml文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo!!</title>
</head>
<body>
<div id='div1'>
<app></app>
</div>
<script src='../dist/app.bundle.js'></script>
</body>
</html>编辑app.vue文件
<template>
<div class="message">{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader'
}
}
}
</script>
<style>
.message{
color: red;
font-size: 36px;
font-weight: blod;
}
</style>编辑main.js文件
import Vue from 'vue'
import App from './components/app.vue'
new Vue({
el:'#div1',
components: {App}
});运行查看效果
$ webpack这里报错
ERROR in ./src/components/app.vue
Module parse failed: E:MySoftwaretestGitwebpackvue-componets-demosrccomponentsapp.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
at Parser.pp$4.raise (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExpression (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21)
at Parser.pp$1.parseStatement (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47)
at Parser.pp$1.parseTopLevel (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39)
at Parser.parse (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at E:\MySoftware\testGit\webpack\vue-componets-demo\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)@ ./src/main.js 7:11-42
你得配好 vue-loader 才行啊