vue-cli3 创建vue2项目

1、安装 npm

node.js 官网：https://nodejs.org/en/
下载 node.js，然后安装

1.1、查看 node 和 npm 版本

node -v
npm -v

如果 npm 不是最新版，使用npm install -g npm更新到最新版

1.2、切换 npm 国内源

# 切换命令
npm config set registry https://registry.npm.taobao.org
# 检测是否修改成功
npm config get registry
# 切换回国外源
npm config set registry https://registry.npmjs.org/

2、项目初始化

2.1、安装 vue-cli

npm install -g @vue/cli

2.2、创建项目

vue create 项目名

2.3、启动项目

npm run server

2.4、打包项目

npm run build

3、封装常用组件

3.1、封装axios

import axios from "axios";

// 实例化axios
const instance = axios.create({
    baseURL: "http://baseurl.com/",
    timeout: 60000
});

// 配置请求拦截器
instance.interceptors.request.use(function(config) {
    // 这里可以修改或者添加请求头，config.headers
    return config;
}, function(error) {
    return Promise.reject(error);
});

// 配置响应拦截器
instance.interceptors.response.use(function(response) {
    // 这里统一处理响应
    return response;
}, function(error) {
    return Promise.reject(error);
});


// 封装 get 方法
function get(url, data) {
    return instance({
        method: "get",
        url: url,
        params: data
    })
}


// 封装 post 方法
function post(url, data) {
    return instance({
        method: "post",
        url: url,
        data: data
    })
}


// 导出封装的方法
export default {
    get,
    post
}

3.2、封装vuex组件

Getters、Actions、Modules、Mutations等方法可以在单独文件里定义，并导入到封装的vuex里进行集成

import Vue from "vue";
import Vuex from "vuex";


VUe.use(Vuex);

// 存放 state
const state = function() {
  return {}
}

// 存放 Mutations 方法
const mutations = function() {
  return {}
}

// 还可以单独定义 Getters、Actions、Modules

const store = new Vuex.Store({
  state,
  mutations
})


export default store;

3.3、封装 router

import Vue from "vue";
import VueRouter from "vue-router";


Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "index",
    meta: {title: "首页"},
    component: () => import("../pages/index/Index")
  }
];


const router = new VueRouter({
  routes: routes
});

// 前置守卫
router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
})

// 后置守卫
router.afterEach((to, from) => {
  ......
})