原本的js对象编写过于繁琐，我们用.vue组件来拆分。
即，把app.js文件拆分为App.vue和Cpn.vue
1安装vue-loader 和 vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
配置webpack.config.js
{ test: /.vue$/, use: ['vue-loader'] },
报错，缺少VueLoaderPlugin插件，因为14版以上要开始自己安装插件，所以我们先用低版本
package.json
"vue-loader": "^14.0.0",
然后执行npm install 重新安装
代码
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> </head> <body> <div id='app'> <!--真实开发中这里什么也不写--> </div> </body> <script src="./dist/bundle.js"></script> </html>
srcmain.js
//使用vue import Vue from 'vue' // import App from "./vue/app" import App from "./vue/App.vue" new Vue({ el:'#app', data:{ message:"Hello webpack" }, template:"<App />", components:{ App } })
srcvueApp.vue
<template> <div> <h2 class='title'>{{message}}</h2> <button @click="btnClick">按钮</button> <Cpn></Cpn> </div> </template> <script> import Cpn from "./Cpn.vue"; export default { name:"App", components:{ Cpn }, data(){ return { message:'我是app组件绿色' } }, methods:{ btnClick(){ } } } </script> <style scoped> .title{ color: #4cff00; } </style>
srcvueCpn.vue
<template> <div class='title'> <p>{{name}}</p> </div> </template> <script> export default { name: "Cpn", data(){ return { name:'我是Cpn组件 紫色。' } } } </script> <style scoped> .title{ color: #d900ff; } </style>
结果
源代码
链接：https://pan.baidu.com/s/1hjdOEgexZokYQ3aSudV1wg
提取码：l6ni