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

🕗 发布于 2024-09-20 11:28 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

http://localhost:3000/#/home

http://localhost:3000/#/Register

http://localhost:3000/#/Search

githup代码写好的项目 GitHub - continye/webpack-: 该项目是从webpack 配置到vue3的详细过程

原文地址：https://blog.csdn.net/m0_74079648/article/details/142250591

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：记一次kafka消息丢失问题排查
下一篇：android 发一个可以下载的的android studio历史版本

如何构建安全可靠的 HarmonyOS 应用
本文将深入探讨 HarmonyOS App 的安全编码规范与最佳实践，帮助开发者在代码编写中避免常见的安全漏洞，如 SQL 注入、XSS攻击等。我们将提供具体的编码示例，并结合ArkUI和ArkTS实
阅读更多2024-11-16
js像循环数组那样循环一个数字，Array.from()
js像循环数组那样循环一个数字，Array.from()
阅读更多2024-11-16
【C++笔记】vector使用详解及模拟实现
vector的文档使用STL的三个境界：能用、明理、能扩展，下面学习vector，我们也按照这个境界去学习。vector是可以改变大小的数组序列容器，也就是数据结构的顺序表。构造函数声明接口说明vec
阅读更多2024-11-16
Java线程池：ThreadPoolExecutor原理解析
本文介绍了线程池的基本概念、主要参数、工作流程，以及 execute() 方法的源码分析，此外，还讨论了在实际应用中可能遇到的陷阱和问题。
阅读更多2024-11-16
1.两数之和-力扣（LeetCode）
1.两数之和-力扣（LeetCode）
阅读更多2024-11-16
Xss挑战（跨脚本攻击）
这里将script，on，src，data，href，进行了过滤，并且在尝试的时候关键字双写不能用了，那么这里直接选择不去闭合标签，直接使用伪协议，但是发现javascript也被拆开了，这里可以对伪
阅读更多2024-11-16
《Python 网络爬虫》
本文介绍了 Python 网络爬虫的基本概念、技术原理、常用工具以及实战案例，希望能够帮助读者快速掌握 Python 网络爬虫技术。在实际应用中，需要根据具体的需求选择合适的工具和方法，并注意遵守法律
阅读更多2024-11-16
UEFI学习（五）——启动框架
https://www.zhihu.com/question/36313402/answer/2398532123UEFI（统一可扩展固件接口）在启动过程主要有以下几个阶段：
阅读更多2024-11-16
【洛谷】T539820 202411A Giants
C++ LGR-207-Div.4】洛谷入门赛 #29 第一题
阅读更多2024-11-16
Python 正则表达式进阶用法：量词与范围
匹配前面的字符零次或多次，相当于“任意多次”。：匹配前面的字符一次或多次，相当于“至少一次”。?：匹配前面的字符零次或一次，相当于“可有可无”。{n}：匹配前面的字符n次。{n,}：匹配前面的字符至少
阅读更多2024-11-16