Vue Cli3使用

安裝

解除安裝舊版本

npm uninstall vue-cli -g
# OR 
yarn global remove vue-cli           

複制

安裝新版本

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

複制

檢查其版本是否正确 (3.x)

vue --version           

複制

建立項目

使用控制台建立

vue create hello-world           

複制

使用圖形化界面建立

vue ui           

複制

拉取 2.x 模闆 (舊版本)

Vue CLI 3 和舊版使用了相同的

vue

指令，是以 Vue CLI 2 (

vue-cli

) 被覆寫了。如果你仍然需要使用舊版本的

vue init

功能，你可以全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運作效果将會跟 `[email protected]` 相同
vue init webpack my-project           

複制

運作項目

npm run serve           

複制

Invalid Host/Origin header

運作項目後 在浏覽器的控制台報錯

Invalid Host/Origin header

解決方法：

在項目的根目錄建立一個

vue.config.js

檔案

module.exports = {
    devServer: {
        disableHostCheck: true, //  新增該配置項
    }
}           

複制

使用者的配置檔案會和預設的配置檔案合并 是以不用擔心系統預設配置要再配置一遍

HTTP請求

安裝

npm install --save axios vue-axios           

複制

main.js

中添加

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)           

複制

然後頁面中就可以這樣請求

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})           

複制

其實 上面的就相當于

安裝

npm install --save axios           

複制

main.js

中添加

import axios from 'axios'

Vue.prototype.axios = axios;           

複制

然後頁面中就可以這樣請求

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})           

複制

跨域通路

在項目的根目錄建立一個

vue.config.js

檔案

module.exports = {
    devServer: {
        disableHostCheck: true, //  新增該配置項
        proxy: {
            '/psvmc': {
                target: 'http://www.psvmc.cn',   //代理接口
                changeOrigin: true,
                pathRewrite: {
                    '^/psvmc': ''    //代理的路徑
                }
            }
        }

    }
};           

複制

假如我們請求這樣寫

this.axios
    .get('/psvmc/userlist.json')
    .then(function (data) {
        console.info(data);
    })           

複制

就能在本地請求到

http://www.psvmc.cn/userlist.json

了

Cookies

用VueX來緩存登入使用者的時候，如果頁面重新整理後，VueX的緩存也會清空 ，是以我們還得用Cookie來儲存

• 官方文檔

安裝

npm install vue-cookies --save           

複制

配置

import Vue from "vue";
import VueCookies from 'vue-cookies'

Vue.use(VueCookies);

Vue.prototype.$mycookie = {
    addcookie: function (key, value) {
        var host = window.location.host;
        if (host.indexOf("xhkjedu") !== -1) {
            window.$cookies.set(key, value, '7d', '/', '.xhkjedu.com', false);
        } else {
            window.$cookies.set(key, value, '7d', '/');
        }
    },
    delcookie: function (key) {
        window.$cookies.remove(key);
    },
    getcookie: function (key) {
        return window.$cookies.get(key);
    }
};           

複制

使用

this.$mycookie.addcookie("loginuser",JSON.stringify(data.obj));           

複制

我這裡封裝是為了設定開發和上線後的域不同，是以封裝了一下

修複eslint代碼

npm run lint --fix           

複制