Vue-cli 3.0自定義腳手架

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

能夠看到我電腦上如今的腳手架版本是：

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

 2、咱們建立一個項目目錄 執行如下命令：

　　vue create 「目錄名」

會出現以下：

咱們選擇第二個便可。

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

 

 繼續：

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

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

從此再建立項目就會多一個模板了：

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

 

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

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

　　這樣添加的UI插件能夠影響到項目中已存在的全部組件和頁面中（即：更改咱們的HTML 結構）固然也能夠用npm install ‘xxx’ 來安裝。

4、運行獨立的 .vue 文件。意識就是一個.vue文件至關於一個.html 頁面，能夠獨立於腳手架單獨運行。

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

 5、基本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);
            });
        }
    }
}