smartzeng


完美起航

vue1.0+webpack开发

  • ~4.21K 字

vue1.0+webpack搭建项目，vue1.0要与指定版本的webpack结合才能正确运行，与vue2.0项目的依赖有很大的不同，vue1.0项目相关依赖如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
    "name": "first",
    "version": "1.0.0",
    "description": "first vue",
    "main": "node index.js",
    "scripts": {
        "test": "node test.js",
        "server": "webpack-dev-server --content-base ./ --port 8000"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/zyw327/vue1.0.git"
    },
    "keywords": [
        "vue"
    ],
    "author": "smart zeng",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/zyw327/vue1.0/issues"
    },
    "homepage": "https://github.com/zyw327/vue1.0/blob/master/README.md",
    "dependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.3",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^0.28.10",
        "vue": "^1.0.28",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^8.7.0",
        "vue-style-loader": "^4.0.2",
        "webpack": "^2.4.1",
        "webpack-cli": "^2.0.10",
        "webpack-dev-server": "^2.4.5"
    }
}

webpack的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const path = require('path');

module.exports = {
    entry: './app/main.js',
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'public'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{ 
                loader: 'style-loader' 
                },{
                    loader: 'css-loader',
                    options: {
                    modules: true
                }
            }]
        },{
            test: /\.jsx?$/,
            exclude: [
                path.resolve(__dirname, 'node_modules')
            ],
            loader: 'babel-loader',
            options: {
                presets: ['es2015']
            }
        },{
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    js: 'babel-loader'
                }
            }
        }]
    }
};

main.js

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from "vue";
import IndexCompany from "./components/index.vue";

new Vue({
    el: "#app",
    data(){
    
    },
    components: {
        IndexCompany
    }
});

index.vue如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
    data(){
        return {
            msg: 'add'
        };
    }
}
</script>

<style>
div{
    background: black;
    color: white;
}
</style>

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue学习</title>
    </head>
    <body>
        <div id="app">
            <index-company></index-company>
        </div>
    <script type="text/javascript" src="public/bundle.js"></script>
    </body>
</html>

目录结构如下：

image.png

源码地址：https://github.com/zyw327/vue1.0

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可