webpack配置vue（由浅入深，循序渐进）

程序员文章站 2022-06-19 15:44:18

webpack配置vuenpm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev.npm install vue@2.5.21 --save–save可以简写-S,一个横杠加大写S然后在mian.js里引入//使用vue进行开发import Vue from 'vue'const app = new Vue({ el: '#app', data: { message: 'hello webpack' }});然后执行npm run buil...

webpack配置vue

npm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev.

npm install vue@2.5.21 --save

–save可以简写-S,一个横杠加大写S

然后在mian.js里引入

//使用vue进行开发
import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello webpack'
  }
});

然后执行npm run build

会产生报错

webpack配置vue（由浅入深，循序渐进）

这是因为vue在构建发布版本时，有两个版本

1.runtime-only:

该版本代码里不能有任何template,el里挂载的id组件也会被当成template

el: '#app',

2.runtime-compiler

代码里可以有template,因为有compiler可以编译template

解决办法

在webpack.config.js里配置

/*配置vue发行使用的版本*/
resolve: {
  /*alias:别名*/
   alias: {
    'vue$':'vue/dist/vue.esm.js'
   }
}

意思是：一旦我们在js文件里使用
import Vue from 'vue'
看看‘vue’是否指向其他文件夹，在webpack.config.js离我们配置了
'vue$':'vue/dist/vue.esm.js'
就会在这个路径下找到对应的js,默认使用的vue.runtime.js

再进行 npm run build即可

el与template区别

mian.js里

new Vue({
  el: '#app',
  template: `
    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    </div> `,
  data: {
    message: 'hello webpack',
    name:'lcq'
  },
  methods: {
    btnClick() {
        
    }
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="dist/bundle.js"></script>
</body>
</html>

一般开发intex.html文件里我们不会有很多的代码，也不会去随意修改。

我们如果在vue实例里既挂载了‘#app’，又定义了template,会自动将template里的html代码，添加到index.html的app div内

vue的终极方案

直接在vue实例里写模板肯定搞得很杂乱，js代码和html写到了一起

直接将上边的代码格式化

//使用vue进行开发
import Vue from 'vue'

//定义模板对象
const App = {
  template: `
    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    </div> `,
  data() {
    return {
      message: 'hello webpack',
      name: 'lcq'
    };
  },
  methods: {
    btnClick() {
      console.log('我是按钮');
    }
  }
}

new Vue({
  el: '#app',
    //在模板里使用组件标签
  template: '<App></App>',
  comments: {
   //组件名和组件对象名字相同的简写
    App
  }
});

这样写豁然开朗有木有，之前我们的模板抽离

<body>
<div id="app">
  <cpn></cpn>
  <cpn2></cpn2>
</div>
<!--2.直接使用template标签-->
<template id="cpn2">
  <div>
    <h2>我是标题2</h2>
    <p>我是内容2</p>
  </div>
</template>

<!--1.抽离模板写法-->
<script type="text/x-template" id="cpn1">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
  </div>
</script>

<script src="../js/vue.js"></script>
<script>
  /*注册一个全局组件*/
  Vue.component('cpn',{
    template: '#cpn1',
  });
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn2:{
        template: '#cpn2'
      }
    }
  });
</script>
</body>

之前只是将子组件的html部分代码抽离，然后还是在vue实例里注册，写组件方法，现在直接将整个组件全部抽离成单独对象，里边有结构，方法等，然后只用在vue实例里运用同名简写的方式注册子组件，然后将自定义的html标签写到vue实例的template里边，由于同时有el和template，会自动用template里的代码替换到el挂载的div内，结构明了。

注意components别打错了，也就我了。。。

再往下来

这样抽离是比之前清晰了不少，但是，还是很臃肿在入口js里（mian.js），还是有很多代码。

我们为何不再将模块抽离到单独文件呢?于是在src里新建vue文件夹，抽离一个app.js

export default {
  template: `
    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    </div> `,
  data() {
    return {
      message: 'hello webpack',
      name: 'lcq'
    };
  },
  methods: {
    btnClick() {
      console.log('我是按钮');
    }
  }
}

然后直接在mian.js里导入

//使用vue进行开发
import Vue from 'vue'

//导入模板
import App from "./vue/app.js";

new Vue({
  el: '#app',
  template: '<App></App>',
  components: {
    App
  },

之前讲过一个js文件里只能有一个export default,然后import导入时，可以自定义名字接受该对象。

这样入口js是否更简便，结构更清晰？

webpack配置vue（由浅入深，循序渐进）

继续分析

在这个app.js里边有不好的地方，js代码和html代码没有分离，我们不是叫讲，html结构，css样式，js行为，三者分离结构清晰。

引出vue文件原型

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        message: 'hello webpack',
        name: 'lcq'
      };
    },
    methods: {
      btnClick() {
        console.log('我是按钮');
      }
    }
  }
</script>

<style scoped>
.title{
  color: green;
}
</style>

直接将app.js文件中各部分切割，放到App.vue文件对应的地方，还加了点样式。

然后导入vue文件

import App from "./vue/App.vue";

然后npm run build，然后就报错了

webpack配置vue（由浅入深，循序渐进）

为啥呢？

因为编译器还不认识.vue后缀的文件

解决它

为他引入vue-loader 和 vue-template-compiler ,前边是加载vue文件，后边是真正编译vue文件，都是开发依赖

npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev

引入loader后配置webpack.config.js文件，在rules里

  /*配置vue-loader和vue-template-compiler*/
{
  test: /\.vue$/,
  use: ['vue-loader']

}

然后运行 npm run build 成功

那么如何在App.vue里引用其他vue文件

Cpn.vue里边有一个Cpn组件

<template>
  <div>
    <h2>我是cpn组件的标题</h2>
    <p>我是cpn的内容</p>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Cpn",
    data() {
      return {
        name: 'cpn组件的name',

      };
    }
  }
</script>

<style scoped>

</style>

我们在App.vue里引入和注册使用

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
    <Cpn></Cpn>
  </div>
</template>

<script>
  import Cpn from './Cpn.vue'

  export default {
    name: "App",
    /*注册cpn*/
    components: {
      Cpn
    },
    data() {
      return {
        message: 'hello webpack',
        name: 'lcq'
      };
    },
    methods: {
      btnClick() {
        console.log('我是按钮');
      }
    }
  }
</script>

<style scoped>
  .title {
    color: green;
  }
</style>

然后在mian.js里使用App.vue

//使用vue进行开发
import Vue from 'vue'

//导入模板
/*import App from "./vue/app.js";*/
import App from "./vue/App.vue";

new Vue({
  el: '#app',
  template: '<App></App>',
  components: {
    App
  },

});

这样我们index.html文件里就不用设置其他结构，直接在App.vue里开发初始页面，然后再mian.js里引入App.vue组件，组测，在template里使用替换到index.html里。

如果App.vue文件开发中要用到其他组件，同样的方式在App.vue里导入Cpn.vue，然后注册使用，这样就可以形成一个个树桩结构。

如果像偷懒，import导入vue文件或js文件时省略后缀在webpack.config.js里配置
resolve: {
  extension: ['.js','.css','.vue'],
  /*alias:别名*/
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

extension里的后缀名都可以省略。

来个完整地webpack.config.js配置

/*导入path模块*/
const path = require('path');

module.exports = {
  /*入口*/
  entry: './src/main.js',
  /*出口*/
  output: {
    /*绝对路径，动态获取,第一个参数获取当前文件所在路径，我们要放到dist文件夹下*/
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      /*配置css*/
      {
        test: /\.css$/,
        /*
        * css-loader只负责css文件加载
        * style-loader负责将样式加到DOM中
        * 使用多个loader,是从右向左读的，先用的要放到右边
        */
        use: ['style-loader', 'css-loader']
      },
      /*对象写法,配置less*/
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader" //creates style nodes from JS strings
          }, {
            loader: "css-loader" //translate css into CommonJS
          }, {
            loader: "less-loader" //complies Less to css
            /*还可以有options选项*/
          }
        ]
      },
      /*配置url*/
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //当加载图片，小于limit时，会将图片编译成base64字符串形式
            //当加载图片，大于limit时，会将图片使用file-loader模块加载
            limit: 8192,
            name: 'img/[name].[hash:8].[ext]'
          }

        }]
      },
      /*配置es6转es5*/
      {
        test: /\.js$/,
        /*排除以下文件夹转换*/
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {

            presets: ['es2015']
          }
        }
      },
        /*配置vue-loader和vue-template-compiler*/
      {
        test: /\.vue$/,
        use: ['vue-loader']

      }
    ]
  },
  /*配置vue发行使用的版本*/
  resolve: {
    extensions: ['.js','.css','.vue'],
    /*alias:别名*/
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

本文地址：https://blog.csdn.net/LIUCHUANQI12345/article/details/111877494

webpack配置vue（由浅入深，循序渐进）

webpack配置vue

会产生报错

1.runtime-only:

2.runtime-compiler

解决办法

el与template区别

vue的终极方案

再往下来

继续分析

为啥呢？

解决它

那么如何在App.vue里引用其他vue文件

Vue + Webpack + Vue-loader学习教程之相关配置篇

Vue+webpack项目基础配置教程

vue2.0结合webpack的路由配置教程

让 babel webpack vue 配置文件支持智能提示的方法

详解vue2.0脚手架的webpack 配置文件分析

vue-cli的webpack模板项目配置文件分析

vue项目的webpack4.X配置

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

vue+webpack中配置ESLint

详解vue-cli + webpack 多页面实例配置优化方法