2021-07-21webpack 搭建vue脚手架

最新推荐文章于 2022-12-23 02:31:53 发布

棉花一朵

最新推荐文章于 2022-12-23 02:31:53 发布

阅读量155

点赞数

文章标签： vue webpack vue-cli

本文链接：https://blog.csdn.net/weixin_53125679/article/details/118964324

版权

webpack 搭建vue脚手架

初始化项目

npm init -y

安装webpack 和webpack-cli

npm i webpack webpack-cli --save-dev

解析 .vue 的文件(单文件组件)，安装 vue, vue-loader, vue-template-compiler 三个插件

npm i vue  vue-loader vue-template-compiler --save-dev

项目根目录下创建src文件夹，
- 在里边创建一个main.js文件
- 创建一个App.vue 文件(模板)
  main.js的内容：

import Vue from 'vue'
import App from './App.vue'

new Vue({
    render:h => h(App)
}).$mount('#app')

创建html模板文件

在项目的根目录下创建一个public文件夹，里边创建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>
</head>
<body>
    <!--  div#app 最终会被 App.vue 文件替换， -->
    <div id="app"></div>
</body>
</html>

解析生成html 模板： html-webpack-plugin插件

npm i  html-webpack-plugin --save-dev

项目根目录下创建webpack.config.js文件

const path = require('path')

//  引入vue-loader的内置插件
const {VueLoaderPlugin} = require('vue-loader')

// 引入 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 配置入口文件
    entry:'./src/main.js',
    // 配置文件的出口
    output:{
        path:path.resolve(__dirnamem, 'dist'),
        filename:'main.js'
    },
    // 配置loader
    module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'index.html'
        })
    ]
}

解析css
- 安装css-loader 和style-loader

npm i css-loader style-loader --save-dev

- 配置loader

 module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            },
            {
                test:/\.css$/i,
                use:['stylel-loader', 'css-loader']
            }
        ]
    },

处理图片
- 需要安装file-loader url-loader

npm i file-loader url-loader --save-dev

- 配置loader

 module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            },
            {
                test:/\.css$/i,
                use:['stylel-loader', 'css-loader']
            },
            {
                test:/\.(jpg|jpeg|webp|gif|png)$/i,
                use:[
                    {
                        loader:'url-loader',
                        option:{
                            limit:8192,
                        }
                    }
                ]
            }
        ]
    }

在vue中图片需要作为资源引入

<template>
    <div>
        <img :src="logo" alt="">
    </div>
</template>
<script>
import log from '图片路径'

export default({
   data(){
       return {
           logo
       }
   }
})
</script>

处理sass
- 安装sass sass-loader node-sass

npm i sass sass-loader node-sass  --save-dev

- 配置loader

 module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            },
            {
                test:/\.css$/i,
                use:['stylel-loader', 'css-loader']
            },
            {
                test:/\.(jpg|jpeg|webp|gif|png)$/i,
                use:[
                    {
                        loader:'url-loader',
                        option:{
                            limit:8192,
                        }
                    }
                ]
            },
            {
                test:/\.s(a|c)ss$/i,
                use:[
                    'style-loader', // 将 JS 字符串生成为 style 节点
                    'css-loader',// 将 CSS 转化成 CommonJS 模块
                    'sass-loader'] // 将 Sass 编译成 CSS
            }
        ]
    }

提取css生成独立独立的css文件

安装 mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

引入插件

// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

配置loader 和插件

 module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            },
            {
                test:/\.css$/i,
                //  使用插件内置的loader
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            },
             {
                test:/\.s(a|c)ss$/i,
                use:[
                    MiniCssExtractPlugin.loader, // 将 JS 字符串生成为 提取为单独的css文件
                    'css-loader',// 将 CSS 转化成 CommonJS 模块
                    'sass-loader'] // 将 Sass 编译成 CSS
            }
        ]
    },
plugins:[
    new MiniCssExtractPlugin()
]

vue的全家桶配置

需要使用路由

安装 vue-router
在src文件下创建一个 router 文件夹，里边创建一个index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path:'/',
        component:'路由组件'
    },
     {
        path:'/',
        component:() => import('路由组件')
    },
    ....
]

const router = new VueRotuer({
    routes
})

export default router

在main.js中引入router

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

new Vue({
    router,
    render:h => h(App)
}).$mount('#app')

需要vuex

安装 vuex
在src文件下创建一个 store 文件夹，里边创建一个index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{

    },
    mutations:{

    },
    actions:{

    }
    ,getters:{

    }
    ,modules:{

    }
})

export defalut store

在main.js中引入veux

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'

new Vue({
    router,
    store,
    render:h => h(App)
}).$m