vue——43-webpack打包vue

版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83273505

首先，普通网页中使用vue：

1. 使用 script 标签，引入 vue 的包
2. 在 index 页面中，创建一个 id 为 app div 容器
3. 通过 new Vue 得到一个 vm 的实例

1.先将该配置的属性都配置好

webpack如何使用以及配置

2.局部引入 vue 的项目文件包

命令：cnpm i vue -s

3.在入口文件（main.js）中引入 vue

注意：

• 在 webpack 中，使用 import Vue from 'vue' 导入的 Vue 构造函数功能不全，只提供了 runtime-only 的方式（阉割版），没有提供网页那种使用方式（完整版）；
• 完整版——就是我们平时 vue 编写的那种形式
• 官方推荐：使用阉割版——参见：webpack 打包 vue（阉割版）

包的查找规则：

1. 找项目根目录有没有 node_modules 的文件夹
2. 找 node_modules 中根据包名，找到对应的 vue 文件夹
3. 在 vue 文件夹中，找一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找一个 main 属性（main 属性指定了这个包在被加载的时候，的入口文件）

引用完整版 vue 包的两种方式：

1.在 webpack.config.js 中修改 vue 被导入时候包的路径，再引用下面文件

import Vue from 'vue';

webpack.config.js 中修改 vue 被导入时候包的路径:
在 module.exports 中添加下面文件

    resolve: {
        alias: {
            // 设置 vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }

2.使用下面的方式导入包：

import Vue from '../node_modules/vue/dist/vue';

4.项目开始

命令：npm run dev

index.html

<div id="app">
    <h1>{{msg}}</h1>
    <login></login>
</div>

main.js

let login = {
    template: '<h1>这是login组件，是使用网页中的形式创建出来的组件</h1>'
};

var vm=new Vue({
    el:'#app',
    data:{
        msg:'我是 vue ！'
    }
});