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,      // 暂时关闭 eslintassetsDir: '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'
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637075.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PLC物联网网关BL104实现PLC协议转MQTT、OPC UA、Modbus TCP

随着物联网技术的迅猛发展&#xff0c;人们深刻认识到在智能化生产和生活中&#xff0c;实时、可靠、安全的数据传输至关重要。在此背景下&#xff0c;高性能的物联网数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于工业自动化和数字化工厂应用环境中。 无缝衔…

React16源码: React中的updateMode的源码实现

updateMode 1 ) 概述 Mode 组件是 react提供给我们的原生组件 一共有两个: ConcurrentMode 和 StrictMode对于这两个 Mode 的更新过程最终调用的都是 updateMode 的方法它们执行的过程非常的简单&#xff0c;就是通过 reconcileChildren 去创建children就可以了 2 &#xff…

IGBT工作原理

IGBT&#xff08;绝缘栅双极型晶体管) 在实际应用中最流行和最常见的电子元器件是双极结型晶体管 BJT 和 MOS管。 IGBT实物图电路符号图 你可以把 IGBT 看作 BJT 和 MOS 管的融合体&#xff0c;IGBT具有 BJT 的输入特性和 MOS 管的输出特性。 与 BJT 或 MOS管相比&#xff0c;…

如何探究大模型理论?UCLA最新《深度学习统计理论》综述,详述近似、训练动力学和生成模型

在这篇文章中&#xff0c;我们从三个角度回顾了神经网络的统计理论文献。在第一部分中&#xff0c;我们回顾了非参数框架下关于神经网络的过度风险&#xff08;excess risks&#xff09;的研究成果&#xff0c;这些成果适用于回归或分类。这些结果依赖于神经网络的显式构造&…

Spring Boot 3.2.2整合MyBatis-Plus 3.5.5依赖不兼容问题

问题演示 导依赖 当你启动项目就会 抛出该异常 java.lang.IllegalArgumentException: Invalid value type for attribute factoryBeanObjectType: java.lang.String 问题原因 mybatis-plus 中 mybatis 的整合包版本不够导致的 解决方案 排除掉mybatis-plus 中 mybatis 的整合…

Cortex-M3/M4内核中断及HAL库函数详解(1):中断相关寄存器

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; Cortex M3与M4权威指南 stm32f407的HAL库工程 STM32F4xx中文参考手册 1 NVIC相关寄存器介绍 在Cortex-M3/M4内核上搭载了一个异常响应系统&#xff0c;支持为数众多的系统异常和外部中断。其中&#…

【STL-vector】

vector构造函数vector赋值操作vector容量和大小vector插入和删除数据存取互换容器&#xff0c;实现两个容器内元素的互换&#xff0c;具有收缩内存的作用vector预留空间reserve&#xff0c;减少vector在动态拓展容量时的拓展次数 #include<iostream> #include<vector…

vite和mockjs配合使用

vite mockjs 当后端还没准备完成之前&#xff0c;前端可以使用 mock 模拟后端响应&#xff0c;提高开发效率 1、安装插件 使用 vite-plugin-mock 插件&#xff0c;配合mockjs完成项目的 mock 配置 npm install mockjs vite-plugin-mock2、vite配置插件 在 vite.config.js…

聊聊PowerJob的AliOssService

序 本文主要研究一下PowerJob的AliOssService DFsService tech/powerjob/server/extension/dfs/DFsService.java public interface DFsService {/*** 存储文件* param storeRequest 存储请求* throws IOException 异常*/void store(StoreRequest storeRequest) throws IOEx…

C - Monotonically Increasing

很妙的dfs&#xff1a;记录层数以及前一个数是多少。 代码&#xff1a; int ans[11]; int n,m;void dfs(int u,int pre){if(un1){for(int i1;i<n;i)cout<<ans[i]<< ;cout<<endl;return;}for(int ipre1;i(n-u)<m;i){ans[u]i;dfs(u1,i);} }void solve(…

Linux问题 apt-get install时 无法解析域名“cn.archive.ubuntu.com”

问题描述: 在安装程序时会出现无法解析域名的错误 解决办法: 1、编辑文件 sudo vim /etc/resolv.conf 2、在最后加上(按键 i 进入编辑模式) nameserver 8.8.8.8 3、保存退出(:wq)

Upload靶场通关教程(旧版20关)

文件上传类型&#xff1a; 前端验证&#xff1a;1 MIME类型验证&#xff1a;2 黑名单验证&#xff1a;3~10&#xff0c;19 大小写绕过、空格绕过、解析后缀数字绕过、点绕过、/绕过、::$DATA绕过 白名单验证&#xff1a;11~18&#xff0c;20 %00截断、二次渲染、文件包含、…

网络安全B模块(笔记详解)- Apache安全配置

1.打开服务器场景(A-Server),通过命令行清除防火墙规则。在服务器场景上查看apache版本,将查看到的服务版本字符串完整提交; 2.检测服务器场景中此版本apache是否存在显示banner信息漏洞,如果验证存在,修改配置文件将此漏洞进行加固,并重启Apache服务,将此加固项内容…

力扣每日一练(24-1-20)

大脑里的第一想法是排列组合&#xff0c;直接给出超级准确的最优解。 但不适用&#xff0c;hhh 只要连续的n个元素大于或者等于target就可以了 题目比自己想象的要好解决 解法是使用滑动窗口算法。这个算法的基本思想是维护一个窗口&#xff0c;使得窗口内的元素总和大于等于目…

代码随想录算法训练营第二十五天| 216.组合总和III、17.电话号码的字母组合

216.组合总和III 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 解题思路&#xff1a;依旧是正常遍历&#xff0c;过程中记录遍历的所有节点之和&#xff0c;如果当前元素之和已经大于所给定的值&#xff0c;退回上一节点 ja…

算法常用思路总结

思路 1. 求数组中最大最小值思路代码 2. 计算阶乘思路&#xff1a;代码&#xff1a; 3. 得到数字的每一位思路代码 4. 计算时间类型5. 最大公约数、最小公倍数6. 循环数组的思想题目&#xff1a;猴子选大王代码 补充经典例题1. 复试四则运算题目内容题解 2. 数列求和题目内容题…

专升本-拓展部分-信息安全

信息安全&#xff1a; 1.信息本身的安全&#xff0c;也是信息安全的基本属性&#xff1a;保密性&#xff0c;完整性&#xff0c;可用性 信息本身的安全是指保证信息的保密性&#xff08;非授权用户不能访问信息&#xff09;&#xff0c;完整性&#xff08;信息正确&#xff0c…

Pytest 测试框架与Allure 测试报告——Allure2测试报告-L3

目录&#xff1a; allure2报告中添加附件-图片 Allure2报告中添加附件Allure2报告中添加附件&#xff08;图片&#xff09;应用场景Allure2报告中添加附件&#xff08;图片&#xff09;-Python代码示例&#xff1a;allure2报告中添加附件-日志 Allure2报告中添加附件&#xff…

Flink处理函数(3)—— 窗口处理函数

窗口处理函数包括&#xff1a;ProcessWindowFunction 和 ProcessAllWindowFunction 基础用法 stream.keyBy( t -> t.f0 ).window( TumblingEventTimeWindows.of(Time.seconds(10)) ).process(new MyProcessWindowFunction()) 这里的MyProcessWindowFunction就是ProcessWi…

《WebKit 技术内幕》之五(4): HTML解释器和DOM 模型

4 影子&#xff08;Shadow&#xff09;DOM 影子 DOM 是一个新东西&#xff0c;主要解决了一个文档中可能需要大量交互的多个 DOM 树建立和维护各自的功能边界的问题。 4.1 什么是影子 DOM 当开发这样一个用户界面的控件——这个控件可能由一些 HTML 的标签元素…