使用vue+webpack搭建vue项目

文章介绍一下使用vue+webpack搭建vue项目框架：

第一步：建立项目文件夹，这里以名为root的文件夹举例。

第二步：进入到文件夹内，执行 npm init ，根据提示进行操作，操作完成后，会在文件夹内生成一个package.json的文件。文件内部类似于下图：

package.json

第三步：安装webpack和vue。

如未全局安装过，先全局安装，执行 npm install webpack webpack-cli vue -g （如未全局安装后期在启动项目时会报错）。

全局安装后，然后在本地进行安装，执行 npm install webpack webpack-cli vue vue-loader。

安装完成后，文件夹目录及package.json文件如下图所示：

package.json

第四步：然后再依次安装 vue-template-compiler css-loader file-loader style-loader url-loader html-webpack-plugin cross-env。

执行 npm install vue-template-compiler css-loader file-loader style-loader url-loader html-webpack-plugin cross-env。

安装完成后，package.json文件如下图所示：

package.json

第五步：在上述安装都完成之后，在根目录下建立src文件夹，在文件夹下建立app.vue和index.js文件。

在app.vue文件下添加如下代码：

<template>
    <div id="app">{{text}}</div>
</template>
<script>
    export default {
        data() {
            return {
                text: '236' 
            }
        }
    }
</script>
<style></style>

如下图所示：

app.vue

在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)

如下图所示：

index.js
第六步：在根目录下建立webpack.config.js文件，并编写该文件。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const isDev = process.env.NODE_ENV === 'development';

const config = {
    entry: path.join(__dirname, 'src/index.js'), // 入口文件 用path.join(__dirname, 'src/index.js')将路径拼接为绝对路径
    output: {
        filename: 'bundle.js', // 文件输出
        path: path.join(__dirname, '/dist')
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin() // 处理html模版
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader' // 处理以.vue结尾的文件
            },
            {
                test: /\.css$/, // 处理css文件
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}
if(isDev){
    config.devtool = '#cheap-module-eval-source-map' // 调试代码时可以看到自己原本的代码，而不是编译后的
    config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
            errors: true // 将webpack编译的错误显示在网页上面
        },
        open: true // 在启用webpack-dev-server时，自动打开浏览器
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}
module.exports = config;

第七步：执行 npm run dev 启动项目。