webpack+vue2构建vue项目骨架的方法

以webpack为工具、vue2为框架，构建vue项目骨架的方法如下：

一、搭建基本环境

1.1 初始化项目

首先，进入控制台，输入以下命令初始化项目：

npm init

在初始化的过程中，我们需要输入基本项目信息，如项目名称、版本等。初始化完成后，会生成一个 package.json。

1.2 安装webpack

在控制台输入以下命令安装webpack：

npm install webpack webpack-cli --save-dev

1.3 安装vue2

在控制台输入以下命令安装vue2：

npm install vue

二、配置webpack

2.1 创建webpack配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件，并进行以下配置：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

2.2 配置loader

在配置文件中增加 rules 属性，用于处理 .vue 文件、ES6语法和样式文件：

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

以上配置中，vue-loader 主要用于处理 .vue 文件；babel-loader 主要用于兼容 ES6 语法；style-loader 和 css-loader 用于处理样式文件。

2.3 配置插件

在配置文件中增加 plugins 属性，用于解析 .vue 文件：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
    new VueLoaderPlugin()
]

2.4 配置开发环境

增加开发环境的配置，将 webpack-dev-server、html-webpack-plugin 和 clean-webpack-plugin 安装为开发模式下的依赖包：

npm install webpack-dev-server html-webpack-plugin clean-webpack-plugin --save-dev

配置 webpack-dev-server：

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    open: true,
    hot: true,
    port: 3000
}

在 plugins 中配置 html-webpack-plugin：

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    new VueLoaderPlugin()
]

同时，在 config 中增加 mode 属性，指定为 development 模式：

mode: 'development'

2.5 配置生产环境

在 scripts 中定义一个 build 命令，用于生产构建：

"scripts": {
    "build": "webpack --mode production"
}

同时，安装 copy-webpack-plugin：

npm install copy-webpack-plugin --save-dev

在 plugins 中增加 copy-webpack-plugin：

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    new VueLoaderPlugin(),
    new CopyWebpackPlugin([
        { from: './src/assets', to: 'assets' }
    ])
]

此处使用 copy-webpack-plugin 将 src/assets 文件夹下的静态资源复制到 dist/assets 文件夹中。

三、创建项目目录

3.1 创建src目录

在项目的根目录下创建一个名为 src 的目录，用于存放开发时的源文件。

3.2 创建main.js文件

在src目录下创建一个名为 main.js 的入口文件，用于引入vue入口文件和要渲染的组件，无需挂载DOM，如：

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

new Vue({
  render: h => h(App),
}).$mount('#app');

3.3 创建App.vue文件

在src目录下创建一个名为 App.vue 的组件文件，用于渲染整个页面，如：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello World!'
        }
    }
}
</script>

<style scoped>
h1 {
    color: #42b983;
}
</style>

四、测试运行

安装vue-loader和css-loader：

npm i vue-loader css-loader --save-dev

在 index.html 文件中，增加一个 id 值为 app 的 div 元素，以供 main.js 文件挂载 Vue 实例的根节点：

<body>
  <div id="app"></div>
</body>

此时，在控制台输入以下命令可以开启开发服务器：

npx webpack-dev-server

启动成功后，在浏览器中输入 http://localhost:3000 访问应用，应该可以看到页面渲染出 Hello World!。

以上即为使用webpack和vue2构建vue项目骨架的方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack+vue2构建vue项目骨架的方法 - Python技术站