基本概念

现在的前端和后端都是通过api获取数据的。

这里主要有这几条命令：

npm i webpack vue vue-loader
npm i css-loader vue-template-compiler

这里，就是使用了webpack和vue以及vue-loader

下面那一行是他的依赖。

这里看以下vue的文件：

在app.vue中

<template></template>主要是放html源码

如下的文件：

webpack.config.js用与打包前端资源。

index.js为入口文件，

这里vue不能直接挂载到html里面，要使用vue对象进行挂载，挂载源码如下：

其中这个h就为createApp，就可以把vue挂载到html里面，创建一个div，放到body下面，然后使用$mount进行挂载。

这里来看下webpack.config.js

这里的const path = require('path')为引用path包。

__dirname：为此文件的地址。

path.join：为字符串的拼接，也就是可以得到绝对路径。

output：为文件输出，就是把vue中和其他所用的东西放到dist下的bundle.js中。

module中的rules为解析vue文件的规则。

还有一点就是package.json

最后生成的文件：

这个bundle.js就是output里面的文件名！内容里面webpack为固有的模块依赖，后面就是vue的源码webpack的作用就是把写的静态资源的类型，打包为js。

代码与实例

程序结构如下：

app.vue

<template><div id="test">{{text}}</div>
</template><script>
export default {data(){return {text: "abc"}}
}
</script><style>
#test{color: red;
}
</style>

index.js

import Vue from 'vue'
import App from './app.vue'const root = document.createElement('div')
document.body.appendChild(root)new Vue({render: (h) => h(App)
}).$mount(root)

package.json

{"name": "vuetestdemo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js"},"author": "","license": "ISC","dependencies": {"css-loader": "^3.1.0","vue": "^2.6.10","vue-loader": "^15.7.1","vue-template-compiler": "^2.6.10","webpack": "^4.39.1","webpack-cli": "^3.3.6"}
}

webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {entry: path.join(__dirname, 'src/index.js'),output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module:{rules:[{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/,use: ["vue-style-loader", "css-loader"] }]},plugins: [new VueLoaderPlugin()]
}

个人理解

这里感觉webpack和C++ qt中的pro文件一样，主要用于文件管理，的确是6。

前端笔记-对webpack和vue的基本认识相关推荐

Vue笔记：webpack项目vue启动流程
VUE启动流程 1. package.json 在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称 ...
Web前端笔记-使用Webpack调用echarts画图
有如下几个步骤,在此记录下! 1. 安装npm: 2. 安装cnpm: 3. 初始化webpack项目: npm init -y 3. 下载依赖: cnpm i -D webpack webpack- ...
前端进阶（三） webpack处理vue以及vue-cli脚手架环境
webpack处理vue 安装 vue yarn add vue vue单文件组件 single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件 ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
09_前端笔记-Vue
文章目录基础项目工程管理编写路由整合插件整合模板个人博客 https://blog.csdn.net/cPen_web Vue.js 官网 https://cn.vuejs.org/ 基础 ...
webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...
接上篇本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! element-ui 介绍饿了么前端开发组件框架 ...
读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言第九章 Spring Boot缓存第十章 Spring Boot安全管理第十一章 S ...
利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...

前端笔记-对webpack和vue的基本认识

基本概念

代码与实例

个人理解

前端笔记-对webpack和vue的基本认识相关推荐

最新文章

热门文章