搭建最简单的vue脚手架

2023-07-15 本文已影响0人姜治宇

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