vue webpack 如何配置main.js与router.js及app.vue，请详细描述

在Vue项目中，你可以按照以下步骤配置main.js、router.js和App.vue文件：

1. 首先，确保你的Vue项目已经安装了Vue CLI和Webpack。如果没有安装，请先执行以下命令进行安装：

   npm install -g @vue/cli

2. 创建一个新的Vue项目，并进入项目目录：

   vue create my-project
   cd my-project

3. 在src目录下创建一个main.js文件，并在其中添加以下代码：

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'

   Vue.config.productionTip = false

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

这里导入了Vue、App.vue组件和router.js路由配置文件，并创建了一个Vue实例，将router实例注入到Vue实例中。

4. 在src目录下创建一个router.js文件，并在其中添加以下代码：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from './views/Home.vue'

   Vue.use(VueRouter)

   const routes = [
     {
       path: '/',
       name: 'home',
       component: Home
     },
     // 其他路由配置
   ]

   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
   })

   export default router

这里导入了Vue、VueRouter，并创建了一个路由实例，定义了一个名为Home的路由组件。

5. 在src目录下创建一个App.vue文件，并在其中添加以下代码：

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

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

   <style>
   /* 样式配置 */
   </style>

这里定义了一个根组件App.vue，其中使用了<router-view>标签来渲染路由组件。

6. 在项目根目录下的vue.config.js文件中，添加以下配置：

   module.exports = {
     // 其他配置
     chainWebpack: config => {
       config.resolve.alias.set('@', resolve('src'))
     }
   }

这里的配置是为了让webpack能够正确解析@符号，使你在引入模块时可以使用@符号代替src路径。

这样，你就完成了main.js、router.js和App.vue的配置。你可以根据需要在router.js中添加更多路由配置，以及在App.vue中添加其他组件和样式。记得在index.html中添加一个id为"app"的div元素作为Vue应用的挂载点。