[JavaScript知识库] 从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架 -> 正文阅读

[JavaScript知识库]从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架

从零起步，基于 webpack 搭建一个适用于小项目的 vue 脚手架

需要对 webpack 有一定的了解，会更好的掌握和理解的搭建下来

项目地址 https://gitee.com/jimmyxuexue/small-project-by-vue

为啥会需要自己搭建呢？

vue 的脚手架已经是非常的好用了，为啥还需要再自己搭建呢？

对于我来说，理解和学习一个新的知识最快的方式就是去熟悉 API，之后就是类似与研究源码一般，去自己实现它，这个是我对 webpack 学习成果的一个测验，看看自己对于 webpack 的理解是否到位。

使用范围

当我们开发一些简单的小型的网站的时候，不涉及很多的功能和接口，使用这种方式开发是最方便的，因为是使用 mvvm 的开发模式进行开发，还是跟传统的操作 DOM 的方式要方便太多太多了，而且也非常好操作。

有用到的插件

Vue

需要使用 vue 的语法等等
vue-loader

webpack 支持.vue 文件的格式
less、less-loader、

css 预处理方式，更好的编程
file-loader、url-loader

用于支持静态资源文件的使用，因为 webpack 默认值只支持.js 和.json 的文件
post-css、autoprefixer、cssnano

让 css 更加强大，自动添加支持浏览器的前缀，压缩 css 代码等等高阶功能
babel

让编译 js，能读 ts，jsES6 转 ES5 等等

所有的东西都在 package.json 中，一些很简单的就没有提及了。

配置 webpack.config.js

const { VueLoaderPlugin } = require('vue-loader')

module.export = {
    module:{
        // 当遇到 .vue结尾的文件时，使用vue-loader进行翻译
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
		{
            test: /\.(png|jpe?g|gif)$/i,
            // loader: 'file-loader',
            loader: 'url-loader',
            options: {
                name: '[name]-[hash:6].[ext]',
                publicPath: '../images',
                outputPath: 'images',
                limit: 1024 * 50, //1024等于1K  这里显示的是50k
                // 这个配置非常的重要，因为vue使用的common.js语法规范，而url-loader或者file-loader是使用esmodule的语法规范，这里要关闭esmodule，否则在引入路径的时候是会报错的
    			esModule: false,
            },
        },
    },

    plugins:[
        // 这个插件一定要引入
        new VueLoaderPlugin(),
    ]
}

在开发中使用方式

在 index.html 中创建一个 id 为 app 的 div

<body>
	<div id="app">
		<Demo />
	</div>
</body>

在 main.js（入口文件）中引入 vue 并进行基本配置

import Vue from 'vue'
import Demo from './views/helloworld.vue'
import './assets/index.less'

new Vue({
	el: '#app',
	data: {
		msg: 'helloaaaa',
	},
	components: {
		Demo,
	},
})

helloworld.vue 中写法（这里就是最基本的组件写法）

<template>
	<div class="appbody">
		<img src="@/assets/img/demo.jpg" alt="img" />
		<h2 @click="show">xuexue</h2>
	</div>
</template>

<script>
export default {
	data() {
		return {}
	},
	mounted() {
		console.log('render child！！')
	},
	methods: {
		show() {},
	},
}
</script>

<style lang="less" scope>
.appbody {
	width: 100vw;
	height: 100vh;
	background-color: skyblue;
	h2 {
		color: red;
	}
}
</style>

中途遇到过的问题

在引入 img 标签的时候，打包之后发现页面并没有成功的渲染出 img 的内容，查看一下发现图片的引入地址并不是正确的地址，编程了 src="[object Module]"。找了很久的原因，最后发现是因为 vue 使用的 common.js 语法规范，而 url-loader 或者 file-loader 是使用 esmodule 的语法规范，这里要关闭 esmodule，之后就可以正常的渲染 img 标签了