使用Webpack创建vue脚手架并搭建路由---详解

1.使用 vue 库

vue 是一个非常好用的 javascript 库，现在已经发行了 vue 3，我们可以直接导入使用库文件，也可以使用单文件（SFC）的形式，直接使用库文件会简单一点，我们先来试一下吧。

1.1安装 vue3

npm install vue@next 
//或者
npm install vue@3

1.2导入 createApp 方法创建一个实例，在你的入口文件导入

import { createApp } from 'vue' // 导入创建实例方法const App = createApp({template: `<h2>我是通过vue生成的{{ title }}</h2>`, // DOM 模版 {{ 模版字符串 }}data(){
// vue2 写法return {title: "标题" // 数据}}})App.mount("#app") //挂载到一个 id 为 app 的 DOM 元素上

1.3在创建的模版也就是（public/index.html）挂载div

以及修改 HtmlWebpackPlugin

然后进行运行项目跑起来打开，有文字

2. vue 单文件组件

什么是单文件（SFC）?

为了更好地适应复杂的项目， Vue支持以 .vue 为扩展名的文件来定义一个完整组件，用以替代使用 Vue.component 注册组件的方式。那我们就可以使用 webpack 来打包这种组件。

2.1 我们先在 src 目录下新建如下文件（views/App.vue）。

2.2. 在 index.js 里导入此文件

import { createApp } from 'vue'
import App from "@/views/App.vue"  //如果没有配置@可以配置一下 或者换成绝对路径const app = createApp(App)
app.mount('#app')

接下来运行的话肯定是报错的，我们的 .vue 单文件肯定需要 loader 去解析的，

安装loader

npm install vue-loader -D

仅此一个是不够的

我们还需安装一个 vue 单文件解析器：

npm install @vue/compiler-sfc -D

然后要记得去 webpack > module > rules里面去配置

//要配置在rules第一项
{test: /\.vue$/,use: {loader: 'vue-loader'}}

并且引入插件，插件是 vue 自带的，直接导入并配置就行

const vue = require("vue-loader/dist/index")
//在插件里面追加一个 new vue.VueLoaderPlugin()

你现在再次运行就能看到效果了

3. 配置vue-router

3.1首先安装路由依赖组件：

npm install vue-router@4

3.2Vue的路由封装需要用到的文件如下图：

3.3views下面文件夹

3.3.1 Home文件夹

<!--* @Author: hukai huzhengen@gmail.com* @Date: 2024-09-13 11:27:54* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-13 14:53:56* @FilePath: \newWebpack\src\views\Home\Home.vue* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template><div>我是home</div>
</template><script setup></script><style></style>

3.3.2 login文件夹

<!--* @Author: hukai huzhengen@gmail.com* @Date: 2024-09-13 11:28:19* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-14 09:47:24* @FilePath: \newWebpack\src\views\Login\Login.vue* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template><div>我是login</div>
</template><script setup></script><style></style>

3.3.3 Register文件夹

<!--* @Author: hukai huzhengen@gmail.com* @Date: 2024-09-13 11:28:29* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-14 10:22:36* @FilePath: \newWebpack\src\views\Register\Register.vue* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template><div>我是Register</div>
</template><script setup></script><style></style>

3.3.3 Search文件夹

<template><div>我是Search</div>
</template><script setup></script><style></style>

3.4 router文件夹：是用来封装路由用的。

router文件夹下的index.js：

/** @Author: hukai huzhengen@gmail.com* @Date: 2024-09-13 11:07:35* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-13 16:30:37* @FilePath: \newWebpack\src\router\index.js* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/
/** @Author: hukai huzhengen@gmail.com* @Date: 2024-09-13 11:07:35* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-13 15:38:19* @FilePath: \newWebpack\src\router\index.js* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/
// 配置路由的地方
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// // 通过Vue.use()方法来使用插件
// Vue.use(VueRouter)
import { createWebHashHistory, createRouter } from 'vue-router'// 引入路由组件
import Home from '@/views/Home/Home.vue'
import Search from '@/views/Search/Search.vue'
import Login from '@/views/Login/Login.vue'
import Register from '@/views/Register/Register.vue'
// 配置路由
export const constantRoutes = [// 路由信息{path: "/home",hidden: true,component: Home},// 重定向，在项目跑起来的时候，访问 / 或是其他 ，立马让它定向到首页// {// 	path: "*",//     hidden: true,// 	redirect: "/home"// },{path: "/search",hidden: true,component: Search},{path: "/login",hidden: true,component: () => import('@/views/Login/Login.vue')},{path: "/register",hidden: true,component: Register},]const router = createRouter({history: createWebHashHistory(),routes: constantRoutes,scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0 }}}})export default router

注意：代码中的“@”表示根目录路径，这个在项目的配置文件webpack.dev.config.js中设置：

const path = require('path');resolve: {alias: {// 约定：使用@表示src文件所在路径'@': path.resolve(__dirname, 'src')}},

3.5 ./src/App.vue

<template><router-view></router-view>
</template>
<script>
export default {
}
</script>

3.6 ./src/index.js：

/** @Author: hukai huzhengen@gmail.com* @Date: 2024-09-12 09:49:08* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-13 15:31:57* @FilePath: \newWebpack\src\index.js* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/
/** @Author: hukai huzhengen@gmail.com* @Date: 2024-09-12 09:49:08* @LastEditors: hukai huzhengen@gmail.com* @LastEditTime: 2024-09-13 09:49:03* @FilePath: \newWebpack\src\index.js* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE*/// import { createApp } from 'vue/dist/vue.esm-bundler'
// import App from "@/views/App.vue" //导入
// console.log(router)
// createApp(App).use(router)
// createApp(App).mount("#app") // 创建实例并挂载（mount）
import { createApp } from 'vue'
import App from "@/views/App.vue" 
import router from '@/router/index.js'const app = createApp(App)
app.use(router)
app.mount('#app')

这样Vue的路由封装就完成了，项目中如果还需要更多的页面的话，也可以在此封装的路由上面进行扩展，以下是页面效果图：

页面效果：
http://localhost:3000/#/login