webpack与vue结合使用

系统管理员 2022-01-18 23:27 374阅读 0赞

## 例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基础上） ##

转载于:https://juejin.im/post/5ccad2046fb9a031fb2ce117