webpack5 之 构建vue3+js、vue3+ts、vue3 + vue-route、vue3 + pinia

最新推荐文章于 2024-06-14 20:16:09 发布
最新推荐文章于 2024-06-14 20:16:09 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： webpack5-vue 文章标签： vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845137/article/details/126670634
版权

目录

1：webpack5 之 构建vue3 + js

package.json

  "devDependencies": {
   "@vue/compiler-sfc": "^3.2.38",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.7.10",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.10.1",
    "webpack-merge": "^4.2.1",
  },
  "dependencies": {
    "vue": "^3.2.38",
    "vue-style-loader": "^4.1.3"
  },

webpack.base.js

  • VueLoaderPlugin 使用
const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin') // css提取
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    publicPath: '',
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name]_[contenthash:6].js',
  },
  // loader相关配置
  module: {
    rules: [{
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [
          // env.development ? 'style-loader' : 
          // 'vue-style-loader',
          {
            loader: MiniCssExtract.loader
          },
          'css-loader',
          'postcss-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }

    ]
  },
  resolve: {
    extensions: ["*", ".js", ".vue"],
    // 设置别名
    alias: {
      "@": path.resolve(__dirname, "../src"), // 这样配置后 @ 可以指向 src 目录
    },
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head><body>

  <div id="app"></div>
</body>
</html>

main.js

import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js-11");
let a = 100;
console.log("a", a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set])

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

src / App.vue

<template>
  <div class="app">
    App
    <div class="tt">我是ttt</div>
    <Test></Test>
  </div>
</template>

<script>
import Test from "./components/Test.vue"
export default {
  name: 'App',
  components: {
    Test
  },
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
  background: pink;
}
.app {
  width: 100%;
  height: 100%;
  background: red;
}
.tt {
  color: #fff;
}
</style>

src / components / App.vue

<template>
  <div class="test">Test</div>
</template>

<script>
export default {
  name: 'Test',
  components: {},
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.test {
  background: pink;
  font-size: 20px;
}
</style>

注意点 VSCode 报错：找不到模块“./App.vue”或其相应的类型声明。ts(2307)

  • 则需要 jsconfig.json （ 项目根目录下创建 ）
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modeules", "dist"]
}

效果

  • npm run dev
    在这里插入图片描述

  • npm run build
    在这里插入图片描述

2：webpack5 之 构建vue3 + ts

package.json

# 安装以下依赖 --save-dev
# webpack 相关 webpack、webpack-cli
babel-loader
# babel 核心
@babel/core
# 智能转换成目标运行环境代码
@babel/preset-env
# 解析 typescript 的 babel 预设
@babel/preset-typescript
# polyfill 
@babel/plugin-transform-runtime
# 支持 ts 类的写法
@babel/plugin-proposal-class-properties 
# 支持三点展开符
@babel/plugin-proposal-object-rest-spread
# ts相关
ts-loader
typescript
# vue相关
@vue/compiler-sfc 
vue-loader
vue-template-compiler

# 安装以下依赖 --save
@babel/runtime
@babel/runtime-corejs3
"core-js": "^3.11.0",
vue

  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
    "@babel/plugin-transform-runtime": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-typescript": "^7.18.6",
    "@vue/compiler-sfc": "^3.2.38",
    "babel-loader": "^8.2.5",
    "babel-plugin-import": "^1.13.3",
    "ts-loader": "^9.3.1",
    "typescript": "^4.8.2",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.7.10",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.18.9",
    "@babel/runtime-corejs3": "^7.18.9",
    "core-js": "^3.11.0",
    "vue": "^3.2.38",
  },

babel.config.js

const presets = [
  [
    "@babel/preset-env",
    {
      "useBuiltIns": 'usage', //按需引入 polyfill
      "corejs": "3.11.0", // 指定 corejs 版本 
      targets: {
        chrome: '60',
        firefox: '60',
        ie: '9',
        safari: '10',
        edge: '17',
      },
    }
  ],
  // 引用Typescript插件
  [
    "@babel/preset-typescript",
    {
      allExtensions: true, //支持所有文件扩展名
      "isTSX": true, // 必须设置，否者编译tsx时会报错
      "allExtensions": true // 必须设置，否者编译.vue 文件中ts 代码会报错
    },
  ],
]
const plugins = [
  [
    '@babel/plugin-transform-runtime',
    {
      corejs: 3,
    },
  ],
  '@babel/proposal-class-properties',
  '@babel/proposal-object-rest-spread',
]
module.exports = {
  plugins,
  presets
}

webpack.base.js

  • 修改入口文件 .ts
  • 添加 .ts文件的解析
const path = require('path')
const {
  VueLoaderPlugin
} = require('vue-loader')


module.exports = {
  entry: {
    main: './src/main.ts'
  },
  output: {
    publicPath: '',
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name]_[contenthash:6].js',
  },
  // loader相关配置
  module: {
    rules: [{
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [
          // env.development ? 'style-loader' : 
          // 'vue-style-loader',
          {
            loader: MiniCssExtract.loader
          },
          'css-loader',
          'postcss-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      },
      {
        // test: /\.(t|j)s$/,
        test: /\.js$/,
        use: [{
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
          {
            loader: 'thread-loader',
            options: {
              workers: 3,
            }
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /\.ts$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }

    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ]
}

main.ts

import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js-11");
let a = 100;
console.log("a", a);
// const set = new Set([1, 2, 3, 1])
// console.log('res,', set, '; set-arr', [...set])
import "./ts/test.ts"

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

ts / test.ts

//2;number类型
let num: number = 123
// num = "pin"; //出错
console.log('ts-num',num) //123

//3：定义数组
let arr: number[] = [1, 3, 5, 7]
let arr2: string[] = ['pink', 'lala', 'pa']
console.log('ts-arr',arr2) //["pink", "lala", "pa"]

App.vue

<template>
  <div class="app">
    App
    <div class="tt">我是ttt</div>
    <Test></Test>
    <div>a - {{ a }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Test from './components/Test.vue'

const a = ref(0)
</script>
<script lang="ts">
export default {
  name: 'App'
}
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: red;
}
.tt {
  color: #fff;
}
</style>

conponets / Test.vue

<!-- -->
<template>
  <div>Test - vue3.2</div>
</template>

<script setup lang="ts">
import {} from 'vue'
</script>
<script lang="ts">
export default {
  name: 'Test'
}
</script>
<style lang="scss" scoped></style>

tsconfig.json

{
  "include":["./src/**/*"],
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true, 
    "skipLibCheck": true                                 
  }
}

效果

  • npm run dev
    在这里插入图片描述

  • npm run build
    在这里插入图片描述

3：webpack5 之 构建vue3 + ts + vue-route

找不到模块“@/views/home/Home.vue”或其相应的类型声明。ts(2307)

  • 再src 下 创建 vue.d.ts 文件
declare module '*.vue' {
  import Vue from '@/vue'
  export default Vue
}

package.json

  "dependencies": {
    "vue": "^3.2.38",
    "vue-router": "^4.1.5"
  },

router / index.ts

  • 路由文件的设置
import {
  createRouter,
  createWebHistory,
  createWebHashHistory
} from 'vue-router'

// 静态路由
export const constantRoutes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */'@/views/home/Home.vue'),
    meta: { hidden: true }
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "About" */'@/views/about/About.vue'),
    meta: { hidden: true }
  }
]
// history: createWebHistory(import.meta.env.BASE_URL),
const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes,
  // 刷新时，滚动条位置还原
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export default router

main.ts

  • 引入路由 并且挂载到vue
import '@/css/main.css'
import '@/css/main.scss'
console.log('main.js-11')
let a = 100
console.log('a', a)
import './ts/test.ts'

import { createApp } from 'vue'
import router from './router'

import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')

App.vue

  • 为路由添加 入口
<template>
  <div class="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
    <div>
      App文件
      <div class="tt">我是ttt</div>
      <Test></Test>
      <div>a - {{ a }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Test from './components/Test.vue'

const a = ref(0)
</script>
<script lang="ts">
export default {
  name: 'App'
}
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.tt {
  color: #fff;
}
</style>

效果

  • npm run dev | build 效果
  • 一开始 默认加载 home页面，点击关于 - 跳转到关于页面，点击首页，跳转到首页页面
    在这里插入图片描述
    在这里插入图片描述

4：webpack5 之 构建vue3 + ts + pinia

package.json

  "dependencies": {
    "pinia": "^2.0.21",
    "vue": "^3.2.38"
  },

main.ts

import { createApp } from 'vue'
// 使用 pinia
import { createPinia } from 'pinia'
const pinia = createPinia()

import App from './App.vue'
const app = createApp(App)
app.use(pinia)
app.mount('#app')

store / index.ts

import useAppStore from './modules/app'
import useHomeStore from './modules/home'

const useStore = () => ({
  app: useAppStore(),
  home: useHomeStore()
})

export default useStore

store / modules / app.ts

// import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'

const useAppStore = defineStore({
  id: 'app',
  // state: (): AppState => ({
  state: () => ({
    count: 0
  }),
  actions: {
    addCount(payload: number) {
      this.count = payload
    }
  }
})

export default useAppStore

store / modules / home.ts

// import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'

const useHomeStore = defineStore({
  id: 'home',
  // state: (): AppState => ({
    state: () => ({
    homeStr: "homeStr",
  }),
  actions: {
    changeHomeStr( payload : string) {
      this.homeStr = payload
    }
  }
})
export default useHomeStore

App.vue

<template>
  <div class="app">
      <div>pinia的使用</div>
      <div>appCount - {{ appCount }}</div>
      <div>homeStr - {{ homeStr }}</div>
      <button type="primary" @click="btn">Primary</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Test from './components/Test.vue'

import useStore from '@/store'
const { app, home } = useStore() as any // 拿到 store的数据
const appCount = computed(() => app.count)
const homeStr = computed(() => home.homeStr)
const btn = () => {
  app.addCount(10)
  home.changeHomeStr('我是hh')
}
</script>
<script lang="ts">
export default {
  name: 'App'
}
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.tt {
  color: #fff;
}
</style>

效果

  • npm run dev | build
    在这里插入图片描述
    在这里插入图片描述
小小亮01
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0+ts+webpack组件开发
09-01
vue3.0+ts+webpack组件开发
vue3+pinia+element-plus搭建的模板工程
01-04
这里有一个基于最新技术栈构建的系统模板工程，结合了Pinia、Vue3、Element Plus和Webpack 5的强大力量。它为您提供了一个前所未有的开发体验，让您的项目脱颖而出。 这个模板工程不仅仅是一个简单的骨架，它还内置...
Webpack5 搭建 Vue3 + TS 项目
前端开发博客
05-05 9017
点击关注下方卡片关注我????????回复“Vue3”查阅Vue3精选文章各位小伙伴，我回广州了，今天开始更新了。作者：Corwien来源：SegmentFault 思否社区1. 前言笔...
【Webpack】使用 Webpack 构建 Vue3+TS 项目
最新发布
小秀的博客
06-14 619
shim.d.ts 文件是一个类型声明文件，用于告诉 TypeScript 编译器如何处理 Vue 的单文件组件（SFC）和其他自定义模块。为 Vue 的单文件组件和其他非 TypeScript 模块提供类型信息，以便在 TypeScript 项目中使用它们时能够正确地进行类型检查和代码提示。webpack5 以上的版本需要安装 webpack-cli。webpack-dev-server 开启一个本地服务。
Webpack5 搭建 Vue3 + TS 项目，web网页开发
2401_84093203的博客
04-04 1390
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-7NirTWxN-1712234559064)][外链图片转存中…(img-qBiQqOHt-1712234559064)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
webpack构建vue3+ts项目
sun_jinlin的博客
02-02 1129
使用webpack、webpack-cli、自定义配置构建 vue3+ts项目
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
vite+vue3动态模块化导入并使用pinia
03-25
在现代前端开发中，Vue3、Vite和Pinia是三个关键的技术组件，它们共同构建了一个高效、灵活的开发环境。下面将详细讲解这三个技术及其结合使用的方式。 **Vue3** 是Vue.js框架的最新版本，它带来了许多性能优化和新...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 是现代前端开发中一套流行的组合，用于构建高效、可维护的后台管理系统。这套模板利用了最新版本的技术栈，旨在提高开发效率并提供良好的用户体验。 首先，Vue3...
vue3-ts-template:基于vue3，TypeScript，Webpack5的开发环境模版。Development environment template based on vue3, typescript and webpack 5
05-24
vue3-ts-template 基于vue3，TypeScript，Webpack5的开发环境模版 特点： 基于webpack5自定义项目结构 基于vue3开发，引入vue全家桶 使用ts编写文件，增强类型 Development environment template based on vue3, typescript and webpack 5 characteristic: Customize project structure based on webpack5 Based on the development of vue3, the introduction of vue3 Use ts to write files and enhance types use 使用 安装依赖 yarn 运行项目 yarn dev 打包 yarn build 文件信息 webpack.com
react-luo：自动React-保持最新技术react17钩住router5 webpack5 babel7 antd4
02-05
罗 这是什么？ 自动React这是一个React脚手架，没有使用create-react-app标准的React + Redux分级结构经过了多个项目的实践，不停的更新和优化出来的。目前自己做项目同时用。 PWA，挂钩，代码分割，热替换，HappyPack多线程编译，ES6 +语法 开始 yarn install # 安装依赖模块 yarn start # 运行开发环境: http://localhost:8888 yarn build # 正式打包，用于生产环境 yarn dist # 运行正式打包后的最终文件（build目录下的文件）: http://localhost:888
vue3+ts+webpack 搭建+环境配置+路由
qq_38394175的博客
05-18 3773
一、搭建（vue.js+webpack的项目） 1.vite //vue cli 版本在 4.5.0 以上--我用的5.0.4 npm install -g @vue/cli vue -V //创建项目 vue create 项目名字 //安装依赖运行项目 cd 项目名 //注意node版本，我用的v16.14.2 npm install 2.webpack //vue cli 版本在 4.5.0 以上--我用的5.0.4 npm install -g @vue/cli vue -V //创建项目
自己构建webpack+vue3+ts
sumtre_w的博客
01-22 1131
webpack+vue3+ts搭建
vue3+ts+webpack+router+vuex
小林的博客
10-15 337
vue3+ts+webpack创建项目
2024年Webpack5 搭建 Vue3 + TS 项目，2024年最新耗时两个礼拜8000字Web前端面试长文
2401_84411433的博客
05-11 981
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料},],
从 0~1 创建 Vue3项目（Vue3 + JS）
qq_48937489的博客
05-10 736
我目前还是在用 JavaScripr开发项目，后面会学习 TypeScript ，也会专门写一篇《从 0~1 创建Vue3 + TS 项目》
VUE3+JS请求
每一次跌倒都是为了华丽的站起来。
06-05 365
VUE3+JS请求
Vue3核心原理与面试必备知识详解
"这篇文档是针对2023年Vue.js面试的核心原理解析，主要涵盖了Vue2和Vue3的关键知识点，适合初中级前端工程师学习。文档详细列出了Vue的代码仓库、路由、状态管理、Hook、构建工具、脚手架以及编辑器插件等重要组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值