在webpack中使用vue

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

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

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

• 1.2 安装vue

  # 重新安装所有依赖包
  npm i
  
  # 将vue安装到项目的依赖中
  npm i vue -S
  

  index.html

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

  main.js

  // 引vue包
  import Vue from 'vue';
  
  let vm = new Vue({
      el: '#app',
      data: {
          msg: 'test'
      }
  });
  

  此时运行npm run dev 会报错：

  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

  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和相应的依赖

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

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

  扫描二维码关注公众号，回复： 5420918 查看本文章

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

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

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

  此时运行 npm run dev 会报错：

  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

  let VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  // 把VueLoaderPlugin放到plugins中
  plugins: [
      new VueLoaderPlugin()
  ]
  

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

  1. 安装vue包：

     npm i vue -S
     

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

     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 实例要控制的区域