vue-cli3.x 新特性及踩坑記

前言

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

1. vue-cli 3.0.3

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

1.1 安裝

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

1.2使用圖形化界面

你也能夠經過 vue ui 命令以圖形化界面建立和管理項目：

vue ui

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

1.3 建立項目

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 項目改變

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

1. 啓動命令行由：

npm run dev 或者 npm start

改變爲：

npm run serve

1. 安裝過程也發生了一些變化，配置能夠保存，下次能夠再用，像前面的 vue-webpack4。
2. 手動配置 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: {
        // ...
    }
};

1. 固然若是你不想用3.0的話，仍是能夠繼續使用2.0的, 官方文檔是這樣說的：

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

踩坑記

1. npm 的全局路徑被修改了

我都不記得在裝什麼包的時候修改了 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