搭建vue2.x+webpack简易开发环境

最新推荐文章于 2023-12-28 17:27:01 发布

原创最新推荐文章于 2023-12-28 17:27:01 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js #webpack

前端专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了如何从零开始搭建Vue结合Webpack的开发环境，并通过一个简单的示例展示了组件的编写与打包流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天折腾了下vue+webpack的开发环境，现把整个过程记录一下，供自己和需要者参考。

虽然可以使用vue-cli（http://vuejs-templates.github.io/webpack/），但是生成的配置包含内容太多，看起来头大，所以希望一步步开始搭建，逐渐了解每个配置项是做什么用的，对于小白理解掌握来说，我认为这很重要！
首先，建立如下的项目结构

sparrow
├── build/                      
│   ├── webpack.config.js  # webpack配置文件
├── src/
│   ├── main.js            # 程序入口文件
│   ├── App.vue            # 主程序组件
│   ├── components/        # ui组件
│   │   ├── Hello.vue
├── index.html              # 项目模板文件
└── package.json            # nodejs配置文件

其中package.json文件可以使用npm init方式生成

这里写图片描述

这样可以生成最简单的配置，然后我们需要引入依赖包，既然是vue+webpack，那么首先得把它俩装上

npm install vue --save
npm install webpack --save-dev
npm install css-loader vue-template-compiler vue-loader --save-dev #webpack的loader，用来解析.vue文件

其中–save会把安装完的依赖插入到package.json的dependencies下，–save-dev会把安装完的依赖插入到package.json的devDependencies下

最终的package.json文件如下

package.json

{
  "name": "sparrow",
  "version": "1.0.0",
  "description": "vue2.0+webpack startup",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "vue",
    "webpack"
  ],
  "author": "kenthu",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0"
  }
}

接下来配置webpack，放置在build目录下

webpack.config.js

var path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            'src': path.resolve(__dirname, '../src'),
            'components': path.resolve(__dirname, '../src/components')
        }
    },
    module : {
        rules: [
            {
                test:/\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

程序入口配置为了main.js，所以在src目录下建立

App.vue

import Vue from 'vue';
import App from './App';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

主要初始化vue对象，关联id为app的div，引入了组件App并插入模板。接着建立App组件

App.vue

<template>
    <div id="main">
        <Hello></Hello>
    </div>
</template>

<script>
    import Hello from './components/Hello.vue'
    export default {
        name: 'app',
        components: {
            Hello
        }
    }
</script>

<style>
    #main {
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

为了更好地展示组件的编写及引用，又新增引入了Hello组件，放在components目录下

Hello.vue

<template>
    <div>
        <ul>
            <li v-for='i in n' class='myli'>{{i}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {n: 6}
        }

    }
</script>

<style>
    .myli {
        color: red }
</style>

主要渲染一个列表，添加了写一个vue组件的三要素：template, scritpt, style。

以上过程完成后，执行打包命令

webpack --config build/webpack.config.js

成功后会在dist目录下生成main.js，接着需要编写html来引用它，放置在根目录下

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>sparrow</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/main.js"></script>
</body>
</html>