webpage结合Vue Loader打包单文件组件

npm insatll vue-loader vue-template-compiler

webpage.config.js

//引用node.js中的path模块，用来处理文件路径
const path = require("path");
//引入插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
//1.添加vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//（1）导入webpack，模块热替换需要
const webpack = require('webpack');
// 导出一个webpack具有特殊属性配置的对象
// 安装下Node Snippets插件，输入module会有智能提示
module.exports = {mode: 'none',//指定打包为生产环境、开发环境或者设置none//入口entry: './src/main.js',// 入口模块文件路径//出口对象output: {// path 必须是一个绝对路径 , __dirname 是当前配置文件webpack.config.js的绝对路径。然后与输出目录dist拼接成一个决定路劲path: path.join(__dirname, './dist'),filename: 'bundle.js'},// 配置插件plugins: [new HtmlWebpackPlugin({//指定要打包的模板页面index.html,采用的是相对路径，与当前配置文件在同级目录，所以为./。就会找到把index.html文件并把它打包到与输出文件bundle.js的同级目录下template: './index.html'}),// 3.请确保引入这个插件！new VueLoaderPlugin(),//(3)实例化模块热替换插件new webpack.HotModuleReplacementPlugin()],//实时重新加载devServer: {//在当前目的dist目录下查找文件contentBase: './dist',hot: true //（2）开启模块热替换},module: {rules: [ //配置css转js的规则{test: /\.css$/,//正则表达式，匹配以css结尾文件use: [ //下面2个加载器的顺序不能反'style-loader',//让javascript识别转换后的js（css）'css-loader' //css转为js]},{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},{//解决兼容性问题test: /\.m?js$/,exclude: /(node_modules)/,//排除node_modules【是各种插件安装目录】下的代码不用babel_loader去转换use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']//babel中内置的转换规则工具，刚才配套一起安装的就还有这个}}},{ //2.指定扩展名为.vue的文件用vue-loader加载test: /\.vue$/,loader: 'vue-loader'}]},
/*     // 去引用完整版 vue.js resolve:{alias:{ 'vue$': 'vue/dist/vue.js' }} */
}

main.js

// import Hello from './Hello.vue'
// Vue是自己取的名称，一般V大写，后面的vue是安装的vue组件名称，不能更改
//这种方法导入的vue不是完整版本，不具有编译功能.因为这vue是指安装的node_modules\vue\ package.json 中的 main属性执行的vue版本dist/vue.runtime.common.js。而这个版本是运行时版本，不具有编译功能，所以会有警告错误
import Vue from 'vue'
//解决方法1：手动引入完整版本
//import Vue from 'vue/dist/vue.js'
//在main.js中要把App.vue作为其子组件使用，就要把它导入，并取名为App
import App from './App.vue'
//导入Vue之后就可以使用Vue了
new Vue({el:"#app",/*  //注册子组件components:{ //上面导入了App.vue，这里就把它作为components的一个选项设置即可// App:App 简写为AppApp}, *///为Vue组件(根组件)设置模板//template没有编译和渲染功能，编译功能可以使用vue-loader进行编译//而渲染功能可以通过render函数进行，所以在此处只需要指定render函数渲染组件即可//template:'<App />', //<app></app> a大写也可以的/* render:function(h){ //h是一个函数，这个函数用于接收要渲染的组件return h(App) //函数返回值就是渲染的结果} *//*   render:h=>{return h(App)} */render:h=>h(App)
})

最后执行build

webpage结合Vue Loader打包单文件组件相关推荐

Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
Vue系列之单文件组件
文章目录前言一.什么是单文件组件? 二.单文件组件的结构三.如何引入并使用单文件组件 1. B组件中需导出(export) 2. A组件中需导入并局部注册B(import) 前言 Vue应用的一 ...
Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...

webpage结合Vue Loader打包单文件组件

webpage结合Vue Loader打包单文件组件相关推荐

最新文章

热门文章