1. Python技术站首页
  2. 其他
  3. Vue

Vue+webpack项目配置便于维护的目录结构教程详解

• Vue

下面我将详细讲解“Vue+webpack项目配置便于维护的目录结构教程详解”的完整攻略。

1. 开始前的准备

首先需要确保已经正确安装了Node.js和Vue-cli，并且创建了一个基于Vue-cli的项目。

2. 目录结构设计

在Vue-cli创建的项目中，已经自带了一些目录和文件，如下所示：

.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

但是这个目录结构并不符合我们的需求，我们需要重新设计一个目录结构。我们可以把不同的功能模块分别放到不同的目录下。

下面是一个比较通用的目录结构示例：

.
├── dist                         // 打包后目录
├── node_modules                 // 依赖目录
├── public                       // 公共目录
│   ├── favicon.ico             // 网站图标（可更换）
│   └── index.html              // 网站首页
├── src                          // 源码目录
│   ├── api                      // 接口封装
│   ├── assets                   // 静态资源
│   ├── common                   // 全局公共文件（如常量、工具方法等）
│   ├── components               // 组件
│   ├── router                   // 路由配置
│   ├── store                    // 状态管理
│   ├── styles                   // 样式
│   ├── views                    // 页面
│   ├── App.vue                  // 页面入口文件
│   └── main.js                  // 程序入口文件，加载各种公共组件
├── .babelrc                     // Babel配置文件
├── .gitignore                   // git忽略配置
├── package.json                 // 依赖配置
├── README.md                    // 项目说明文档
├── webpack.base.js              // webpack基础配置
├── webpack.dev.js               // webpack开发环境配置
└── webpack.prod.js              // webpack生产环境配置

我们可以根据实际需求对目录结构进行调整。

3. webpack配置

到这里，我们已经有了一个合适的目录结构，还需要配置webpack来让工程可以正常运行。

我们可以将webpack配置分成基本配置和环境配置两个部分。基本配置是所有环境通用的，包括打包入口、输出目录、外部模块、样式处理等。而开发环境和生产环境不同之处在于开发环境需要热加载、soucemap等功能，而生产环境则需要压缩、混淆、分离等功能。

以下是两个示例webpack配置文件，可以根据需要进行调整：

webpack.base.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
      'styles': path.resolve(__dirname, '../src/styles')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      inject: true
    })
  ]
}

webpack.dev.js

const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const webpack = require('webpack')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

module.exports = merge(webpackBaseConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 8080,
    overlay: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new FriendlyErrorsPlugin({
      compilationSuccessInfo: {
        messages: [
          `Your application is running here: http://localhost:8080`
        ]
      }
    })
  ]
})

webpack.prod.js

const merge = require('webpack-merge')
const webpackBaseConfig = require('./webpack.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')

module.exports = merge(webpackBaseConfig, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,
            drop_debugger: true
          }
        },
        sourceMap: true,
        parallel: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true
          }
        }
      })
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      allChunks: true
    }),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
})

以上是webpack配置文件的示例，可以根据项目需求进行调整。

4. 示例解释

这里给出两个示例，一个示例是调用后端API来加载数据并渲染页面，一个示例是使用第三方组件库Ant Design Vue。

示例一：调用后端API

在src/api目录下，我们可以定义一些封装了接口调用逻辑的API函数，示例代码如下：

import axios from 'axios'

const api = {
  getList () {
    return axios.get('/api/list').then(res => res.data)
  },

  getDetail (id) {
    return axios.get(`/api/detail?id=${id}`).then(res => res.data)
  }
}

export default api

这里使用了Axios来发送HTTP请求。

接下来，在views目录下，我们可以定义一些页面级组件，如List.vue和Detail.vue。这些组件可以调用API函数来获取数据并渲染页面。示例代码如下：

List.vue

<template>
  <div class="list">
    <div class="item" v-for="item in list">
      <h2>{{ item.title }}</h2>
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    api.getList().then(res => {
      this.list = res
    })
  }
}
</script>

<style lang="scss" scoped>
.list {
  .item {
    h2 {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>

Detail.vue

<template>
  <div class="detail">
    <h1>{{ detail.title }}</h1>
    <div class="content">{{ detail.content }}</div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      detail: {}
    }
  },
  created () {
    api.getDetail(this.$route.params.id).then(res => {
      this.detail = res
    })
  }
}
</script>

<style lang="scss" scoped>
.detail {
  h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .content {
    margin-top: 20px;
  }
}
</style>

示例二：使用Ant Design Vue

Ant Design Vue是一个很流行的组件库，可以加速项目开发。我们可以使用它来改善项目的UI效果。

首先需要安装Ant Design Vue：

npm install ant-design-vue -S

然后在main.js中引入Ant Design Vue并使用：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)

Vue.config.productionTip = false

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

接下来，在使用Ant Design Vue的组件时，需要按照官方文档进行使用。例如：

<!-- 使用Ant Design Vue的Button组件 -->
<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <a-button type="primary" @click="handleClick">点击</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Ant Design Vue!'
    }
  },
  methods: {
    handleClick () {
      console.log('Click')
    }
  }
}
</script>

<style lang="scss" scoped>
.hello {
  padding: 20px;
}
</style>

5. 总结

以上就是“Vue+webpack项目配置便于维护的目录结构教程详解”的完整攻略。我们把不同的功能模块分别放到不同目录下，通过webpack的配置来让工程可以正常运行。同时，提供使用示例，可以参考实际项目开发需要进行调整。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue+webpack项目配置便于维护的目录结构教程详解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue实现倒计时获取验证码效果

    好的。实现倒计时获取验证码效果，需要借助Vue.js框架和JavaScript的setTimeout函数，具体步骤如下： 准备工作 在Vue.js项目中安装Vue.js框架，命令为：npm install vue。 在所需的组件中引入Vue.js框架，比如使用ES6的方式引入：import Vue from ‘vue’。 在数据存储部分新建一个变量来存储倒计…

    Vue 2023年5月29日
    00

  • Vuex的安装、搭建及案例详解

    Vuex的安装 在使用Vuex之前，需要在项目中安装Vuex依赖包。可以通过npm或者yarn进行安装。 使用npm安装： npm install vuex –save 使用yarn安装： yarn add vuex Vuex的搭建 Vuex的核心概念包括state、mutations、actions、getters和modules。 以下是一个简单的Vu…

    Vue 2023年5月27日
    00

  • Vue mockjs编写假数据并请求获取实现流程

    Vue MockJS是一款用于前端mock数据的工具。其可以模拟请求API返回假数据，用于前端开发时进行数据调试、测试。本文将详细介绍Vue MockJS编写假数据并请求获取的实现流程。 1. 安装Vue MockJS 在使用Vue MockJS之前，需要确保在项目中已经安装了Vue，接着可以通过npm或yarn来安装Vue MockJS。 # 使用npm进…

    Vue 2023年5月28日
    00

  • vue.js页面加载执行created,mounted的先后顺序说明

    在Vue.js中，组件的生命周期包括如下几个阶段：创建（creation）、挂载（mounting）、更新（updating）和销毁（destroying）。其中，created和mounted属于创建和挂载阶段，下面详细介绍它们执行的先后顺序。 首先，created钩子函数会在组件实例创建之后立即被调用，此时模板还未渲染成html，因此无法访问到DOM元素…

    Vue 2023年5月28日
    00

  • Vue extend的基本用法(实例详解)

    Vue.extend的基本用法 介绍 Vue.extend是Vue.js提供的扩展一个构造函数的功能。扩展一个构造函数，可以使用基础 Vue 构造器，创建一个“子类”，允许在它基础上拓展一些功能。Vue.extend返回的是一个新的构造器，我们可以基于这个构造器创建出新的Vue实例。 语法 Vue.extend(options) options：选项对象，提…

    Vue 2023年5月28日
    00

  • vue3+ts+vite2项目实战踩坑记录

    本文主要讲解如何基于Vue3、Typescript和Vite2搭建一个前端项目并将中遇到的问题进行踩坑解决。项目包括基本的页面样式和数据交互功能，具体包括以下内容： Vue3项目的初始化和配置 Typescript的集成和配置 Vite2的安装和配置 项目中常见依赖的引入和使用方法 基于Vue3的组件开发和应用 声明文件的引入和使用 基于Vue3的路由和状态…

    Vue 2023年5月28日
    00

  • vue 父组件通过v-model接收子组件的值的代码

    当一个子组件改变了它的状态时，父组件也会相应地随着子组件改变。Vue提供了 v-model 指令来实现这种双向绑定的效果。在子组件中，要使用 this.$emit(‘input’, value) 将数据通过 input 事件的方式发送到父组件中，然后父组件通过 v-model 指令绑定这个事件和值即可。 举例来说，我们现在有一个父组件 Parent.vue …

    Vue 2023年5月27日
    00

  • 使用vue-cli创建vue项目介绍

    当我们要开始一个新的Vue项目时，我们可以使用Vue CLI来创建项目。Vue CLI是一个标准化的工具，用于快速搭建Vue项目。它会为我们提供一个Vue项目的基础结构，包含了很多开箱即用的插件和功能。 下面详细介绍如何使用Vue CLI来创建Vue项目的完整攻略。 环境准备 首先，我们要检查本地环境是否已经安装了Node.js。打开终端，输入以下代码检查是…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部