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

news2024/9/20 8:10:45

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的详细过程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2148424.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

探索AutoIt：自动化任务的Python魔法棒！

探索AutoIt：自动化任务的Python魔法棒！

文章目录 探索AutoIt&#xff1a;自动化任务的Python魔法棒&#xff01;背景&#xff1a;为什么选择AutoIt&#xff1f;AutoIt库简介安装AutoIt库简单的库函数使用方法场景应用常见Bug及解决方案总结 探索AutoIt&#xff1a;自动化任务的Python魔法棒&#xff01; 背景&#x…
阅读更多...
小阿轩yx-SaltStack部署与应用基础

小阿轩yx-SaltStack部署与应用基础

小阿轩yx-SaltStack部署与应用基础 前言 当今数字化时代&#xff0c;大规模 IT 系统的管理已经成为一个复杂而繁琐的任务。为了提高系统管理的效率和准确性&#xff0c;自动化工具成为各企业不可或缺的一部分。Saltstack 作为一款强大的自动化和配置管理工具&#xff0c;在业…
阅读更多...
文本情感识别分析系统Python+SVM分类算法+机器学习人工智能+计算机毕业设计

文本情感识别分析系统Python+SVM分类算法+机器学习人工智能+计算机毕业设计

一、介绍 使用Python作为开发语言&#xff0c;基于文本数据集&#xff08;一个积极的xls文本格式和一个消极的xls文本格式文件&#xff09;&#xff0c;使用Word2vec对文本进行处理。通过支持向量机SVM算法训练情绪分类模型。实现对文本消极情感和文本积极情感的识别。并基于D…
阅读更多...
rsync 全网备份

rsync 全网备份

目录 1.前言 2.背景 3.备份的内容 4.备份方式 5.环境准备 6.步骤 7.rsync服务端调试 7.1配置 7.2创建目录并测试 8.客户端备份脚本 9.服务端脚本配置 10.增加校验功能 11.致谢 1.前言 在当今数字化的时代&#xff0c;数据的价值不言而喻。无论是企业的关键…
阅读更多...
Linux中使用Docker构建Nginx容器完整教程

Linux中使用Docker构建Nginx容器完整教程

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…
阅读更多...
责任链模式实现规则校验

责任链模式实现规则校验

1、项目中责任链模式实战 我们使用责任链模式实现对订单中参数的校验&#xff0c;首先校验订单id是否为空&#xff0c;然后校验下单人是否为空&#xff0c;最后检验收获地址是否为空。业务的流程图如下所示&#xff1a; 针对上述的业务&#xff0c;我们使用责任链的模式来实现…
阅读更多...
后端接收数组，集合类数据

后端接收数组，集合类数据

文章目录 一. 请求行Path参数&#xff08;不建议&#xff09;二.数组接收&#xff08;不建议&#xff09;三.List集合接收&#xff08;建议&#xff09;四. GET请求既包含请求体又包含请求行 一. 请求行Path参数&#xff08;不建议&#xff09; DeleteMapping("/{ids}&quo…
阅读更多...
面试干货|自动化测试中常见面试题

面试干货|自动化测试中常见面试题

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 “ 今天我给大家介绍一些python自动化测试中常见的面试题&#xff0c;涵盖了Python基础、测试框架、测试工具、测试方法等方面的内容&#xff0c;希望能够帮助…
阅读更多...
PyO3：一个Rust与Python无缝交互的工具，用Rust打造高性能Python应用

PyO3：一个Rust与Python无缝交互的工具，用Rust打造高性能Python应用

PyO3 是一个强大的工具&#xff0c;它为 Rust 开发者提供了一种与 Python 世界无缝交互的方式。无论你想用 Rust 编写 Python 模块&#xff0c;还是将 Python 集成到 Rust 程序中&#xff0c;PyO3 都能满足你的需求。 PyO3 的优势&#xff1a; 高效便捷&#xff1a; PyO3 允许你…
阅读更多...
光伏发电量估算有多重要？如何分析？

光伏发电量估算有多重要？如何分析？

光伏发电量的准确估算不仅是项目规划、投资决策的关键依据&#xff0c;也是后续运维管理、效益评估的基础。 一、光伏发电量估算的重要性 1、项目规划与投资决策&#xff1a;准确的发电量预测能够帮助投资者评估项目的经济可行性&#xff0c;包括投资回报率、成本回收期等关键…
阅读更多...
基于YOLOv8+LSTM的商超扶梯场景下行人安全行为姿态检测识别

基于YOLOv8+LSTM的商超扶梯场景下行人安全行为姿态检测识别

基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别 手扶电梯 行为识别 可检测有人正常行走&#xff0c;有人 跌倒&#xff0c;有人逆行三种行为 跌倒检测 电梯跌倒 扶梯跌倒 人体行为检测 YOLOv8LSTM。 基于YOLOv8LSTM的商超扶梯场景下行人安全行为姿态检测识别&#xf…
阅读更多...
uni-app安装插件

uni-app安装插件

1.通过插件市场安装https://ext.dcloud.net.cn 打开HBuilderX编辑器。 点击菜单栏中的“工具”->“插件安装”。 这里会看到已安装插件和安装新插件两个选项卡&#xff0c;点击安装新插件&#xff0c; 能看到一些核心插件&#xff0c;如果所需要的插件在核心插件里面有&…
阅读更多...
服务器数据恢复—raid5阵列热备盘上线失败导致阵列崩溃的数据恢复案例

服务器数据恢复—raid5阵列热备盘上线失败导致阵列崩溃的数据恢复案例

服务器磁盘阵列数据恢复环境&#xff1a; 服务器中有两组分别由4块SAS硬盘组建的raid5磁盘阵列&#xff0c;两组raid5阵列划分LUN&#xff0c;组成LVM结构&#xff0c;格式化为EXT3文件系统。 服务器磁盘阵列故障&#xff1a; 服务器中一组raid5阵列中有一块硬盘离线&#xff…
阅读更多...
【学习笔记】SSL/TLS证书安全机制之证书透明

【学习笔记】SSL/TLS证书安全机制之证书透明

1、概念 CT - Certificate Transparency&#xff0c;证书透明 2、Trying to Solve 如果意外的 CA 为我们的域名颁发证书&#xff0c;我们是不可见&#xff0c;这就是证书透明&#xff08;CT&#xff09;要解决的问题 3、How CT Works 任何CA机构颁发的所有证书的公共登记处&…
阅读更多...
【Git使用】删除Github仓库中的指定文件/文件夹

【Git使用】删除Github仓库中的指定文件/文件夹

前言&#xff1a; 上篇文章带大家上传了第一个项目至github,那要是想删除仓库中的指定文件夹怎么办&#xff1f;在Github中 仓库是无法通过鼠标操作直接删除文件和文件夹的&#xff0c;那只能通过 git 命令来执行删除操作。接下来就带大家进行操作。 详细步骤&#xff1a; 一…
阅读更多...
语音识别与语音控制的原理介绍

语音识别与语音控制的原理介绍

硬件平台 机器硬件&#xff1a;OriginBot(导航版/视觉版)PC主机&#xff1a;Windows&#xff08;>10&#xff09;/Ubuntu(>20.04)扩展硬件&#xff1a;X3语音版 运行案例 首先进入OriginBot主控系统&#xff0c;运行一下指令。请注意&#xff0c;部分操作OriginBot内暂…
阅读更多...
论文阅读与分析：Few-Shot Graph Learning for Molecular Property Prediction

论文阅读与分析：Few-Shot Graph Learning for Molecular Property Prediction

论文阅读与分析&#xff1a;Few-Shot Graph Learning for Molecular Property Prediction 论文地址和代码地址1 摘要2 主要贡献3 基础知识Meta Learning1 介绍2 学习算法Step 1: What is learnable in a learning algorithm?Step 2&#xff1a;Define loss function for learn…
阅读更多...
【线性回归模型】

【线性回归模型】

线性回归模型 创建一些带标签的数据集&#x1d437; {(&#x1d499;1, &#x1d466;1) , (&#x1d499;2, &#x1d466;2 ), … , (&#x1d499;&#x1d45a;, &#x1d466;&#x1d45a;) } x为特征&#xff0c;映射到对应的标签y&#xff0c;再引入偏置b 线性回归模…
阅读更多...
POI操作EXCEL增加下拉框

POI操作EXCEL增加下拉框

文章目录 POI操作EXCEL增加下拉框 POI操作EXCEL增加下拉框 有时候通过excel将数据批量导入到系统&#xff0c;而业务操作人员对于一些列不想手动输入&#xff0c;而是采用下拉框的方式来进行选择 采用隐藏sheet页的方式来进行操作 String sheetName "supplier_hidden_s…
阅读更多...
如何不终止容器退出Docker Bash会话

如何不终止容器退出Docker Bash会话

如何不终止容器退出Docker Bash会话 💖The Begin💖点点关注，收藏不迷路💖 当通过docker exec进入Docker容器的bash会话后，如果想退出但不停止容器，可以使用快捷键组合： 按下Ctrl+P然后紧接着按下Ctrl+Q。 这个操作会让你从bash会话中“分离”出来，但容器会继续运行…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023