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

news2024/11/12 19:44:30

初始化:

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 = false

import 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限制):
在这里插入图片描述

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

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

相关文章

Golang--网络编程

1、概念 网络编程&#xff1a;把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统&#xff0c;从而使众多的计算机可以方便地互相传递信息、共享数据、软件、数据信息等资源。 客户端&#xff08;Client&#xff09; 客户端是请求服务…

RNN(循环神经网络)详解

1️⃣ RNN介绍 前馈神经网络&#xff08;CNN&#xff0c;全连接网络&#xff09;的流程是前向传播、反向传播和参数更新&#xff0c;存在以下不足&#xff1a; 无法处理时序数据&#xff1a;时序数据长度一般不固定&#xff0c;而前馈神经网络要求输入和输出的维度是固定的&a…

Parallax.js:让智能设备视差效果更智能、更自然

今天给大家分享一款功能非常强大的javascript视觉差特效引擎插件&#xff1a;Parallax.js。 Parallax.js简介 Parallax.js是一个简单的&#xff0c;轻量级的视差引擎。你可以将它作为作为jQuery或Zepto插件来使用&#xff0c;也可以以纯JS的方式来使用。 最-最-最厉害的是它…

【三维重建】Semantic Gaussians:开放词汇的3DGS场景理解

文章目录 摘要一、引言二、主要方法1.3D Gaussian Splatting2.其他方法2.1 Gaussian Grouping&#xff08;ECCV 2024&#xff09;2.2 GARField 3. 2D Versatile 投影4. 3D Semantic Network4. 推理 四、实验1. 实验设置2.定量结果 论文&#xff1a;https://arxiv.org/pdf/2403.…

【功能介绍】信创终端系统上各WPS版本的授权差异

原文链接&#xff1a;【功能介绍】信创终端系统上各WPS版本的授权差异 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于信创终端操作系统上WPS Office各版本&#xff08;不包括政务版、企业版等&#xff09;之间的差异的文章。WPS Office作为国内广泛使用的办公软…

Elmo驱动器上位机软件的详细配置

续接上文,本文讲解Elmo驱动器上位机软件更详细的配置,重点关注,在电机的位置受到约束的情况下,完成驱动器的参数整定过程,以及一些调试方法 一 硬件介绍 本文使用的是另一套设备,假设电机的位置是受到约束的 1 编码器规格书 编码器已知信息是 :读数头是26位的,通讯…

「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用

本篇将带你实现一个番茄钟倒计时应用&#xff0c;用户可以设置专注时间和休息时间的时长&#xff0c;点击“开始专注”或“开始休息”按钮启动计时&#xff0c;应用会在倒计时结束时进行提醒。番茄钟应用对于管理时间、提升工作效率非常有帮助&#xff0c;并且还会加入猫咪图片…

SparkSql读取数据的方式

一、读取普通文件 方式一&#xff1a;给定读取数据源的类型和地址 spark.read.format("json").load(path) spark.read.format("csv").load(path) spark.read.format("parquet").load(path) 方式二&#xff1a;直接调用对应数据源类型的方法 …

模型训练中GPU利用率低?

买了块魔改华硕猛禽2080ti&#xff0c;找了下没找到什么测试显存的软件&#xff0c;于是用训练模型来测试魔改后的显存稳定性&#xff0c;因为模型训练器没有资源监测&#xff0c;于是用了Windows任务管理器来查看显卡使用情况&#xff0c;却发现GPU的利用率怎么这么低&#xf…

在gitlab,把新分支替换成master分支

1、备份master分支&#xff0c;可以打tag 2、删除master分支 正常情况下&#xff0c;master分支不允许删除&#xff0c;需要做两个操作才能删除 a、变更项目默认分支为非master分支&#xff0c;可以先随便选择 b、取消master为非保护分支 操作了上述两步&#xff0c;就可以删…

Transformer究竟是什么?预训练又指什么?BERT

目录 Transformer究竟是什么? 预训练又指什么? BERT的影响力 Transformer究竟是什么? Transformer是一种基于自注意力机制(Self-Attention Mechanism)的神经网络架构,它最初是为解决机器翻译等序列到序列(Seq2Seq)任务而设计的。与传统的循环神经网络(RNN)或卷…

UE5.4 PCG 自定义PCG蓝图节点

ExecuteWithContext&#xff1a; PointLoopBody&#xff1a; 效果&#xff1a;点密度值与缩放成正比

SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”

SLF4J常见问题 1、SLF4J简介2、SLF4J实现原理3、SLF4J常见问题 1、SLF4J简介 SLF4J&#xff08;Simple Logging Facade for Java&#xff09;是一个为Java程序提供日志输出的统一接口&#xff0c;并不具备具体的日志实现方案&#xff0c;类似JDBC&#xff0c;SLF4J只做两件事&a…

MySQL记录锁、间隙锁、临键锁(Next-Key Locks)详解

行级锁&#xff0c;每次操作锁住对应的行数据。锁定粒度最小&#xff0c;发生锁冲突的概率最低&#xff0c;并发度最高。 应用在InnoDB存储引擎中。InnoDB的数据是基于索引组织的&#xff0c;行锁是通过对索引上的索引项加锁来实现的&#xff0c;而不是对记录加的锁。 对于行…

前端-懒加载

目录 1.懒加载的概念 2.懒加载的特点 3.懒加载的实现原理 4.懒加载与预加载的区别 5.懒加载实现 6.预加载实现 1.懒加载的概念 懒加载也加延迟加载、按需加载&#xff0c;指在长网页中延迟加载图片数据&#xff0c;是一种较好的网页性能优化的方式。 2.懒加载的特点 &…

uniapp 实现瀑布流

效果演示 组件下载 瀑布流布局-waterfall - DCloud 插件市场

若依后端项目打包镜像部署

添加打包依赖 <build><finalName>${project.artifactId}</finalName><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><executions><executi…

使用Python实现音频降噪

在音频处理领域&#xff0c;背景噪声是一个常见的问题。为了提高音频的质量&#xff0c;我们需要对音频进行降噪处理。本文将介绍如何使用 Python 实现音频降噪。 依赖库安装 在开始之前&#xff0c;我们需要安装以下依赖库&#xff1a; pydub&#xff1a;用于音频文件的读取…

18、论文阅读:AOD-Net:一体化除雾网络

AOD-Net: All-in-One Dehazing Network 前言介绍相关工作物理模型传统方法深度学习方法 建模与扩展变换后的公式网络设计与高级特征任务相结合 除雾评价数据集和实现 前言 该论文提出了一种基于卷积神经网络&#xff08;CNN&#xff09;的图像去雾模型&#xff0c;称为 All-in…

软件工程。

图 UML 数据流图&#xff08;DFD&#xff09; 1&#xff0c;数据流图概念 描绘信息流和数据从输入移动到输出的过程中所经受的变换。 也就是 数据流图。 数据流图以图形的方式描绘数据在系统中流动和处理的过程。 数据流图&#xff08;DFD&#xff0c;Data Flow Diagram&a…