返回

动手构建webpack项目实践（三）——src目录详解

前端

在上一篇中，我们讨论了打包和构建dev服务的相关内容。在本篇文章中，我们将介绍src的相关构造。

一、component文件夹：组件文件存放处

component文件夹是用来存放组件文件的。组件是构成前端项目的基本单元，它可以是一个按钮、一个表单、一个导航栏，或者是一个完整的页面。组件可以被复用，这使得前端项目的开发更加高效。

1. 使用命令行新建和删除文件

在src文件夹下，我们可以使用命令行来新建和删除文件。这可以保证为保证各个模块之间、各个文件之间的目录结构风格的统一，方便项目的修改与维护。

新建文件：

touch component/Button.vue

删除文件：

rm component/Button.vue

2. template文件夹下的子文件夹

在template文件夹下，我们可以新建一些子文件夹来存放不同的模板文件。例如，我们可以新建一个init文件夹来存放初始化模板文件，一个route文件夹来存放路由模板文件，一个style文件夹来存放样式模板文件，以及一个router文件夹来存放路由配置模板文件。

mkdir template/init
mkdir template/route
mkdir template/style
mkdir template/router

二、component文件夹下的子文件夹

在component文件夹下，我们可以新建一些子文件夹来存放不同的组件文件。例如，我们可以新建一个button文件夹来存放按钮组件文件，一个form文件夹来存放表单组件文件，一个nav文件夹来存放导航栏组件文件，以及一个page文件夹来存放页面组件文件。

mkdir component/button
mkdir component/form
mkdir component/nav
mkdir component/page

三、component文件夹下的组件文件

在component文件夹下的子文件夹中，我们可以新建一些组件文件。组件文件一般以.vue为后缀名。在组件文件中，我们可以使用HTML、CSS和JavaScript来定义组件的结构、样式和行为。

// component/button/Button.vue
<template>
  <button>
    {{ text }}
  </button>
</template>

<script>
export default {
  props: ['text'],
}
</script>

<style>
button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
}
</style>

四、template文件夹下的模板文件

在template文件夹下的子文件夹中，我们可以新建一些模板文件。模板文件一般以.html或.js为后缀名。在模板文件中，我们可以使用HTML、CSS和JavaScript来定义模板的结构、样式和行为。

// template/init/index.html
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>初始化页面</h1>
</body>
</html>

五、src文件夹的其他文件

除了component文件夹和template文件夹之外，src文件夹中还可以包含其他文件，例如main.js文件、index.html文件和.gitignore文件。

1. main.js文件

main.js文件是webpack的入口文件。在main.js文件中，我们可以导入其他模块，并配置webpack的打包规则。

// src/main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

2. index.html文件

index.html文件是项目的根文件。在index.html文件中，我们可以定义项目的标题、、等信息，并加载main.js文件。

<!DOCTYPE html>
<html>
<head>
  
  <meta charset="utf-8">
  <meta name="description" content="这是一个我的项目">
  <meta name="keywords" content="项目,vue,webpack">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

3. .gitignore文件

.gitignore文件是用来告诉git哪些文件不应该被提交到仓库中。在.gitignore文件中，我们可以列出一些文件或目录，这些文件或目录将被忽略，不会被提交到仓库中。

# 忽略node_modules目录
node_modules/

# 忽略.env文件
.env

# 忽略临时文件
.DS_Store

# 忽略日志文件
logs/*

总结

通过这三篇文章，我们已经介绍了webpack项目实践的各个方面。我们了解了webpack的打包原理，学会了如何使用webpack来打包前端项目，以及如何使用src文件夹来组织前端项目的代码。希望这些内容能够对大家有所帮助。