webpack与vue结合使用

例1：在webpack使用web

安装vue

`cnpm i vue -S

在index.html使用插件表达式来访问vue实例中的数据

<div id="app">
    {{msg}}
    <login></login>
  </div>
复制代码

在main.js引入vue构造函数和建立实例

import Vue from 'vue'              
var login = {
  template: '<h3>这是登陆组件</h3>'
}
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  methods: {},
  components: {
    login
  }
})
复制代码

结果

页面不显示数据，且有错误提醒

缘由是在webpack中，使用import Vue from 'vue'导入的vue构造函数，功能不完整，只能提供runtime-only的方式。 即import vue from vue加载vue包的入口文件是vue.runtime.common.js

包查找规则：
项目根目录中有没有node_modules的文件夹，
在node_modules中根据包名，找到对应的vue文件，
在vue文件夹中，找package.json的包配置文件，
在package.json中，查找一个main属性（main属性指定了一个包在加载时的入口文件）
复制代码

解决方式

• 在vue的package.json包配置文件,把main属性改成"main": "dist/vue.js"(不推荐)
• 修改路径import Vue from 'vue/dist/vue.js'
• 配置webpack.config.js

import Vue from 'vue' 在main.js中这里不变

resolve: {
  alias:{ //修改vue导入时候，包的路径
    // "vue$": "vue/dist/vue.js"
  }
}
复制代码

整个项目列表

例2：在webpck渲染组件

• 在webpack使用vue，在runtime-only 方式的状况下，页面中渲染一个组件（.vue），vue的实例的render函数能够实现
• 在index.html文件中

<div id="app"></div>
复制代码

• 在main.js文件中

import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  methods: {},
  // components: {
  //   login
  // }
  // render: function (createElements){ 
  //  return createElements(login)
  // }
  render: c => c(login)
})
复制代码

• 在src目录下建立一个login.vue文件

<template>
  <div>
    <h1>这是登陆组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    // 注意：组件中的 data 必须是 function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>

</style>
复制代码

• webpack没法打包.vue文件，需安装相关的loader，并在webpack.config.js中进行相关配置

cnpm i vue-loader vue-template-compiler -D
复制代码

var VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [  //配置插件
        new VueLoaderPlugin()
    ],
    module: {  //配置loader
        rules: [
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
}
复制代码

• 结果以下

例3 在webpack使用vue-router(在例2基础上)

• 安装vue-router cnpm i vue-router -D
• main.js

import Vue from 'vue'
import app from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import account from './Account.vue'
import goodslist from './GoodsList.vue'
var router = new VueRouter({
  routes: [ //路由规则
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

var vm = new Vue({
  el: '#app',
  render: c => c(app),
  router //挂载路由
})
复制代码

• Account.vue

<template>
  <div>
    <h1>这是一个account组件</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
//普通style标签只支持css样式，要启动scss或less，要设置style元素的lang属性
 body{
   html{
     font-style: italic
   }
 }
</style>
复制代码

• GoodsList

<template>
  <div>
    <h1>这是一个goodslist组件</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
  div{
    color: red;
  }
</style>
复制代码

• 结果

例4：在webpack vue 实现路由嵌套（在例3基础上）