畅享Vue3与Webpack5携手构建的精彩世界

2023-12-20 00:29:31

当然，下面是关于从0开始搭建一个可用的vue3-webpack5-template（二） 的文章：

在第一篇文章中，我们构建了一个基于Webpack5的Vue3项目，现在是时候对这个乞丐版配置进行完善了。

1. 安装必要的依赖项

npm install -D @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-typescript @vue/cli-plugin-vuex

2. 在vue.config.js中添加必要的配置

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .tap((options) => {
        options.fix = true
        return options
      })

    config.plugin('html').tap((args) => {
      args[0].title = 'Vue3 Webpack5 Template'
      return args
    })
  }
}

3. 在src文件夹中创建必要的目录和文件

├── assets
│   ├── images
│   ├── styles
│   └── scripts
├── components
│   ├── Header.vue
│   └── Footer.vue
├── pages
│   ├── Home.vue
│   └── About.vue
├── store
│   ├── index.js
│   └── modules
│       └── user.js
├── router
│   ├── index.js
│   └── routes.js
├── App.vue
└── main.js

4. 在main.js文件中添加必要的代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

5. 在App.vue文件中添加必要的代码

<template>
  <div id="app">
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 在Header.vue文件中添加必要的代码

<template>
  <header>
    <h1>Vue3 Webpack5 Template</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style>
header {
  background-color: #f5f8fa;
  padding: 20px;
}

nav {
  display: flex;
  justify-content: center;
}

a {
  text-decoration: none;
  color: #2c3e50;
  font-size: 16px;
  margin-right: 20px;
}

a:hover {
  color: #007bff;
}
</style>

7. 在Footer.vue文件中添加必要的代码

<template>
  <footer>
    <p>Copyright © 2023 Vue3 Webpack5 Template</p>
  </footer>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style>
footer {
  background-color: #f5f8fa;
  padding: 20px;
  text-align: center;
}
</style>

8. 在Home.vue文件中添加必要的代码

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page of Vue3 Webpack5 Template.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>
</style>

9. 在About.vue文件中添加必要的代码

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page of Vue3 Webpack5 Template.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>
</style>

10. 在index.js文件中添加必要的代码

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

Vue.use(Vuex)
Vue.use(VueRouter)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

const app = new Vue({
  router,
  store
})

app.$mount('#app')