注意点:vue在发布构建的时候有两类版本
1/runtime-only =>代码中不可以有任何的template
2/runtime-compiler => 代码中,可以有template,因为有compiler可以用于template的编译
一.如何配置
(1)添加以上文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">{{message}}</div>
</body>
</html>
main.js
import Vue from "vue";
const app = new Vue({
el: "#app",
data: {
message: "hello app",
},
});
package.json
{
"name": "day07",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"@babel/core": "^7.12.17",
"@babel/preset-env": "^7.12.17",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.2.0",
"less": "^4.1.1",
"less-loader": "^8.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": " webpack serve --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.config.js
let 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",
},
//环境
mode: "development",
//插件
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
}),
],
devServer: {
port: 3000, // 端口号
open: true, // 自动打开浏览器
},
module: {
rules: [
{
// 正则表达式，用于匹配所有的css文件
test: /.css$/,
// 先用 css-loader 让webpack能够识别 css 文件的内容
// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
use: ["style-loader", "css-loader"],
},
{
test: /.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 900000,
},
},
],
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
resolve: { //这就就是的配置就是给定某种版本进行编译,如果没有这个,那么在运行时,index.html中的{{message}}是无法被编译的
alias: {
//别名
vue$: "vue/dist/vue.esm.js",
},
},
};
(2)依次执行一下命令
npm i vue //安装vue包 npm install发 //将pageage.json中的包都安装一下 npm run dev //因为是开发中,所以才用这个
二.以组件化去思考:终极配置方案
这个命令特别重要:因为vue-loader可以去打包.vue文件的内容, copmiler是可以将.vue的内容转为render函数,提升性能
执行命令:npm vue-loader vue-template-compiler --save-dev
分析:有一个SPA(single page application)的一个概念,单页面应用,就是只有index.html页面,而且这个页面时不做任何修改的.
(1)index.html文件内容(不在变动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
(2)通过组件化来实现 main.js
import Vue from "vue"; import App from "./vue/app"; //默认导出所以才不需要大括号 // let App = { //其实是把这里的代码拿到了app.js文件中 // template: ` // <div> // <h2>{{message}}</h2> // </div> // `, // data() { // return { // message: "hello world", // }; // }, // }; new Vue({ el: "#app", template: "<App/>", components: { App, }, });
(3)创建app.js
export default {
template: `
<div>
<h2>{{message}}</h2>
</div>
`,
data() {
return {
message: "hello world ,welcome to china",
};
},
};
分析:但是这样写了以后,会发现template 和 数据没有进行分离,所以还需要创建App.vue
三.通过vue文件加载数据
(1)创建App.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "hello world ,welcome to china",
};
},
};
</script>
<style scoped></style>
(2)修改main.js文件
import Vue from "vue";
// import App from "./vue/app"; //因为不需要了
import App from "./vue/App.vue"; //通过vue来实现
// let App = {
// template: `
// <div>
// <h2>{{message}}</h2>
// </div>
// `,
// data() {
// return {
// message: "hello world",
// };
// },
// };
new Vue({
el: "#app",
template: "<App/>",
components: {
App,
},
});
(3)配置webpack.config.js
let path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin"); //编译vue,这里的配置非常重要
module.exports = {
//入口
entry: path.join(__dirname, "./src/main.js"),
//出口
output: {
path: path.join(__dirname, "./dist"),
filename: "bundle.js",
},
//环境
mode: "development",
//插件
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),
}),
new VueLoaderPlugin(),
],
devServer: {
port: 3000, // 端口号
open: true, // 自动打开浏览器
},
module: {
rules: [
{
// 正则表达式，用于匹配所有的css文件
test: /.css$/,
// 先用 css-loader 让webpack能够识别 css 文件的内容
// 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
use: ["style-loader", "css-loader"],
},
{
test: /.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 900000,
},
},
],
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /.vue$/, //通过vue实现,这里也需要
use: ["vue-loader"],
},
],
},
resolve: {
alias: {
extensions:['.js','.css','.vue']
//别名
vue$: "vue/dist/vue.esm.js",
},
},
};
(4)运行命令
yarn dev