vue-cli 基本配置

sunnyxd 發(fā)布于2019-08-02 15:37 / 2605人閱讀

摘要：在中聲明，方便全局引用書寫方法同方法一致。查閱配置行為。查閱配置代理五備注路徑表示文件夾中已經(jīng)配好的路徑

在vue3.0開始普及的時候，同時也收到了消息得知，從前使用vue2.0的各種依賴包在今后的更新中不再適用老版的vue，因此在新的項目中使用了vue3.0版本，以下是配置vue3.0的基礎(chǔ)功能

安裝

一、安裝vue3.0

npm install -g @vue/cli

yarn global add @vue/cli

查看版本：vue -V 顯示應(yīng)該是3.0以上的版本

二、創(chuàng)建項目

2.1 代碼創(chuàng)建

vue create XXX(項目名稱)



default 是 使用默認(rèn)配置

Manually select features 是 自定義配置

2.2 界面創(chuàng)建

vue ui 自動打開瀏覽器顯示界面(部分瀏覽器不支持顯示)

創(chuàng)建新項目：

使用

通過：npm run serve啟動程序

一、 vuex的使用

1.1 依照2.0的使用方法：

根據(jù)2.0的原始方法，將vuex分為state.js、mutation.js、getter.js、action.js四個文件進行vuex的修改。

在main.js中聲明store，方便全局引用：

import store from "./store/index";

Vue.prototype.$store = store;

書寫方法同2.0方法一致。

1.2 按照3.0的使用方法：

原理：等同于2.0，只是將4個文件放在了一起，可進行拆分或者直接修改文件。

state.js:

const state = {
    test: "" // 這是一個測試數(shù)據(jù)
}
export default state;

mutation.js

const mutations = {
    changeTest(state, payload) {
    state.test = payload.test;
  }
}
export default mutations;

getter.js

const getters = {
    getTest(state) {
    return state.test;
  }
}
export default getters;

action.js

const actions = {
    changeTest(store, payload) {
    store.commit({
      type: "changeTest",
      test: payload
    })
  }
}
export default actions;

index.js -------- 將對應(yīng)的四個文件進行整合

import Vue from "vue";
import Vuex from "vuex";
import actions from "./action";
import getters from "./getter";
import mutations from "./mutation";
import state from "./state";

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations
});

二、跳轉(zhuǎn)

同樣在main.js文件中聲明：import router from "./router";

(在安裝項目時，如果手動選擇了router，不需要手動添加聲明)

三、數(shù)據(jù)請求

這里采用的是2.0的數(shù)據(jù)請求模式：

3.1 將2.0框架中services文件夾復(fù)制到src文件夾下。

3.2 下載對應(yīng)的ajax依賴。

cnpm install axios --save

3.3 新建目錄services

配置axios文件 ------- 已解決前端跨域

import axios from "axios";
import baseUrl from "../config"; // 這里設(shè)置了一個文件作為所有請求的基礎(chǔ)ip地址

// 添加請求攔截器
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.interceptors.request.use(function (config) {
  if (config.method === "post" || config.method === "put" || config.method === "delete") {
    // POST傳參序列化
    // console.log(config.data);
    // config.data = Qs.stringify(config.data);
    // config.data = Qs.stringify(config.data);
  }
  return config;
}, function (error) {
  // 預(yù)處理請求錯誤（error）
  return Promise.reject(error);
});

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 預(yù)處理響應(yīng)數(shù)據(jù)（response）如果數(shù)據(jù)當(dāng)中有不要的部分，就截留
  // console.log(response)
  return response;
}, function (error) {
  // 預(yù)處理響應(yīng)錯誤（error)
  // alert(error);
  return Promise.reject(error);
});

export default function(url, {
  // 不傳時，默認(rèn)參數(shù)
  method = "get",
  timeout = 180000,
  data = {},
  cancelToken = "",
  headers = {"Content-Type": "application/json"},  // application/x-www-form-urlencoded;charset=UTF-8;
  responseType = "json"
}) {
  const config = {
    method: method,
    timeout: timeout,
    url: url, // 如果URL是完整的，包含域名，則下方的域名不會被拼接
    baseURL: baseUrl.URL_CNODEJS, // 域名，在最外層的config.js當(dāng)中可以修改，請求目標(biāo)服務(wù)器域名配置，結(jié)合我們自己的項目，在項目放置到服務(wù)器上時，就是將域名替換成192.168.1.3
    data: data,
    canelToken: cancelToken, // 關(guān)閉請求
    headers: headers,
    responseType: responseType
  };
  return axios(config);
}

config.js

// 請求目標(biāo)服務(wù)器域名配置
const DOMAIN_NAME = {
  URL_CNODEJS: "http://192.168.1.155:8040" // 測試環(huán)境
};
export default DOMAIN_NAME;

server.js ----- 跟axios文件同目錄,將所有請求寫在這里

import axios from "../services/axios";
const server = {
  getTest() {
    return axios("bservice/test", {
      method: "get"
    })
  }
}
export default server;

3.4 在main.js文件引入：

import server from "../src/services/server";

Vue.prototype.$server = server;

3.5 使用

this.$server.getTest().then((res) => { // 請求測試
  console.log(res.data)
}).catch(err => {
  console.log(err.message);
})

四、打包

由于vue-cli項目中已經(jīng)沒有config文件夾，需要在根目錄下創(chuàng)建vue.config.js進行打包路徑的設(shè)置：

網(wǎng)上有很多推薦的配置，大家可以隨便找一個配置文件進行測試，我用了以下文件：

module.exports = {
  baseUrl: "./",
  outputDir: "dist",
  lintOnSave: true,
  runtimeCompiler: true, //關(guān)鍵點在這
  // 調(diào)整內(nèi)部的 webpack 配置。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // 配置 webpack-dev-server 行為。
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8080,
    https: false,
    hotOnly: false,
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {}
  }
}

五、備注

路徑：@表示src文件夾(/node_modules/@vue/cli-service/lib/config/base.js中已經(jīng)配好的@路徑)