When vue3.0 became popular, we also received news that the old version of Vue will not be applicable to all kinds of dependency packages that used vue2.0 in future updates. Therefore, vue3.0 version is used in the new project. Here are the basic functions to configure vue3.0

install

Installation of vue3.0

npm install -g @vue/cli

or

yarn global add @vue/cli

View version: vue-V display should be more than 3.0 version

II. Creating Projects

2.1 Code Creation

Vue create XXX (project name)



Default is the default configuration

Manual select features are custom configurations

2.2 Interface Creation

vue ui automatically opens browser display interface (some browsers do not support display)

Create new projects:

Use

Start the program by:npm run serve r

I. Use of vuex

1.1 According to the usage of 2.0:

According to the original method of 2.0, vuex is divided into four files: state.js, mutation.js, getter.js and action.js to modify vuex.

Declare store in main.js to facilitate global reference:

import store from "./store/index";

Vue.prototype.$store = store;

Writing method is the same as 2.0 method.

1.2 According to the usage method of 3.0:

Principle: Equivalent to 2.0, only four files are put together, which can be split or modified directly.

state.js:

const state = {
    test: '' // This is a test data.
}
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 - --- Integrating the four corresponding files

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

2. Jump

Also declare in the main.js file: import router from "./router";

(When installing a project, if router is selected manually, there is no need to add declarations manually)

Data Request

Here we use the data request mode of 2.0:

3.1 Copies the services folder in the 2.0 framework to the src folder.

3.2 Download the corresponding ajax dependencies.

cnpm install axios --save

3.3 New Directory services

Configuring axios files - - - solved front-end cross-domain

import axios from 'axios';
import baseUrl from '../config'; // Here a file is set as the base ip address for all requests

// Add request interceptor
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 parametric serialization
    // console.log(config.data);
    // config.data = Qs.stringify(config.data);
    // config.data = Qs.stringify(config.data);
  }
  return config;
}, function (error) {
  // Preprocessing request error
  return Promise.reject(error);
});

// Add Response Interceptor
axios.interceptors.response.use(function (response) {
  // Pre-processing response data intercepts if there is an unnecessary part of the data
  // console.log(response)
  return response;
}, function (error) {
  // Preprocessing response error
  // alert(error);
  return Promise.reject(error);
});

export default function(url, {
  // Default parameters when not transmitted
  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, // If the URL is complete and contains the domain name, the domain name below will not be stitched together.
    baseURL: baseUrl.URL_CNODEJS, // The domain name can be modified in the config.js of the outermost layer, requesting the domain name configuration of the target server, combining with our own project, when the project is placed on the server, it is to replace the domain name with 192.168.1.3.
    data: data,
    canelToken: cancelToken, // Close the request
    headers: headers,
    responseType: responseType
  };
  return axios(config);
}

config.js

// Request target server domain name configuration
const DOMAIN_NAME = {
  URL_CNODEJS: 'http://192.168.1.155:8040'// Test Environment
};
export default DOMAIN_NAME;

server.js - - In the same directory as the axios file, write all requests here

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

3.4 Introduced in main.js file:

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

Vue.prototype.$server = server;

3.5 Use

this.$server.getTest().then((res) => { // Request testing
  console.log(res.data)
}).catch(err => {
  console.log(err.message);
})

Packing

Since there is no config folder in the vue-cli project, it is necessary to create vue.config.js under the root directory to set the packing path:

There are many recommended configurations on the Internet. You can easily find a configuration file for testing. I used the following files:

module.exports = {
  baseUrl: './',
  outputDir: 'dist',
  lintOnSave: true,
  runtimeCompiler: true, //The key point is here.
  // Adjust the internal web pack configuration.
  // See https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // Configure the webpack-dev-server behavior.
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // See https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md# Configuration Agent
    proxy: null, // string | Object
    before: app => {}
  }
}

V. Remarks

Path: @ denotes the @path in the src folder (/ node_modules/@vue/cli-service/lib/config/base.js)