webpack中导入vue和普通网页使用script导入vue的区别

最新推荐文章于 2023-05-17 15:28:15 发布

RongU

最新推荐文章于 2023-05-17 15:28:15 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_39658215/article/details/96436616

vue 同时被 3 个专栏收录

16 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

前端开发

15 篇文章

订阅专栏

本文介绍如何在Webpack项目中使用Vue.js开发组件，包括安装Vue和相关loader、配置Webpack、定义及使用Vue组件等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装vue的包

npm install vue -S

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

npm install vue-loader vue-template-complier -D

3.在webpack.config.js文件中，新增loader配置项

{ test: /\.vue$/, use: ['vue-loader'] },//处理.vue文件的loader

4.在main.js中，导入vue模块

import Vue from 'vue'

5.定义一个.vue结尾的组件，其中，组件由三个部分组成：template script style，如下Login.vue文件所示

6.在main.js中，导入这个组件

import login from './Login.vue'

7.创建vm的实例，详见main.js文件

var vm = new Vue({
    el: "#app",
    data: {
        msg: '123'
    },
    render: c => c(login)
})

8.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域，如下index.html文件所示

----区别主要在以下四个文件中，两种方式都写在注释里面了----

main.js文件：

//如何在webpack构建的项目中，使用vue进行开发

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

//在webpack中尝试使用Vue:
//在webpack中，使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供像网页中那样的使用方式

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

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


//第一种方式如下，第二种方式是写在Login.vue里面
//var login = {
//    template: '<h1>这是login组件，是使用网页形式创建出来的组件</h1>'
//}

//1.导入login组件
import login from './Login.vue'
//默认webpack无法打包.vue文件，需要安装相关的loader
//npm install vue-loader vue-template-complier -D
//在配置文件中，新增loader配置项{ test: /\.vue$/, use: 'vue-loader' }

var vm = new Vue({
    el: "#app",
    data: {
        msg: '123'
    },
    //components: {//两种写法，一种components，一种render如下方
    //    login
    //},
    //在webpack中，如果想要通过vue把一个组件放到页面去展示，vm实例中的render函数可以实现
    //components方式不会替换html容器中的其他元素，比如p标签里面的内容，render方式会替换整个容器
    render: function(createElements){//createElements是一个方法，调用它，能够把指定的组件模板，渲染为html结构
        return createElements(login);//这里return的结果，会替换页面中el指定的那个容器
    }
    //简写
    //render: c => c(login)
})

webpack.config.js文件：

//webpack.config.js

//由于webpack是基于node构建的，所以，在webpack的配置文件中，任何合法的node代码都是支持的
var path= require('path');

//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin = require('html-webpack-plugin');

//当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.export = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {//指定输出选项
        path: path.join(__dirname, './dist'),//输出路径
        filename: 'bundle.js' //指定输出文件的名称
    },
    plugins: [//所有webpack插件的配置节点
        new htmlWebpackPlugins({
            template: path.join(__dirname, './src/index.html'),//指定模板文件路径
            filename: 'index.html'//设置生成的内存页面的名称
        })
    ],
    module: {//配置所有第三方loader模块
        rules:: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的loader (npm install style-loader css-loader -D)
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理less文件的loader (npm install less-loader less -D)
            { test: /\.scss$/, use: ['style-loader', 'css-loader'], 'sass-loader' },//处理scss文件的loader (npm install sass-loader node-sass -D)
            { test: /\.(jpg|png|gif|bmp|jpeg})$/, use: ['url-loader?limit=7631&name=[hash:8]-[name].[ext]'] },//处理图片路径的loader (npm install url-loader file-loader -D)
            //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },//处理字体文件的loader
            { test: /\.js$/, use: ['babel-loader', exclude: /node_modules/] },//配置babel来转换高级的es6语法
            { test: /\.vue$/, use: ['vue-loader'] },//处理.vue文件的loader
        ]
    },
    resolve: {//两种方法，一种resolve alias;一种在main.js文件直接import Vue from '../node_modules/vue/vue.js'
        alias: {//修改Vue被导入时候的包的路径
            //"vue$": "vue/dist/vue.js"
            //此例采用第二种方法main.js直接引入，先注释这行
        }
    }
}

index.html文件：

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

<template>
    <div>
        <h1>这是登录组件，使用.vue文件定义出来的</h1>
    </div>
</template>

<script>

</script>

<style>

</style>

********可与我的另一篇文章《webpack中如何使用vue》关联查看****