webpack-从零搭建vue开发环境

最新推荐文章于 2024-04-06 15:52:24 发布

唐宋元明清.

最新推荐文章于 2024-04-06 15:52:24 发布

阅读量392

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_22844483/article/details/83067517

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何不使用vue-cli，从零开始手动搭建一个具备热更新功能的Vue开发环境。通过创建package.json，设置项目目录，编写app.vue、index.html和main.js，然后安装必要的依赖并配置webpack.config.dev.js，最终实现了一个基础的Vue开发环境。

摘要由CSDN通过智能技术生成

先说再前面, 本篇博文是没有用vue-cli搭建的, 只是一个学习webpack的demo, 当然也不能用于实际开发中, 如果读者想看vue-cli搭建实际开发项目, 可以去vue-cli3

我们的目的是搭建一个带有热更新的vue开环环境项目

创建package.json

npm init -y

编写代码

app.vue

<template>
    <div>Hello vue</div>
</template>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

main.js

	import Vue from 'vue'
	import App from './app.vue'
	
	new Vue({
	    el: "#root",
	    render: h => h(App)
	})

安装依赖package.json

	

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.config.dev.js --progress --open --hot"	
    // --open 自动打开浏览器
    // --hot 打开热更新功能'
    // 执行npm run dev 就可以愉快的开发了
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   "css-loader": "^1.0.0",    			// 处理css文件
    "html-webpack-plugin": "^3.2.0",    // 简化HTML文件的创建，为您的webpack捆绑服务提供服务
    "style-loader": "^0.23.1",			// 处理css文件
    "vue-loader": "^15.4.2",			// 处理 .vue文件
    "vue-template-compiler": "^2.5.17",	// vue-loader的依赖
    "webpack": "^4.20.2",				// webpack
    "webpack-cli": "^3.1.2",			// 0-0
    "webpack-dev-server": "^3.1.9" 		// 把项目运行在本地服务上, 将webpack与提供实时重新加载的开发服务器一起使用
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}

配置webpack.config.dev.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');			// 引入vue-loader插件
const HtmlWebpackPlugin = require('html-webpack-plugin')		// 创建html文件的插件

module.exports = {
    mode: "development",			// 指定环境
    entry: "./src/main.js",			// 入口文件
    module: {
        rules: [					//	处理所用的loader, webpack4和之前的版本有所不同
            {
                test: /\.vue$/,
                loader: ["vue-loader"]
            }
        ]
    },
    plugins: [						// 使用的插件
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'			// 使用的html模板文件的路径
        })
    ]
}