搭建最简单的vue脚手架

本文介绍了如何搭建Vue开发环境,通过安装webpack、webpack-dev-server等工具,以及vue-loader和vue-template-compiler来解析.vue文件。创建index.html、main.js和App.vue文件,设置webpack.dev.js配置文件,最后运行项目,实现Vue应用的基本运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值