vue.js学习笔记二十八——初识Vue开发_vue import是创建实例吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_43318134/article/details/99119622

1. 在普通网页中使用Vue的步骤

1.1 使用script标签，引入Vue的包

1.2 在index页面中，创建一个id为app的div容器

1.3 通过new Vue 得到一个vm实例

2. 初步使用Vue构建项目

2.1 安装Vue

把Vue这依赖安装为我们的项目依赖：npm i vue -S

2.2 在webpack中使用Vue

2.2.1 在main.js中导入Vue并创建Vue对象

// 1. 导入Vue
import Vue from 'vue';

// 2. 创建Vue实例
var vm = new Vue({
    el:'#app',
    data:{
        msg:123
    }
});

2.2.2 在index.html中输出msg

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

2.2.3 打包运行

npm run dev 页面没有输出123，而是输出{{msg}}

2.3 分析差值表达式失效的原因

首先，我们分析导入Vue语句 import Vue from 'vue';

import Vue from 'vue';与 var Vue = require('vue');包的查找过程是一样的：

1. 在项目的根目录中寻找node_moudles文件夹是否存在

2. 在node_moudles中根据包名，找对应的Vue文件

3. 在Vue文件夹中，找到一个叫做package.json的配置文件

4. 在package.json配置文件中，查找一个main属性，其属性值指定了这个包在被加载的时候的入口

我们根据这个查找规则，发现main的属性值为："dist/vue.runtime.common.js"，也就是说，我们实际引入的vue是vue.runtime.common.js，我们在回到vue/dist目录下，发现旗下有很多vue的js文件，其中有一个vue.js文件，该文件就是我们通过script标签引入的那个完整的vue文件，对比vue.runtime.common.js，发现vue.js文件的字节数大于vue.runtime.common.js文件的字节数，也就是说vue.runtime.common.js功能不全，不支持页面差值表达式。

分析出了原因，可以有两种方式让我们引入的vue为完整的vue文件

方法一：将main的属性值vue.runtime.common.js替换为vue.js

方案二：在引入vue的时候，指定正确的路径。

例如：

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

方案三：在webpack.config.js文件中加入resolve配置对象

在main.js中导入vue

import Vue from 'vue';

在webpack.config.js中配置resolve对象

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

注意：方案三的方式，文件的改动需要重启，所以在开发模式中，一般不用

2.4 用runtime-only模式的vue引入自定义组件

main.js

// 入口文件

// 1. 导入Vue
import Vue from 'vue';

// 定义组件
var login = {
    template:'<h1>登录组件</h1>'
};

// 2. 创建Vue实例
var vm = new Vue({
    el:'#app',
    data:{
        msg:123
    },
    components:{
        login
    }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
	<body>
        <div id="app">
            {{msg}}
            <login></login>
        </div>
	</body>
</html>

打包运行，发现浏览器报错了，错误信息为，You are using the runtime-only build of Vue where the template compiler is not available.

也就是说在runtime-only模式下，是不能引入我们自定义的组件的，那么，如果我们非要在该模式下引入，怎么办了？

方法一：引入全量vue，例如：import Vue from '../node_modules/vue/dist/vue.js';

方案三：使用单独新建一个.vue的组件文件

3 使用.vue文件定义自定义组件

3.1 文件结构

.vue文件可以分为三部分：

1. <template></template>标签包裹的HTMLdaima

2. <script></script>标签包裹的业务逻辑代码

3. <style></style>标签包裹的样式代码

例如：定义login.vue

<!-- 组件HTML代码 -->
<template>
    <div>
        <h1>vue文件定义的login组件----{{msg}}</h1>
    </div>
</template>

<!-- 组件业务逻辑代码 -->
<script>
    export default {
        data(){
            return {
                msg:'123'
            }
        },
        methods:{
            show(){
                console.log("组件内部");
            }
        }
    }
</script>

<!-- 组件样式代码 -->
<style>

</style>

注意：

1. 在 .vue 文件中，如果想要定义data数据与method方法，通过export default定义一个对象

2. data为一个函数

3.2 使用login.vue组件

默认情况下，webpack无法打包.vue文件，需要安装相关loader

3.2.1 安装加载器

npm i vue-loader vue-template-compiler -D

在webpack.config.js这个文件中的module节点下的rules数组中配置

 {test:/\.vue$/,use:'vue-loader'}

注意：这里为什么只引入了 vue-loader 加载器，没有引入 vue-template-compiler 加载器了？因为 vue-template-compiler是vue-loader的内部依赖。

3.2.2 在main.js文件中导入login.vue组件

// 导入login组件
import login from "./login.vue";

3.2.3 渲染login组件到页面

既然我们已经导入了login组件，那么我们是否可以直接在components中注册一下login组件了？

1. 使用components引入login

components:{
        login
    }

页面运行，发现报错，因为是runtime-only构建出来的vue，不支持这种用法。

既然components不能注册login，那么我们该怎么办了？我们可以使用render渲染login组件到页面

2. 使用render函数渲染组件

render:function(createElements){
        return createElements(login);
}

// 函数可以简写为
render:(createElements) => {
        return createElements(login);
}

// 如果只有一个参数，小括号也可以省略
render:createElements => {
        return createElements(login);
}

// 我们发现createElements 形参名称太长了，可以简写
render:c => {
        return c(login);
}

// 又发现，{}内只有一行语句，可以省略{}，又因为默认就是return的，所以return不需要，最终改成如下形式
render:c => c(login)

运行，发现也会报错，错误信息是：vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 为什么还会报这个错误了，查看官方文档https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required 得知，在Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin。

解决办法：

方案一：将vue-loader版本回归成14.*，最后一个14的版本是14.2.2， npm install vue-loader@14.2.2

方案二：在webpack.config.js配置文件中创建VueLoaderPlugin 实例对象

步骤：

1. 引入VueLoaderPlugin ： const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入这行

2. 在plugins节点下，创建VueLoaderPlugin实例对象：new VueLoaderPlugin() //new一个实例

然后，再次运行，即可。

总结：

1. 在webpack中，如果想要通过vue，把一个组件放到页面中，VM实例的render函数可以实现。

2. webpack中如何使用vue

2.1 安装vue的包：npm i vue -S

2.2 在webpack中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析该文件的loader。