webpack4与vue整合记录

最新推荐文章于 2024-07-16 16:20:26 发布

小小蜗牛学习记

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量442

点赞数

分类专栏： webpack vue

本文链接：https://blog.csdn.net/qq_28458369/article/details/89845042

版权

webpack 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

首先可以从https://github.com/fanqingyun/d3Util.git拉取dev分支下webpack的demo（记得切换到dev分支），具体可以参照上一篇，然后以下就可以整合vue了

安装依赖：

1，安装vue

npm i vue

2, 安装vue相关

npm install --save-dev vue-loader vue-style-loader vue-template-compiler vue-h                                                                                                             ot-reload-api

3， babel相关

npm i @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-cl                                                                                                             ass-properties -D

修改babel配置文件.babelrc

{
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"
      }
    ]
  ]
}

在配置文件webpack.base.conf.js里添加vue的配置

const VueLoaderPlugin = require('vue-loader/lib/plugin');

开始写测试例子：

在src文件夹下创建App.vue和main.js

App.vue

<template>
  <div>{{test1}}</div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      test1: '测试vue与webpack的整合'
    }
  }
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

然后在模板index.html下添加<div id="app"></div>

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>模板</title>
    <meta charset="utf-8"/>
    <div id="app"></div>
  </head>
  <body>
  </body>
</html>

运行得以下结果即整合成功

小小蜗牛学习记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack4与vue整合记录

首先可以从https://github.com/fanqingyun/d3Util.git拉取dev分支下webpack的demo（记得切换到dev分支），具体可以参照上一篇，然后以下就可以整合vue了安装依赖：1，安装vuenpm i vue2, 安装vue相关npm install --save-dev vue-loader vue-style-loader vue-...
复制链接

扫一扫

专栏目录