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:  `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
  `,
  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”

下一篇