一、安裝 @vue/cli

更新到 3.x 之後，vue-cli 的包名從 vue-cli 改成了 @vue/cli // 如果沒有安裝舊版本的 vue-cli 可以跳過解除安裝直接安裝

cnpm uninstall vue-cli -g
# OR
yarn global remove vue-cli 
// 然後
npm install -g @vue/cli
# OR
yarn global add @vue/cli

二、圖形化配置專案

vue ui

三、建立專案

vue create yourProjectName

四、配置專案Webpack 手動配置 webpack：在根目錄下新建一個 vue.config.js 檔案，進行你的配置

附上一個標準配置：

const path = require('path');

module.exports = {
    // 基本路徑
    baseUrl: './',
    // 輸出檔案目錄
    outputDir: 'dist',
    // eslint-loader 是否在儲存的時候檢查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack:
 
 (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 為生產環境修改配置...
            config.mode = 'production';
        } else {
            // 為開發環境修改配置...
            config.mode = 'development';
        }

        Object.assign(config, {
            // 開發生產共同配置
            resolve:
 
 {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components')
                }
            }
        });
    },
    // 生產環境是否生成 sourceMap 檔案
    productionSourceMap: true,
    // css相關配置
    css: {
        // 是否使用css分離外掛 ExtractTextPlugin
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {},
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // PWA 外掛相關配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相關配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 設定代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     'http://localhost:8080/': {
        //         target: 'http://baidu.com:8080', //真實請求的目標地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^http://localhost:8080/': ''
        //         }
        //     }
        // },
        before: (app) => {}
    },
    // 第三方外掛配置
    pluginOptions: {
        // ...
    }
};