Webpack 集成 Vue 环境补充

在具体使用的过程中，又碰到了些许问题

1. 利用 template 编译时会整体覆盖 el 所标识的div构造器，创建 vue 组件代替 js 文件，（开发标准）

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

App.vue

 <template>
    <div>
        <h2>
        {{message}}
        </h2>
        <Cpn></Cpn>
    </div>
 </template>


 <script>
 import Cpn from './Cpn.vue'　　#嵌套组件导入
 export default {
    name:"App",
    components:{
        Cpn　　#可嵌套组件
    },
    data(){
        return {message:'123'
        }
    }
 }
 </script>
 <style>...<style>

 

2. 但 webpack 不能直接编译，需 vue-loader 与 vue-template-compiler 插件, 对应npm安装命令

npm install vue-loder vue-template-compiler --save-dev #开始时依赖

webpack.config.js 配置使用：
module:{
    rules:[
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
}

 

3. 再报错就是 vue-loder 的版本问题了可在 package.json 中查看其版本

错误1：需要另外安装插件才能运行vue-loder，根据提示上网搜安装即可

不想安装->

解决方法：package.json 修改 vue-loader 版本为 ^13.0.0   ，执行 npm install　　#注：package.json修改后要重新 npm install

错误2：执行后还有问题就是vue版本与 vue-template-compiler 版本不匹配，对此我们可以指定两者版本后重新install

成功后的package.json代码 
----------------------
"devDependencies": {
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^3.6.0"
  },

  "dependencies": {
    "vue": "^2.6.12"
  }
----------------------

成功之后再npm run build 一下你就可以开始你的 .vue文件 export default{ } 高效开发了

 

标注：npm run build 为自定义命令，设置请找度娘，很简单的

拓展：webpack.config.js 配置项

resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'    #解决你的runtime-only 与runtime-template-compiler问题
    },
    extensions: ['.js','.vue','.css']    #添加后路径可不填后缀
}