快速构建一个vue项目的开发环境（基础）

Z时代
2024-01-10
分类：综合

vue

1、安装nodejs

2、创建项目目录

mkdir learn-vue

3、进入项目，初始化

cd learn-vue

npm init -y

5、安装webpack和webpack-cli（用于打包）

npm install webpack webpack-cli --save-dev

安装之后，需要进行配置，以告诉webpack打包谁，以及打包到哪里。配置文件见最后。

4、安装vue

npm install --save vue

6、安装vue解析器

npm i --save-dev vue-loader vue-template-compiler

安装之后，需要进行配置，以告诉webpack对哪些文件进行解析。配置文件见最后。

7、安装html-webpack-plugin（用于自动插入js脚本）

npm i --save-dev html-webpack-plugin

安装之后，需要进行配置，以告诉webpack如何操作。配置文件见最后。

配置文件

webpack.config.js

var path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 以下这部分是关于webpack如何打包的配置
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    // 以下这些是加载的插件
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html',   // 入口文件 对应learn-vue/index.html
            filename: './index.html', // 输出文件 对应dist目录
            hash: true
        })
    ],
    // 以下这些是告诉webpack对哪些文件进行解析，以及用什么插件来解析
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
            }
        ]
    }
};