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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值