webpack的进阶使用(二)webpack中配置vue组件的加载器webpack项目中使用Vue简单配置webpack

webpack中配置vue组件的加载器

1, npm install vue-loader vue-template-compiler -D

2, 在 webpack.config.js配置文件中，添加vue-loader的配置项目
  const VueLoaderPlugin = require('vue-loader/lib/plugin')
  module.exports = {
    module: {
      rules: {
        {test: /\.vue$/, use: 'vue-loader'}
      }
    },
    plugins: [
      new VueLoaderPlugin() // 确保引入这个插件
    ]
  }

webpack 项目中使用Vue

1, 运行 npm install vue -S 
2, src下面创建index.js, 通过import Vue from 'vue' 导入vue构造函数
3, 创建vue实例对象，并指定要控制的el区域
4, 通过render函数选人App组件

import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({
  el: '#app',
  render: h => h(App)
})

简单配置webpack打包

  "scripts": {
    build: "webpack -p"
  }

问题

 vue.runtime.esm.js:620 [Vue warn]: Cannot find element: #app
 
 解决办法：把引入的JS文件防止了</body> 后面即可

Vue脚手架

1， 上面通过webpack 手动搭建了一个Vue 框架，Vue3.x之后，可以通过脚手架创建项目模版
2， npm install -g @vue/cli
3， 基于3.x 版本创建Vue项目主流有3中方式：
   （1） vue create my-project
   （2） vue ui
   （3）1, npm install -g @vue/cli-init
       2, vue init webpack my-project