vue脚手架其实主要是玩webpack。
###基本工具
npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D
###解析.vue文件
我们知道,底层运行的其实都是html、css和js文件,浏览器是不识别.vue文件的。
要解析.vue文件,必须通过插件,将其打包为浏览器可识别的js文件。
npm i vue vue-loader vue-template-compiler -D
先不考虑es6和css问题,我们试一下目前这些工具,是否可以解析vue。
先创建三个文件:index.html、main.js和App.vue。
#####index.html
index.html是模板,需要指定vue的容器。
<!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>
#####App.vue
App.vue就是个首页,随便写点东西,看看是否能解析出来。
<template>
<div>
<p>Message: {{ msg }}</p>
<button @click="foo()">click</button>
</div>
</template>
<script setup>
import { ref } from "vue"
const msg = ref('hello');
const foo = () => {
msg.value = '你好';
}
</script>
#####main.js
main.js是入口文件,这里需要做初始化vue的操作。
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
创建完毕后,创建webpack的配置文件。
#####webpack.dev.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode:'development',
entry:'./main.js',//指定入口文件
output:{
filename:'[name].js',
path:path.resolve(__dirname,'dist'),
publicPath:'/'//内存存放目录
},
module:{
rules:[{
test:/\.vue$/,
use:{
loader:'vue-loader'//识别.vue文件
}
}]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html'),//指定模板
filename: 'index.html'//打包后生成的文件名
})
],
devServer:{
port:8000,
host:'localhost',
}
};
运行
webpack serve --config ./webpack.dev.js