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

getaxiosluo

已于 2024-09-14 10:54:48 修改

阅读量285

点赞数 6

文章标签： webpack 前端前端框架 vue

于 2024-09-14 10:29:57 首次发布

本文链接：https://blog.csdn.net/m0_74079648/article/details/142250591

版权

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