Vue-cli 3.0自定義腳手架

一、進入項目地址 https://github.com/vuejs/vue-cli ，選擇 docs目錄查看具體安裝流程。 中文文檔：https://cli.vuejs.org/zh

可以看到我電腦上現在的腳手架版本是：

接下來要把它升級到最新版本，執行以下命令：

 二、我們創建一個項目目錄 執行以下命令：

　　vue create “目錄名”

會出現如下：

我們選擇第二個即可。

下一步，選擇要安裝的插件：空格鍵切換選中狀態

 

 繼續：

到這一步，它問是否將以上配置保存為自定義模板，以便將來使用，選擇 yue即可。

至此，它會在用戶文件夾里創建一個隱藏文件 .vuerc 

今后再創建項目就會多一個模板了：

如果想刪除我們自定義的腳手架模板，打開上面那個.vuerc文件，刪除相應的配置即可 （藍色部分是我創建的模板）

 

 三、安裝第三方插件，以往安裝插件時直接在當前項目執行 npm install axios 即可

　　現在我們安裝一個最新的基於vue的UI框架，類似於Element UI，執行 vue add vuetify ，它的官網：https://vuetifyjs.com/zh-Hans/ 

　　這樣添加的UI插件可以影響到項目中已存在的所有組件和頁面中（即：更改我們的HTML 結構）當然也可以用npm install ‘xxx’ 來安裝。

四、運行獨立的 .vue 文件。意識就是一個.vue文件相當於一個.html 頁面，可以獨立於腳手架單獨運行。

　　在根目錄下創建 Hello.vue 文件，全局安裝 npm install -g @vue/cli-service-global，安裝后運行 vue server Hello.vue  即可。

 五、基本port配置及 跨域請求配置。

新建vue.config.js 文件,自定義webpack默認的配置。

const goods = require('./data/goods.json');
const ratings = require('./data/ratings.json');
const seller = require('./data/seller.json');

module.exports = {
    baseUrl: '/', // 根路徑
    outputDir: 'dist', // 構建輸出目錄
    assetsDir: 'assets', // 靜態資源目錄(js,css,img,fonts)
    lintOnSave: false, // 是否開啟eslint保存檢測, 有效值: true || false || 'error'
    devServer:{
        open: true, //項目啟動后是否自動打開瀏覽器
        host: 'localhost',  //主機
        port: 8081, //端口
        // port:"0.0.0.0", //手機真機測試端口
        https: false,
        hotOnly: false, //是否還需要熱更新
        proxy: {
            // 配置跨域
            '/api': {
                target: 'http//localhost:5000/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        // 請求本地數據，測試跨域
        before(app) {
            // http://localhost:8081/api/goods
            app.get('/api/goods', (req, res) => {
                res.json(goods);
            });
            // http://localhost:8081/api/ratings
            app.get('/api/ratings', (req, res) => {
                res.json(ratings);
            });
            // http://localhost:8081/api/seller
            app.get('/api/seller', (req, res) => {
                res.json(seller);
            });
        }
    }
}