webpack处理静态资源-模板文件： vue

小强有个dream

已于 2024-05-14 16:52:54 修改

阅读量183

点赞数 2

文章标签： webpack vue.js 前端

于 2024-05-14 15:01:17 首次发布

本文链接：https://blog.csdn.net/qq_36413371/article/details/138854955

版权

webpack 本身不能直接处理 .vue 文件，但是可以通过一些loader来处理

安装必要的依赖
vue-loader、vue-template-compiler（用于编译模板）以及 css-loader（用于处理样式）

1. 简单打包less语法的vue文件

npm install --save-dev vue-loader vue-template-compiler css-loader  less-loader vue-style-loader @vue/compiler-sfc html-webpack-plugin

npm i vue

webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin');  

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.js',
    },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        template: './index.html',
    })
  ]
}

src/main.ts
import { createApp } from 'vue'  
import App from './App.vue'  
  
// 创建 Vue 应用实例  
const app = createApp(App)  
  
// 使用其他库或插件（如果有的话）  
// app.use(...)  
  
// 挂载到 #app 元素上  
app.mount('#app')

src/app.ux   --- 选项式
<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "Hello Vue!",
    };
  },
  methods: {
    increment() {
      // 这里只是一个示例，实际上你可能不会直接修改 message
      // 在真实应用中，你可能会使用 Vuex 或其他状态管理库
      this.message = "Hello Vue! (Count increased)111";
    },
  },
};
</script>

<style lang="less"  scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  height: 100%;
  height: 100%;
  background-color: red;
}
</style>

src/app.vue   --- 组合式
<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 使用 ref 创建一个响应式引用
const count = ref(0);

// 定义一个方法
function increment() {
  count.value++;
}

// 生命周期钩子（例如 onMounted）也可以在这里使用
onMounted(() => {
  console.log("Component is mounted!");
});
</script>

<style scoped>
/* 你的样式 */
</style>

index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app"></div>
</body>
</html>

添加路由

webpack和上面一样

npm i vue-router

src/router.js
import { createRouter, createWebHistory } from 'vue-router'  
import HomeComponent from './pages/home.vue'  
import LoginComponent from './pages/login.vue'  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: HomeComponent  
  },  
  {  
    path: '/login',  
    name: 'Login',  
    component: LoginComponent  
  }
]  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes // (缩写) 相当于 routes: routes  
})  
  
export default router

pages/home.vue
<template>
    <div>home content</div>
</template>

<script>
</script>

<style scoped></style>

pages/login.vue
<template>
    <div>login content</div>
</template>

<script>
</script>

<style scoped></style>

src/main.ts
import { createApp } from 'vue'  
import App from './App.vue'  
import router from './router' 
  
// 创建 Vue 应用实例  
const app = createApp(App)  
  
// 使用其他库或插件（如果有的话）  
// app.use(...)  
app.use(router) // 使用路由实例 
  
// 挂载到 #app 元素上  
app.mount('#app')

小强有个dream

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack处理静态资源-模板文件： vue

webpack 本身不能直接处理 .vue 文件，但是可以通过一些loader来处理安装必要的依赖vue-loader、vue-template-compiler（用于编译模板）以及 css-loader（用于处理样式）
复制链接

扫一扫