当前位置: 首页 > news >正文

从零创建vue+elementui+sass+three.js项目

初始化:

vue init webpack projectname
cd projectname
npm install

支持sass:

npm install sass --save-dev
npm install sass-loader@7.1.0 --save-dev
npm install node-sass@4.12.0 --save-dev

build/webpack.base.conf.js添加

rules: [...,{test: /\.scss$/,loaders: ['style', 'css', 'sass']}]

安装three.js:

npm install --save three@0.128.0

安装elementui:

npm i element-ui -S

安装vuex:

npm install vuex@3.1.0 --save

main.js初始化:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store';Vue.config.productionTip = falseimport ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})

vuex初始化:

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const state = {position: { x: 0, y: 0, z: 0 },rotation: { x: 0, y: 0, z: 0 },scale: { x: 1,y: 1,z: 1 }
}
const mutations = {SET_POSITION:(state, data) => {// console.log('SET_POSITION', state, data);state.positon = data;},SET_ROTATION:(state, data) => {// console.log('SET_ROTATION', state, data);state.rotation = data;},SET_SCALE:(state, data) => {state.scale = data;}
}
const actions = {}
const store = new Vuex.Store({state,mutations
});
export default store

打包后找不到js,css
全局搜索assetsPublicPath
在这里插入图片描述
打包后elementui的icon丢失问题(去掉limit限制):
在这里插入图片描述

相关文章:

从零创建vue+elementui+sass+three.js项目

初始化&#xff1a; vue init webpack projectnamecd projectnamenpm install支持sass: npm install sass --save-dev npm install sass-loader7.1.0 --save-dev npm install node-sass4.12.0 --save-devbuild/webpack.base.conf.js添加 rules: [...,{test: /\.scss$/,loade…...

Linux通过使用scp和sftp发送或拉取文件

在通过 telnet 登录到远程服务器之后&#xff0c;你无法直接使用 telnet 发送文件。telnet 是一个纯文本协议&#xff0c;不支持文件传输。要发送文件&#xff0c;你需要使用其他工具&#xff0c;如 scp 或 sftp。以下是使用这两种工具发送文件的方法&#xff1a; 使用 scp 发…...

Jtti:服务器总是自动重启怎么办?

服务器总是自动重启可能是由于多种原因引起的&#xff0c;包括硬件故障、软件问题、配置错误或环境因素。以下是一些常见原因和相应的解决方案&#xff1a; 1. 硬件问题 电源故障&#xff1a;电源供应不稳定或电源模块故障可能导致服务器重启。 解决方案&#xff1a;检查电源供…...

北京大学c++程序设计听课笔记101

基本概念 程序运行期间&#xff0c;每个函数都会占用一段连续的内存空间。而函数名就是该函数所占内存区域的起始地址&#xff08;也称“入口地址”&#xff09;。我们可以将函数的入口地址赋给一个指针变量&#xff0c;使该指针变量指向该函数。然后通过指针变量就可以调用这个…...

一键生成本地SSL证书:打造HTTPS安全环境

一键生成本地SSL证书&#xff1a;打造HTTPS安全环境 日光下的寒林没有一丝杂质&#xff0c;空气里的冰冷仿佛来自故乡遥远的北国&#xff0c;带着一些相思&#xff0c;还有细微几至不可辨认的骆驼的铃声。–《心美&#xff0c;一切皆美》 在本地开发环境中启用 HTTPS 一直是许多…...

Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了玩家属性栏&#xff0c;仓库&#xff0c;物品栏UI的制作 UI_StatSlot.cs 这个脚本是用来在Unity的UI上显示玩家属性&#xf…...

速盾:cdn 支持 php 吗?

在网络开发中&#xff0c;PHP 是一种广泛使用的服务器端脚本语言&#xff0c;用于创建动态网页和 web 应用程序。CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;在内容分发方面具有强大的功能&#xff0c;那么它是否支持 PHP 呢&#xff1f; C…...

在linux中使用nload实时查看网卡流量

在Linux系统中&#xff0c;可以使用多种工具来查看网卡流量。以下是一些常用的命令行工具&#xff1a; ifconfig&#xff1a;这是最基本的网络接口查看命令&#xff0c;但在最新的Linux发行版中&#xff0c;ifconfig命令已经被ip命令替代。 ip&#xff1a;用来查看和操作路由…...

【JavaEE进阶】Spring 事务和事务传播机制

目录 1.事务回顾 1.1 什么是事务 1.2 为什么需要事务 1.3 事务的操作 2. Spring 中事务的实现 2.1 Spring 编程式事务(了解) 2.2 Spring声明式事务 Transactional 对比事务提交和回滚的日志 3. Transactional详解 3.1 rollbackFor 3.2 Transactional 注解什么时候会…...

Flink1.19编译并Standalone模式本地运行

1.首先下载源码 2.本地运行 新建local_conf和local_lib文件夹&#xff0c;并且将编译后的文件放入对应的目录 2.1 启动前参数配置 2.1.2 StandaloneSessionClusterEntrypoint启动参数修改 2.1.3 TaskManagerRunner启动参数修改 和StandaloneSessionClusterEntrypoint一样修改…...

gitlab-development-kit部署gitlab《二》

gitlab-development-kit部署gitlab《一》 环境 mac 12.7.4 xcode 14.2 gdk 0.2.16 gitlab-foss 13.7 QA xcode源码安装 # https://crifan.github.io/xcode_dev_summary/website/xcode_dev/install_xcode/ # https://xcodereleases.comopenssl1.1 源码安装 # https://open…...

Java面试之多线程并发篇(3)

前言 本来想着给自己放松一下&#xff0c;刷刷博客&#xff0c;突然被几道面试题难倒&#xff01;SynchronizedMap和ConcurrentHashMap有什么区别&#xff1f;什么是线程安全&#xff1f;Thread类中的yield方法有什么作用&#xff1f;Java线程池中submit() 和 execute()方法有…...

任何使用 Keras 进行迁移学习

在前面的文章中&#xff0c;我们介绍了如何使用 Keras 构建和训练全连接神经网络&#xff08;MLP&#xff09;、卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;。本文将带你深入学习如何使用 迁移学习&#xff08;Transfer Learning&#…...

Mac 使用mac 原生工具将mp4视频文件提取其中的 mp3 音频文件

简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,获得过国家奖学金,有幸在竞赛中拿过一些国奖、省奖…已保研 学习经验:扎实基础 + 多做笔…...

【SQL】一文速通SQL

SQL知识概念介绍 1. Relation Schema vs Relation Instance 简单而言&#xff0c;Relation Schema 是一个表&#xff0c;有变量还有数据类型 R (A1, A2, … , An) e.g. Student (sid: integer, name: string, login: string, addr: string, gender: char) Relation insta…...

【学习】【HTML】块级元素,行内元素,行内块级元素

块级元素 块级元素是 HTML 中一类重要的元素&#xff0c;它们在页面布局中占据整行空间&#xff0c;通常用于创建页面的主要结构组件。 常见的块级元素有哪些&#xff1f; <div>: 通用的容器元素&#xff0c;常用于创建布局块。<p>&#xff1a;段落元素&#xf…...

握手协议是如何在SSL VPN中发挥作用的?

SSL握手协议&#xff1a;客户端和服务器通过握手协议建立一个会话。会话包含一组参数&#xff0c;主要有会话ID、对方的证书、加密算法列表&#xff08;包括密钥交换算法、数据加密算法和MAC算法&#xff09;、压缩算法以及主密钥。SSL会话可以被多个连接共享&#xff0c;以减少…...

机器学习 - 为 Jupyter Notebook 安装新的 Kernel

https://ipython.readthedocs.io/en/latest/install/kernel_install.html 当使用jupyter-notebook --no-browser 启动一个 notebook 时&#xff0c;默认使用了该 jupyter module 所在的 Python 环境作为 kernel&#xff0c;比如 C:\devel\Python\Python311。 如果&#xff0c…...

CTF攻防世界小白刷题自学笔记13

1.fileinclude,难度&#xff1a;1,方向&#xff1a;Web 题目来源:宜兴网信办 题目描述:无 给一下题目链接&#xff1a;攻防世界Web方向新手模式第16题。 打开一看给了很多提示&#xff0c;什么language在index.php的第九行&#xff0c;flag在flag.php中&#xff0c;但事情显…...

Rust 模板匹配——根据指定图片查找处于大图中的位置(支持GPU加速)

Rust 模板匹配——根据指定图片查找处于大图中的位置(支持GPU加速) 01 前言 在手搓RPA工具的时候,总会碰到不好定位的情况,那么,就需要根据小图来找到对应屏幕上的位置(以图识图),这个需求也比较简单。想到市面上也有不少RPA工具都有这个功能,那么人家有的,俺也可以…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...