学习记录——vue结合webpack搭建脚手架

最新推荐文章于 2024-06-10 15:05:54 发布

　　　SakuraZr

最新推荐文章于 2024-06-10 15:05:54 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/sakura_zr/article/details/111937566

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细指导如何使用Vue进行组件化开发，包括HTML、CSS、JS逻辑分离，webpack配置，Vue-loader的运用，以及如何配置热更新功能，以实现项目的高效管理和维护。

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

现在所有的逻辑需要在一个html里面写
希望完整的目录结构将vue工程化也就是将目录区分开
asset静态资源
conponents公共组件
utils工具方法
router路由
views页面等等
问题2：vue的逻辑都是在一个newVue里面写的
解决：逻辑可以分开写
xxx.vue单独抽离这个逻辑，div、style、script都能存在

webpack结合vue搭建完整的脚手架
结构更完整，逻辑更清晰，打包上线，工程化
vue-loader实现加载 xxx.vue文件

相关插件

webpack webpack-cli -D
babel 处理js
babel-loader
@babel/core
@babel/preset-env
处理css
css-loader
style-loader
处理文件
file-loader
处理html
html-webpack-plugin
处理vue
vue-loader
编译模板(.vue文件中有一个template) vue-template-compile
vue vsCode的插件Vetur 代码高亮提示
新建一个文件webpack.config.js
启动服务器热更新

搭建基本目录结构

在这里插入图片描述
在src根目录下新建index.html 或者将html文件放到views里根据需求放到哪个文件夹

下载相关插件

先去命令行工具执行 npm init -y 生成package.json文件然后下载插件

npm i webpack webpack-cli babel-loader css-loader style-loader @babel/preset-env @babel/core html-webpack-plugin file-loader vue-loader vue-template-compiler -D

然后下载vue:

npm i vue -S

配置文件

在最外层根目录下新建webpack-config.js
在这里插入图片描述

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//不用下载直接引入，因为包含在vue-loader里
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    //入口文件
    entry: './src/index.js',
    //出口文件
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'index.js'
    },

    mode: 'development', //开发环境 打包之后文件不被压缩

    //配置文件加载规则
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                options: { presets: ['@babel/preset-env'] }
            },

            //loader加载规则 从后到前 从下到上 
            //css-loader将css打包进js文件中,style-loader将js中的css提取出来插入到head里
            //顺序不能错，先css-loader再style-loader 利用use的loader加载机制
            { //处理css
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },

            { //处理图片
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
            //打包的时候会以单独文件的形式打包，引入的时候就可以引'../a.png'
                    esModules: false
                }
            },

            { //处理vue
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    compiler: require('vue-template-compiler'),
                    transformToRequires: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: ['xlink:href', 'href'],
                        use: ['xlink:href', 'href']
                    }
                }
            },

        ],

    },

    plugins: [
        new HtmlWebpackPlugin({
             template: path.join(__dirname, './src/index.html')
        }),

        new VueLoaderPlugin()
    ],

    resolve: {
        alias: {
            //加载固定的版本
//处理vue打包的时候的文件的版本 2.6
            'vue$': 'vue/dist/vue.esm.js' 
        }
    }

}

可能出现的报错

如果出现这个报错，是因为没有下载vue-loader 需要去命令行工具下载，然后配置相关属性
ERROR in ./src/app.vue 1:0
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack,js.org/concepts#loaders
< template >
< div >
{{name}}
@ ./src/index.js 5:0-28 13:9-12
在这里插入图片描述

如果出现以下错误，下载依赖vue-template-compiler
ERROR in ./src/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
在这里插入图片描述
ERROR in ./src/app.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property ‘parseComponent’ of undefined

在这里插入图片描述

编写vue

之后就可以去编写vue了
去src文件夹里新建index.js文件和 app.vue文件可以根据需求放到相应的文件夹
在这里插入图片描述
index.html文件：

<body>
    <div id="app">

    </div>
</body>

index.js：入口文件

//vue的入口文件
import Vue from 'vue';

//App是一个组件 如果不识别xxx.vue文件 下载vue-loader
//不能叫内置标签的名字 比如 h1 h2 p header footer等等
import App from './app.vue';

new Vue({
    el: "#app",
    template: `<App></App>`,
//{组件名字:组件}  {App:App}第二个App和 import的App对应，
//第一个App是组件名字,和template: `<App></App>`里的App对应 可以写其他名字
    components: { App: App }
})

app.vue：
在这里插入图片描述
然后去命令行工具中执行 npx webpack 进行打包在dist文件夹下生成文件

其他配置项

服务器环境搭建

下载 npm i webpack-dev-server -D
在这里插入图片描述

运行时想看到错误出处

比如我们去app.vue里写一个错误的代码:
在这里插入图片描述
然后当点击按钮的时候会报错

当我们点进去查看是哪个文件报错的时候，并看不出来具体是哪个文件报错，
所以要进行配置：

热更新（只有在启动服务器的时候才会热更新）

热更新：因为上面搭建了服务器环境，假设更改了一段代码，这段代码我们希望在不重新打包的情况下，让它自动更新配置一个选项来进行热更新
回到webpack.config.js配置文件中：执行三个步骤即可
在这里插入图片描述

设置完毕之后，只需要进行一次打包，之后修改代码就不用再重新打包了
注意，之前使用的打包命令是npx webpack
进行设置：
打开package.json文件：输入以下内容

这样设置以后，执行npm run build 是打包命令；执行npm run dev是启动项目
去命令行工具执行 npm run build 进行打包成功执行
继续执行 npm run dev 执行成功
然后我们直接去浏览器输入网址 127.0.0.1:8080或者localhost:8080
在这里插入图片描述