这篇文章主要介绍如何在webpack中使用vue。

1. 基于webpack-study构建的项目框架在webpack中使用vue

  • 1.1 将webpack-study中除了node_modules文件夹都拷贝到新的项目中，src目录下只保留main.js和index.html

  • 1.2 安装vue

    1
    2
    3
    4
    5
    # 重新安装所有依赖包
    npm i

    # 将vue安装到项目的依赖中
    npm i vue -S

    index.html

    1
    <div id="app"><p>{{ msg }}</p></div>

    main.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 引vue包
    import Vue from 'vue';

    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'test'
        }
    });

    此时运行npm run dev 会报错：

    1
    2
    3
    4
    bundle.js:10736 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    ## 从vue的package.json中main属性中看到，vue包引用的入口文件默认是vue.runtime.common.js，不是vue.js
    #  "main": "dist/vue.runtime.common.js",

    解决上述问题可以在webpack.config.js配置文件中，添加如下代码，让项目使用vue.js

    1
    2
    3
    4
    5
    resolve: {
        alias: {
            "vue$": 'vue/dist/vue.js' // 修改vue被引入时的包的路径
        }
    }

  • 1.3 在vue的runtime-only模式下如何使用组件

    1.3.1 在src下创建一个login.vue文件，其中包含三个模块，template，script，style

    1.3.2 安装 vue-loader和相应的依赖

    1
    npm i vue-loader vue-template-compiler -D

    1.3.3 在webpack.config.js中的module的rules下添加vue的loader规则

    1
    {test: /\.vue$/, use: 'vue-loader'}

    1.3.4 在main.js中引入login.vue并在vm实例中添加render方法

    1
    2
    3
    4
    5
    6
    7
    import login from './login.vue'

    let vm = new Vue({
        el: '#app',
        data: {},
        render: c => c(login)
    })

    此时运行 npm run dev 会报错：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ERROR in ./src/login.vue
    Module Error (from ./node_modules/vue-loader/lib/index.js):
    vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
     @ ./src/main.js 7:13-35
     @ multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/main.js

    ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0
    Module parse failed: Unexpected token (2:0)
    You may need an appropriate loader to handle this file type.

    解决办法：

    在webpack的配置文件中添加 VueLoaderPlugin

    1
    2
    3
    4
    5
    6
    let VueLoaderPlugin = require('vue-loader/lib/plugin');

    // 把VueLoaderPlugin放到plugins中
    plugins: [
        new VueLoaderPlugin()
    ]

  • 1.4 总结： webpack中如何使用vue

    1. 安装vue包：

      1
      npm i vue -S

    2. 由于在webpack中推荐使用.vue这个组件模块文件定义组件，所以需要安装能解析这种文件的loader：

      1
      2
      npm i vue-loader vue-tempale-cmpiler -D
      # 安装完毕后需要在webpack的配置文件中做一些修改，可参考上面的具体步骤

    3. 在main.js中导入vue模块：import Vue from ‘vue’

    4. 定义一个test.vue结尾的文件，其中包含三个部分：template，script，style

    5. 使用 import login from ‘./test.vue’ 导入这个组件

    6. 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(test) })

    7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域