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

vue-cli 都到 3.0.3 了，所以是時(shí)候玩轉(zhuǎn)一下 vue-cli 3 的新特性了。

以下的安裝都是在 macOS 的環(huán)境下進(jìn)行的，當(dāng)然在 windows 和 linus 下也同理。

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

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

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

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

vue --version

或者：

vue -V

你也可以通過(guò) vue ui 命令以圖形化界面創(chuàng)建和管理項(xiàng)目：

vue ui

上述命令會(huì)打開(kāi)一個(gè)瀏覽器窗口，并以圖形化界面將你引導(dǎo)至項(xiàng)目創(chuàng)建的流程。

1.3.1 默認(rèn)型

新建文件夾，在該文件夾下打開(kāi)命令窗口，輸入以下命令進(jìn)行新建項(xiàng)目，當(dāng)然我起的項(xiàng)目名字叫 vue-webpack-demo

vue create vue-webpack-demo

會(huì)讓你選擇默認(rèn)（default）還是手動(dòng)（Manually），（注：現(xiàn)在vue-cli3.0默認(rèn)使用yarn下載）。

先是默認(rèn)的，一路回車后的項(xiàng)目目錄如下：

再來(lái)手動(dòng)的，我起的項(xiàng)目名字叫 vue-webpack-demo2，如下圖，讓你選擇那些選項(xiàng)，按 空格鍵 是選擇單個(gè)，a 鍵 是全選。

我選擇了常用的如下選項(xiàng)：

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

下一步之后問(wèn)詢問(wèn)你安裝哪一種 CSS 預(yù)處理語(yǔ)言，我是選擇了用的 less。

這個(gè)是問(wèn)你選擇哪個(gè)自動(dòng)化代碼格式化檢測(cè)，配合 vscode 編輯器的，Prettier - Code formatter插件，我選的隨后一個(gè)。

第一個(gè)是保存就檢測(cè)，第二個(gè)是 fix 和 commit 的時(shí)候檢查。

選擇單元測(cè)試解決方案，Mocha是流行的JavaScript測(cè)試框架之一，通過(guò)它添加和運(yùn)行測(cè)試，從而保證代碼質(zhì)量，chai 是斷言庫(kù)，我兩個(gè)都選擇了。

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

下面倒數(shù)第二行問(wèn)你是否將以上這些將此保存為未來(lái)項(xiàng)目的預(yù)配置嗎 ？選擇是的時(shí)候，下次創(chuàng)建項(xiàng)目時(shí)，可以選擇剛剛配置好的配置，不用再每個(gè)都配置一遍。最后一個(gè)是選擇的名字，你隨意選擇，點(diǎn)擊確定就開(kāi)始下載模板了。

再創(chuàng)建項(xiàng)目的時(shí)候，剛剛配置好的選擇的名字 vue-webpack4 會(huì)這樣子出現(xiàn)：

啟動(dòng)命令

// 1. 進(jìn)入項(xiàng)目
cd vue-webpack-demo 
// 或者 cd vue-webpack-demo2
// 2. 安裝依賴
npm i
// 3. 啟動(dòng)
npm run serve

1.4 項(xiàng)目改變

相比 vue-cli 2.X 創(chuàng)建的目錄，vue-cli 3.0 創(chuàng)建的目錄看不見(jiàn) webpack 的配置

啟動(dòng)命令行由：

npm run dev 或者 npm start

改變?yōu)椋?/p>

npm run serve

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

手動(dòng)配置 webpack：在根目錄下新建一個(gè) vue.config.js 文件，進(jìn)行你的配置 :

const path = require("path");

module.exports = {
    // 基本路徑
    baseUrl: "./",
    // 輸出文件目錄
    outputDir: "dist",
    // eslint-loader 是否在保存的時(shí)候檢查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
            // 為生產(chǎn)環(huán)境修改配置...
            config.mode = "production";
        } else {
            // 為開(kāi)發(fā)環(huán)境修改配置...
            config.mode = "development";
        }

        Object.assign(config, {
            // 開(kāi)發(fā)生產(chǎn)共同配置
            resolve: {
                alias: {
                    "@": path.resolve(__dirname, "./src"),
                    "@c": path.resolve(__dirname, "./src/components")
                }
            }
        });
    },
    // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相關(guān)配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開(kāi)啟 CSS source maps?
        sourceMap: false,
        // css預(yù)設(shè)器配置項(xiàng)
        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 插件相關(guān)配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相關(guān)配置
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 設(shè)置代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     "http://localhost:8080/": {
        //         target: "http://baidu.com:8080", //真實(shí)請(qǐng)求的目標(biāo)地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             "^http://localhost:8080/": ""
        //         }
        //     }
        // },
        before: (app) => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

當(dāng)然如果你不想用3.0的話，還是可以繼續(xù)使用2.0的, 官方文檔是這樣說(shuō)的：

具體配置看官方文檔：
vue-cli 3.0
簡(jiǎn)單的配置方式

我都不記得在裝什么包的時(shí)候修改了 mac 中 npm 的全局路徑了，平時(shí) npm 運(yùn)行各種命令不報(bào)錯(cuò)。

全局卸載 vue-cli 命令行：

npm uninstall vue-cli -g;

但是今天全局卸載 vue-cli 的時(shí)候一直不成功，搞了一個(gè)小時(shí)，結(jié)果看了一下 npm 的全局路徑，才發(fā)現(xiàn)路徑不對(duì)！??！

如果你的 npm 的全局路徑也變了，請(qǐng)按如下步驟修改加默認(rèn)的。

方法一：

原因：npmr 的配置改變了，導(dǎo)致正確的 npmr 不能用。

打開(kāi)終端，切換到根路徑

cd 

open .npmrc 

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

方法二：

npm config set prefix /usr/local  //是默認(rèn)路徑 修改了路徑會(huì)出現(xiàn)錯(cuò)誤。

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

你以為本文就這么結(jié)束了 ? 精彩在后面 ?。?！

對(duì) 全棧修煉 有興趣的朋友可以掃下方二維碼關(guān)注我的公眾號(hào)

我會(huì)不定期更新有價(jià)值的內(nèi)容，長(zhǎng)期運(yùn)營(yíng)。

關(guān)注公眾號(hào)并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請(qǐng)猛戳： Python、Java、Linux、Go、node、vue、react、javaScript