摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。

vue-cli 都到 3.0.3 了，所以是時候玩轉一下 vue-cli 3 的新特性了。

以下的安裝都是在 macOS 的環境下進行的，當然在 windows 和 linus 下也同理。

vue cli 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

可以使用下列任一命令安裝這個新 vue-cli 3.0.3 的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你還可以用這個命令來檢查其版本是否正確 (3.x)：

vue --version

或者：

vue -V

你也可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

上述命令會打開一個瀏覽器窗口，并以圖形化界面將你引導至項目創建的流程。

1.3.1 默認型

新建文件夾，在該文件夾下打開命令窗口，輸入以下命令進行新建項目，當然我起的項目名字叫 vue-webpack-demo

vue create vue-webpack-demo

會讓你選擇默認（default）還是手動（Manually），（注：現在vue-cli3.0默認使用yarn下載）。

先是默認的，一路回車后的項目目錄如下：

再來手動的，我起的項目名字叫 vue-webpack-demo2，如下圖，讓你選擇那些選項，按 空格鍵 是選擇單個，a 鍵 是全選。

我選擇了常用的如下選項：

vue-router 默認 hash 模式，所以我選擇默認的，選擇了 n ，而不是 history 模式：

下一步之后問詢問你安裝哪一種 CSS 預處理語言，我是選擇了用的 less。

這個是問你選擇哪個自動化代碼格式化檢測，配合 vscode 編輯器的，Prettier - Code formatter插件，我選的隨后一個。

第一個是保存就檢測，第二個是 fix 和 commit 的時候檢查。

選擇單元測試解決方案，Mocha是流行的JavaScript測試框架之一，通過它添加和運行測試，從而保證代碼質量，chai 是斷言庫，我兩個都選擇了。

上邊這倆意思問你像，babel, postcss, eslint 這些配置文件放哪？第一個是：放獨立文件放置，第二個是：放package.json里，這里小汪選擇放多帶帶配置文件，選第一個

下面倒數第二行問你是否將以上這些將此保存為未來項目的預配置嗎 ？選擇是的時候，下次創建項目時，可以選擇剛剛配置好的配置，不用再每個都配置一遍。最后一個是選擇的名字，你隨意選擇，點擊確定就開始下載模板了。

再創建項目的時候，剛剛配置好的選擇的名字 vue-webpack4 會這樣子出現：

啟動命令

// 1. 進入項目
cd vue-webpack-demo 
// 或者 cd vue-webpack-demo2
// 2. 安裝依賴
npm i
// 3. 啟動
npm run serve

1.4 項目改變

相比 vue-cli 2.X 創建的目錄，vue-cli 3.0 創建的目錄看不見 webpack 的配置

啟動命令行由：

npm run dev 或者 npm start

改變為：

npm run serve

安裝過程也發生了一些變化，配置可以保存，下次可以再用，像前面的 vue-webpack4。

手動配置 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: {
        // ...
    }
};

當然如果你不想用3.0的話，還是可以繼續使用2.0的, 官方文檔是這樣說的：

具體配置看官方文檔：
vue-cli 3.0
簡單的配置方式

我都不記得在裝什么包的時候修改了 mac 中 npm 的全局路徑了，平時 npm 運行各種命令不報錯。

全局卸載 vue-cli 命令行：

npm uninstall vue-cli -g;

但是今天全局卸載 vue-cli 的時候一直不成功，搞了一個小時，結果看了一下 npm 的全局路徑，才發現路徑不對！！！

如果你的 npm 的全局路徑也變了，請按如下步驟修改加默認的。

方法一：

原因：npmr 的配置改變了，導致正確的 npmr 不能用。

打開終端，切換到根路徑

cd 

open .npmrc 

文件里面修改為 prefix=/usr/local

方法二：

npm config set prefix /usr/local  //是默認路徑 修改了路徑會出現錯誤。

按上面的方法修改完，再全局卸載 vue-cli 果然就成功了。

你以為本文就這么結束了 ? 精彩在后面 ！！！

對 全棧修煉 有興趣的朋友可以掃下方二維碼關注我的公眾號

我會不定期更新有價值的內容，長期運營。

關注公眾號并回復 福利 可領取免費學習資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript