vue-cli V3.0版本

vue-cli 3.0版本

目前官網上還不是3.0版本，因此須要在github上面學習使用：
github網站：https://github.com/vuejs/vue-cli/tree/dev/docs

一、項目搭建

（1）、在上面的GitHub網頁中，拉到底部能夠看到：

而後在全局中執行命令：

sudo npm install -g @vue/cli便可。

最後，

vue -V  //能夠查看到當前的vue是3.0版本了

（2）、查看vue 相關指令

vue --help

查看到的經常使用指令:

-V：查看版本號
-h:

create:建立一個項目
add: 在項目中建立插件（至關於以前的 "npm install"）
invoke:在已建立好的項目中調用插件
inspect：檢查webpack配置
serve:開發環境——npm run serve（至關於以前的npm run dev）
build:生產環境，打包上線的
ui:調用一個ui庫

（3）、建立項目

//執行：
vue create vue2-demo

在下面的選項中選擇Manually select features,點擊enter後，在顯示的列表中經過上下鍵+空格選擇須要的插件。下面根據須要選擇便可。

（4）、依次按照下面的步驟建立一個專屬的腳手架，這樣下次建立項目的時候就能直接使用「testnewcli」這個腳手架了。

二、添加插件（新版本提供的添加方法）

/添加插件的新方法：vue add
vue add vuetify

注：若是咱們安裝的是模塊依賴，建議使用npm install ;若是安裝的是組件UI，可能會對當前的頁面UI有影響的狀況下，就使用vue add方法安裝。

好比上面的vuetify是一個vue的UI庫，會對頁面結構佈局產生影響，因此使用vue add 方法；好比咱們安裝axios插件，就是用npm install axios就能夠了。

三、全局環境變量

(1)、建立".env"文件:

(2)、在組件中使用全局變量

<template>
  <div>
    <h1>{{url}}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
    //調用全局的環境配置
      url: process.env.VUE_APP_URL
    };
  }
};
</script>

四、獨立運行.vue文件

如上圖中，在根目錄下建立的"hello.vue"文件如何獨立運行起來呢？（不依賴腳手架）

//可行方案：安裝插件
sudo npm install -g @vue/cli-service-global

//以後執行命令：
vue serve hello.vue

//這樣就能夠在瀏覽器看到hello.vue相對應的頁面了

五、配置的基礎路徑（vue.config.js）

根目錄建立文件"vue.config.js",

//vue.config.js中配置
module.exports = {
    baseUrl: "/", //根路徑
    outputDir: "dist", //構建輸出目錄，執行：npm run build後項目打包在dist文件下
    assetsDir: "assets", //靜態資源目錄（js,css,img,fonts）
    linitOnSave: false, //是否開啓eslint保存檢測，有效值:true || false || "error"
}

六、配置跨域請求

在vue.config.js中進行配置：

module.exports = {
    baseUrl: "/", //根路徑
    outputDir: "dists", //構建輸出目錄
    assetsDir: "assets", //靜態資源目錄（js,css,img,fonts）
    lintOnSave: false, //是否開啓eslint保存檢測，有效值:true || false || "error"
    devServer: {
        open: true, //瀏覽器自動打開頁面
        host: '127.0.0.0', //域名
        //host: "0.0.0.0", //若是是真機測試，就使用這個IP
        port: 8060,
        https: false,
        hotOnly: false, //熱更新（webpack已實現了，這裏false便可）
        proxy: {
            //配置跨域
            '/api': {
                target: "http://localhost:2020/api",
                ws:true,
                changOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

七、加載json數據

根目錄下建立data文件夾，裏面包含文件data.json，而後在vue.config.js文件中進行配置。

const goods = require("./data/goods.json");
module.exports = {
    baseUrl: "/", //根路徑
    outputDir: "dists", //構建輸出目錄
    assetsDir: "assets", //靜態資源目錄（js,css,img,fonts）
    lintOnSave: false, //是否開啓eslint保存檢測，有效值:true || false || "error"
    devServer: {
        open: true, //瀏覽器自動打開頁面
        host: 'localhost', //域名
        port: 8060,
        https: false,
        hotOnly: false, //熱更新（webpack已實現了，這裏false便可）
        //加載本地josn數據
        //參見webpack官網：https://webpack.docschina.org/configuration/dev-server/#devserver-before
        before(app) {
            //http://localhost:8090/myapi/goods
            app.get("/myapi/goods", (req, res) => {
                res.json(goods);
            })
        }
    }
}