webpack使用vue组件化

上一篇

相关代码

引入vue

1.安装vue

2.配置webpack.config.js

3.npm run build 打包

el template

两者区别


例子：

main.js增加

vue的改善

main.js


重新编译
接着我们还可以建立一个app.js

export default {
     
  template:  `
  

    
{
      {message}}
    按钮
    
{
      {name}}
  
  `,
  data() {
     
    return {
     
      message: 'Hello Webpack',
      name: 'coderwhy'
    }
  },
  methods: {
     
    btnClick() {
     

    }
  }
}

将本节中的main.js中的const app变成

import App from './vue/App.vue'

.vue 文件

使用webstrom创建.vue 文件以下内容
右键

使用

1.安装加载器

npm install vue-loader vue-template-compiler --save-dev

2.配置webpack.config.js


重新安装（npm install）运行打包
3.这样配置webpack.config.jswebpack.config.js时，当import引入vue组件时可以省略“.vue”