从零开始配置vue+webpack项目

2018年2月23日21:36:36 1 129

学习完Vue的基本语法之后,如果你想构建一个Vue项目,就一定要学习Vue+webpack配置一个Vue工程,虽然有vue-cli脚手架可以让快速构建一个项目,直接写vue代码就行了,但是这是先甜后苦的做法,我们今天是学习先苦后甜的方法从零开始配置vue+webpack项目。

1、初始化项目

首先我们需要创建一个项目文件夹,下图的项目文件夹是test,我使用的是vscode编辑器,因为它自带了命令行,更方便一些。
从零开始配置vue+webpack项目
切换到项目文件夹,使用命令:npm init初始化一个npm项目,生成一个package.json,会出现一些选项,默认回车就好了。如果你没有安装npm和node.js,请自行百度一下教程。

2、安装相关依赖包

我们这个测试的项目主要是使用的vue/vue-loader和webpack,所以我们使用下面命令安装它们:
npm i webpack vue vue-loader

安装vue-loader可以会出现错误,因为它需要css-loadervue-template-compiler两个依赖,接着我们使用下面命令安装这两个依赖:
npm i css-loader vue-template-compiler

这样项目初始化就成功了。

3、新建文件

在test目录下创建一个文件夹叫做src,基本上所有的操作都是在这个里面进行的。

新建文件app.vue

一个vue组件,这个组件里面的内容有template/scriptstyle这些。

<template>
    <div id="text">{{ text }}</div>
</template>

<script>
    export default {
        data() {
            return {
                text: 'abc',
            }
        }
    }
</script>

<style>
    #text{color: red;}
</style>

新建文件webpack.config.js

webpack.config.js这个文件是帮我们打包前端资源,图片,字体,文件等。

const path = require('path')

module.exports = {
    // 处理路径
    entry: path.join(__dirname, 'src/index.js')
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }

}

新建文件index.js

这个index.js是入口文件

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

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)

package.jsonscripts中添加代码指定config文件为webpack.config.js:
"build": "webpack --config webpack.config.js"

最后通过命令跑一下这个项目:
npm run build

在webpack.config.jsmodule.exports中添加下面代码使用webpack支持.vue文件:

module: {
    rules: [{
    test: /.vue$/,
    loader: 'vue-loader'
    }]
}

4、加载资源

加载前端所有能用到的资源,比如图片,或者css预处理器,同时像上面支持.vue文件一样,在rules中加入:

加载css

{
    test: /.css$/,
    use: [
    'style-loader',
    'css-loader'
    ]
},

加载图片

{
    test: /\.(gif|jpg|jpeg|png|svg)$/,
    use: [{
        // loader中有一些选项
        loader: 'url-loader',
        // 可选
        options: {
        limit: 1024,
        name: '[name]-soldier.[ext]'
        }
    }]
}

安装上面用到的loader

npm i style-loader url-loader file-loader

跑起来:
npm run build

未完待续...

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar ezpod 来自天朝的朋友 谷歌浏览器 Windows 7 0

      推荐一个vue工程化实践教程:http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid=zcb7878