webpack-vue

最新推荐文章于 2022-03-31 21:50:33 发布

luan_225

最新推荐文章于 2022-03-31 21:50:33 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/luan_225/article/details/104079734

版权

webpack的基本使用

使用npm包管理工具

npm init # 一路回车

创建目录

mkdir src

在src下创建index.html和main.js

touch src/index.html src/main.js

在main.js中输入一些代码

console.log("ok");

在根目录创建配置文件 webpack.config.js

touch webpack.config.js

在 webpack.config.js中输入如下内容

const path = require('path')
module.exports={
	entry: path.join(__dirname, './src/main.js'),
	output:{
		path: path.join(__dirname, './dist'),
		filename: 'bundle.js',
	}
}

编译

webpack

自动编译打包配置

安装 webpack-dev-server

cnpm i webpack-dev-server -D
cnpm i webpack -D  # 提示缺少这个库,需要本地安半

在package.json中的 scripts 属性中添加如下内容

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

执行命令

npm run dev # 报错提示缺少 webpack-cli
cnpm i webpack-cli -D
# 再次运行
npm run dev

浏览器中查看源码,发并没有引用 bundle.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

在内存中生成页面

安装插件 html-webpack-plugin

cnpm i html-webpack-plugin -D

在webpack.config.js中

// 引入插件
const htmlWebpackPlugin=require('html-webpack-plugin')

// 加入与entry平级的属性
plugins:[
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'),
			filename: "index.html"
		}), // 在内存中生成网页
	],

完整内容如下

const path = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
	entry: path.join(__dirname, './src/main.js'),
	output:{
		path: path.join(__dirname, './dist'),
		filename: 'bundle.js',
	},
	plugins:[
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'),
			filename: "index.html"
		}),
	],
}

重新编译

npm run dev

网页中已使用了bundle.js文件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<script type="text/javascript" src="bundle.js"></script></body>
</html>

安装jquery

cnpm i jquery -D

在main.js中引入jquery

import $ from 'jquery'

在incex.html中加入一些元素,做测试

		<ul>
			<li>这是第1个li</li>
			<li>这是第2个li</li>
			<li>这是第3个li</li>
			<li>这是第4个li</li>
			<li>这是第5个li</li>
			<li>这是第6个li</li>
			<li>这是第7个li</li>
			<li>这是第8个li</li>
			<li>这是第9个li</li>
			<li>这是第10个li</li>
		</ul>

在main.js中加入如下代码

 $(function(){
	$("li:odd").css("backgroundColor","yellow");
	$("li:even").css("backgroundColor","red");
 })

网面中的样式也发生了改变

使用样式(.css)文件

安装加载器

cnpm i css-loader  style-loader -D

编写.css文件匹配规则(webpack.config.js)

module:{
		rules:[ // 所有第三方加载器,匹配规则
			{test: /\.css$/, use:['style-loader', 'css-loader'] },
		]
}

新建文件 src/css/index.html 并输入如下内容

li{
	list-style: none;
}

在main.js中引入 index.js

import './css/index.css'

编译运行,查看结果

npm run dev

使用sass文件

安装加载器

cnpm i sass-loader -D 
# 提示缺少 node-sass sass fibers
cnpm i node-sass sass fibers -D # 安装

使用配置加载器

{test:/\.scss$/, use:['style-loader', 'css-loader' ,'sass-loader']},

测试

添加index.scss文件

* {
	font-size: 24px;
}

main.js中引入

import './css/index.scss'

使用 less文件

安装加载器

cnpm i less-loader -D

使用配置加载器

{test:/\.scss$/, use:['style-loader', 'css-loader' ,'sass-loader']},

url-loader

CSS使用图片

.box{
	width: 500px;
	height: 300px;
	background: url(../images/1.jpg);
}

报错

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/css/index.css (./node_modules/_css-loader@3.4.2@css-loader/dist/cjs.js!./src/css/index.css) 4:36-62
 @ ./src/css/index.css
 @ ./src/main.js

使用url-loader

file-loadercnpm url-loader  -D

配置

{test:/\.(jpg|gif|png|jpeg|bmp)$/, use: 'url-loader' },

图片使用 base64编码

传参配置

{test:/\.(jpg|gif|png|jpeg|bmp)$/, use: 'url-loader?limit=7168&name=[hash:8]-[name].[ext]' }, 
// limit 给定的值是图片的大小单位是byte, 如果引用的图片大小等于limit就不会被转成base64编码
// name=[name].[ext]' 保留原图名字
// [hash:8] 哈希值前8位

使用字体

安装bootstrap@3.3.7

cnpm i bootstrap@3.3.7 -D

引入bootstrap.css

import 'bootstrap/dist/css/bootstrap.css'

配置

{test:/\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件

测试

<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

全部安装

cnpm i

支持ES6代码

class Persion {
	 static info={name: 'zs', age:20} // 报错
 }

第三方loader

第一套

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

第二套

cnpm i babel-preset-env babel-preset-stage-0 -D

添加配置

{test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // ES6支持

项目根目录添加 .babelrc文件 json格式

{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}

安装vue

cnpm i vue -S

vue-loader

cnpm i vue-loader vue-template-compiler -D


//插件导入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
new VueLoaderPlugin(),
...
 
{test:/\.vue$/, use: 'vue-loader' }, // .vue

安装vue-router

cnpm i vue-router -S

导入

import VueRouter from 'vue-router'
Vue.use(VueRouter) // 安装

模板

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
	</body>
</html>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import acc from "./Account.vue"
import gsl from "./goodslist.vue"
Vue.use(VueRouter)
var router = new VueRouter({
	routes:[
		// account goodslist
		{path:'/', redirect:"/account"},
		{path:'/account', component:acc},
		{path:'/goodslist', component:gsl},
	]
})
import app from "./app.vue"
 var vm = new Vue({
	el:'#app',
	data:{
		msg: '123'
	},
	
	render:c=>c(app),
	router: router,
})

组件

<template>
	<div>
		<div>
			<router-link to="/account">Account</router-link>
			<router-link to="/goodslist">goodslist</router-link>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	export default{
		data()
		{
			return {};
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

使用 Mint UI

安装

cnpm i mint-ui -S

全部导入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

按需导入

cnpm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

完整代码如下:

{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

按需导入

import { Button } from 'mint-ui'
Vue.component(Button.name, Button)

MUI(代码片段)

需要手动下载

import './lib/mui/dist/css/mui.min.css'

[
[“es2015”, { “modules”: false }]
],
“plugins”: [[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]]
}


完整代码如下:

```json
{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

按需导入

import { Button } from 'mint-ui'
Vue.component(Button.name, Button)

MUI(代码片段)

需要手动下载

import './lib/mui/dist/css/mui.min.css'

模板下载

luan_225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫