vue-cli 基本配置

在vue3.0开始普及的时候，同时也收到了消息得知，从前使用vue2.0的各种依赖包在今后的更新中不再适用老版的vue，因此在新的项目中使用了vue3.0版本，以下是配置vue3.0的基础功能

安装

一、 安装vue3.0

npm install -g @vue/cli

or

yarn global add @vue/cli

查看版本：vue -V 显示应该是3.0以上的版本

二、创建项目

2.1 代码创建

vue create XXX(项目名称)



default 是 使用默认配置

Manually select features 是 自定义配置

2.2 界面创建

vue ui 自动打开浏览器显示界面(部分浏览器不支持显示)

创建新项目：

使用

通过：npm run serve启动程序

一、 vuex的使用

1.1 依照2.0的使用方法：

根据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: '' // 这是一个测试数据
}
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 -------- 将对应的四个文件进行整合

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
});

二、跳转

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

(在安装项目时，如果手动选择了router，不需要手动添加声明)

三、 数据请求

这里采用的是2.0的数据请求模式：

3.1 将2.0框架中services文件夹复制到src文件夹下。

3.2 下载对应的ajax依赖。

cnpm install axios --save

3.3 新建目录services

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

import axios from 'axios';
import baseUrl from '../config'; // 这里设置了一个文件作为所有请求的基础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) {
  // 预处理请求错误（error）
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 预处理响应数据（response）如果数据当中有不要的部分，就截留
  // console.log(response)
  return response;
}, function (error) {
  // 预处理响应错误（error)
  // alert(error);
  return Promise.reject(error);
});

export default function(url, {
  // 不传时，默认参数
  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当中可以修改，请求目标服务器域名配置，结合我们自己的项目，在项目放置到服务器上时，就是将域名替换成192.168.1.3
    data: data,
    canelToken: cancelToken, // 关闭请求
    headers: headers,
    responseType: responseType
  };
  return axios(config);
}

config.js

// 请求目标服务器域名配置
const DOMAIN_NAME = {
  URL_CNODEJS: 'http://192.168.1.155:8040' // 测试环境
};
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项目中已经没有config文件夹，需要在根目录下创建vue.config.js进行打包路径的设置：

网上有很多推荐的配置，大家可以随便找一个配置文件进行测试，我用了以下文件：

module.exports = {
  baseUrl: './',
  outputDir: 'dist',
  lintOnSave: true,
  runtimeCompiler: true, //关键点在这
  // 调整内部的 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中已经配好的@路径)