vue3学习之使用webpack搭建vue3环境

创建项目

新建一个名为vue3-demo的文件夹
在该文件夹下运行cmd命令行窗口，执行npm init -y 快速生成一个package.json文件
安装依赖webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin vue-loader
命令如下
npm i -D webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin  vue-loader
@H_502_14@

在根目录下创建webpack.base.config.js文件，内容为

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/[name].[hash].js',
        path: path.join(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin()
    ]
}
@H_502_14@

在根目录下创建webpack.dev.config.js,内容为

const path = require('path')
const WebpackMerge = require('webpack-merge')
const base = require('./webpack.base')
module.exports = WebpackMerge.merge(base, {
    mode: 'development',
    devServer: {
        publicPath: '/',
        port: '9000'
    }
})
@H_502_14@

在package.json中创建一个命令

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config webpack.dev.config.js",
    },
@H_502_14@

运行npm run dev

在运行npm run dev 时，报错


根据报错安装 vue-template-compiler
npm i -D  vue-template-compiler
@H_502_14@
执行npm run dev 报错


解决办法

package.json的内容如下
{
    "name": "vue3",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config webpack.dev.config.js",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "html-webpack-plugin": "^5.3.1",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.31.2",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^5.7.3"
    },
    "dependencies": {
        "vue": "^3.0.11"
    }
}

@H_502_14@
在项目中我们用到的vue-template-compiler是同vue2和vue-loader一起使用的，当我们使用vue最新版本时，在不使用vite和vue-cli时，需要和webpack正常使用，需要这么做

首先初始化package.json

{
    "name": "vue3",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "main": "index.js",
}
@H_502_14@

package.json中设置private为true，那么npm将会拒绝发布它，这是防止意外发布私有存储库的方法。参考npm package.json


安装最新版本的vue

依次执行命令

npm i -S vue@next
npm i -D vue-loader@next webpack webpak-dev-server webpack-cli webpack-merge
@H_502_14@

除此之外还需要在开发环境中安装能够代替vue-template-complier的包——@vue/compiler-sfc

执行命令

npm i -D @vue/compiler-sfc
@H_502_14@
@vue/compiler-sfc(!https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme)
安装好了以后执行
npm run dev
@H_502_14@
这个时候不会报错，打开 http://localhost:9000/，得到一个空白页面
给App.vue填上内容
<template>
    <div>hello world</div>
</template>
@H_502_14@
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>
    <link rel="stylesheet" href="/dist/main.css" />
</head>

<body>
    <div id="app"></div>
    <script src="/dist/main.js"></script>
</body>

</html>
@H_502_14@
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
@H_502_14@
在次执行命令
npm run dev
@H_502_14@
结果如下


当前我们只搭建了开发环境，下一节我们搭建生产环境

                
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
vue3学习之使用webpack搭建vue3环境

创建项目

@vue/compiler-sfc(!https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme)

相关推荐
