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",
            }
        ]
    }
};

簡單的專案目錄結構

這些目錄和檔案是同級的。

以上結構完全是手動建立的，沒有使用任何工具。

如果使用vue-cli工具，上面的結構會自動創建出來。

之後，就可以在上面的基礎上進行開發了。