Template -- Vue2

Vue2

版本

• Node 14.14.0
• Npm 6.14.8
• Vue @vue/cli 5.0.3
  • npm install -g @vue/cli@5.0.3
• cnpm cnpm@7.1.0
  • npm install -g cnpm@7.1.0 --registry=https://registry.npm.taobao.org

项目

创建

vue create single         # vue 2.6.14

配置

// vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,      // 暂时关闭 eslint
    assetsDir: 'static',    // 静态资源打包存储文件夹
    devServer: {
        port: 3030, //端口号
        open: true, //自动打开浏览器
    }
});

环境区分

• vue.config.js 同级创建文件
• .env.test

NODE_ENV = "test"
VUE_APP_TITLE = "测试"
VUE_APP_URL = "test"

• .env.production

NODE_ENV = "production"
VUE_APP_TITLE = "生产"
VUE_APP_URL = "production"

• index.html

<title> <%= process.env.VUE_APP_TITLE %></title>

• package.json

{

  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve --mode test",
    "serve1": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode test",
    "build1": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  }
}

UI

cnpm install element-ui@2.15.14

• main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Sass / Scss

cnpm install node-sass@6.0.0 --save-dev
cnpm install sass-loader@11.1.0 --save-dev
cnpm install style-loader@3.3.4 --save-dev

• 使用

<style lang="scss">
.iiii{
  .sss{
    color: red;
  }
}
</style>

axios

• src/http/index.js

import axios from "axios";

let service = axios.create({
  // baseURL: "https://cnodejs.org/api/v1", //相同绝对路径
  baseURL: process.env.VUE_APP_URL, //相同绝对路径
  timeout: 100000, //超过这么多时间，则请求终止
  headers: {
    //请求头携带数据的格式
    "Content-Type": "application/json;charset=UTF-8",
    // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
  },
});
// 添加请求拦截器（Interceptors）
service.interceptors.request.use(
  function (config) {
    // 发送请求之前做写什么
    let token = localStorage.getItem("token");
    // 如果有
    if (token) {
      // 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）
      config.headers.authorization = token;
    }
    return config;
  },
  function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

• src/http/api.js

import request from "./index";

export async function Ceshi(params) {
    return request({
      url: "/topics",
      method: "GET",
      params,
    });
  }
  export async function Ceshi2(data) {
    return request({
      url: "/Storage/GetStorageLack",
      method: "POST",
      data,
    });
  }

• 使用

<script>
import { Ceshi } from "@/http/api";
export default {
  async created() { 
    var a = await Ceshi();
    console.log(a);
  },
};
</script>

router

cnpm i vue-router@3 

• src/router/index.js

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

Vue.use(Router);

//配置路由
const router = new Router({
  // mode: "history",
  mode: "hash",
  routes: [
    {
      path: "/",
      name: "Cs",
      component: () => import("@/view/c.vue"),
    },
  ],
});

//导出
export default router;

• main.js

import router from './router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

• App.vue

<router-view></router-view>

vuex

cnpm install vuex@3

• src/store/modules/c1.js

export default {
  namespaced: true,
  state: {
    c1: [
      {
        id: "01001",
        name: "如何",
      },
      {
        id: "01002",
        name: "如何学好编程",
      },
    ],
  },
  mutations: {},
  actions: {},
};

• src/store/index.js

import Vue from "vue";
import Vuex from "vuex";
import c1 from "./modules/c1";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    c1: c1,
  },
  state: {
    id: "01",
  },
  mutations: {},
});

• main.js

import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Vue2 多模块打包

• .env.test

MODEL_NAME = "test"

• .env.production

MODEL_NAME = "test1"

• vue.config.js

let modelName = process.env.MODEL_NAME || "";
let outputDir = modelName ? `dist/${modelName}/` : "dist/";
const config = {
  test: {
    pages: {
      index: {
        filename: "index.html",
        entry: "src/main.js",
        template: "public/index.html"
      }
    },
    devServer: {
      port: 3032, //端口号
      open: true, //自动打开浏览器
    }
  },
  test1: {
    pages: {
      index: {
        filename: "index.html",
        entry: "src/main.js",
        template: "public/index.html"
      }
    },
    devServer: {
      port: 3030, //端口号
      open: true, //自动打开浏览器
    }
  },
};

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false, //暂时关闭 eslint
    ...config[modelName],
    outputDir: outputDir,       // 项目输出目录
    assetsDir: 'static'
});