使用webpack手动搭建vue项目（包含路由）（jsx语法）（dll加速打包）

Webpack Vue项目搭建

最新推荐文章于 2022-08-06 15:24:35 发布

原创

最新推荐文章于 2022-08-06 15:24:35 发布 · 590 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

本文详细介绍使用Webpack搭建Vue项目的步骤，包括目录结构设计、代码编写、插件安装与配置等，并介绍如何利用DLLPlugin优化打包效率。

webpack搭建vue项目

1. 创建根文件并初始化

mkdir hand-demo
cd hand-demo
npm init -y

2. 创建目录

// 打包输出地址
dist 

//公共资源
public
	index.html 	//入口页面

// 开发操作的目录
src
	main.js //  入口js文件
	
	App.vue  // 根 组件
	
	components // 公共组件目录
		
	
	router //前端路由配置
		index.js
		
	store // store仓库
		index.js
		
	views // 页面目录
		About.vue // about组件
		Home.vue // home组件
		NotFound.vue // 404组件
	
	assets 资源目录，会被webpack构建
		_init.scss // 默认样式

// 重写webpack的配置文件
webpack.config.js

3.编写代码

public / index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='root'></div>
    <!-- 挂载点 -->
</body>
</html>

src / App.vue

<template>
  <div>
    <div>这里是App.vue 文件</div>
    <router-view></router-view>
    <!-- 切换路由，对应的组件在此显示 -->
  </div>
</template>
<script>
export default {
   
   
  data() {
   
   
    return {
   
   };
  }
};
</script>
<style>
</style>

src / views / About.vue

<template>
  <div class="about-container">
    <div>about</div>
    <!-- 点击事件 切换路由 及 对应页面 -->
    <span class="flex flex-center cursor-pointer" @click="toHome">click me</span>
  </div>
</template>
<script>
export default {
   
   
  data() {
   
   
    return {
   
   };
  },
  methods: {
   
   
    // 切换路由 路由映射表会切换对应页面
    toHome() {
   
   
      this.$router.push("/");
    }
  }
};
</script>
<style lang='scss' scoped>
.about-container {
   
   
  div {
   
   
    color: gold;
  }
  span {
   
   
    width: 70px;
    height: 22px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid #b2b6b6;
  }
}
</style>