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

devtools/2024/11/14 4:02:50/

初始化:

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


http://www.ppmy.cn/devtools/132795.html

相关文章

SpringCloud篇(微服务)

目录 一、认识微服务 1. 单体架构 2. 分布式架构 3. 微服务 3.1. 特点 3.2. 优点 3.3 缺点 二、微服务设计、拆分原则 1. AKF 拆分原则 2. Y轴&#xff08;功能&#xff09;关注应用中功能划分&#xff0c;基于不同的业务拆分 3. X轴&#xff08;水平扩展&#xff09…

深入解析TOML、XML、YAML和JSON:优劣对比与场景应用

摘要&#xff1a;本文将介绍四种常见的配置文件和数据交换格式&#xff1a;TOML、XML、YAML和JSON&#xff0c;通过具体的使用例子分析它们的优缺点&#xff0c;并探讨在不同场景下的应用选择。 正文&#xff1a; 一、TOML 优点&#xff1a; 易于阅读和编写&#xff1a;TOML的…

数字后端零基础入门系列 | Innovus零基础LAB学习Day9

Module 16 Wire Editing 这个章节的学习目标是学习如何在innovus中手工画线&#xff0c;切断一根线&#xff0c;换孔&#xff0c;更改一条net shape的layer和width等等。这个技能是每个数字IC后端工程师必须具备的。因为项目后期都需要这些技能来修复DRC和做一些手工custom走线…

ORU 的 Open RAN 管理平面 (M 平面)

[TOC](ORU 的 Open RAN 管理平面 (M 平面)) ORU 的 Open RAN 管理平面 (M 平面) https://www.techplayon.com/open-ran-management-plane-m-plane-for-open-radio-unit/ ORU M 平面 在 ORAN 中&#xff0c;设置参数的 O-RU 管理功能是通过 M-Plane 完成的。管理功能包括 O-…

Java 处理 json 格式数据解析为 csv 格式

Java处理json格式数据解析为csv格式 如果不使用 JSON 工具库&#xff0c;你可以手动解析 JSON 格式字符串并将其转换为 CSV 格式字符串。 以下是一个简单示例&#xff0c;展示如何实现这一功能。 示例代码 下面的示例代码手动处理 JSON 字符串&#xff0c;将其转换为 CSV 格式字…

3. ARM_寄存器组织

概述 什么是寄存器&#xff1a; 寄存器是CPU内部的存储器&#xff0c;没有地址。寄存器用于暂时存放参与运算的数据和运算结果。寄存器包括通用寄存器、专用寄存器、控制寄存器。 通用寄存器&#xff1a;可以存取的数据不受限制 &#xff0c;什么都可以存。专用寄存器&#…

js id数组转字符串

在 JavaScript 中&#xff0c;将数组转换为字符串有几种常见的方法。每种方法都有其特定的用途和格式。以下是一些常用的方法&#xff1a; 1. Array.prototype.join(separator) join 方法将数组的所有元素连接成一个字符串&#xff0c;并使用指定的分隔符&#xff08;默认为逗…

基于promtail+loki+grafana搭建日志系统

文章目录 Promtail安装promtail创建配置文件创建systemd 服务文件启动promtail服务 loki下载loki服务创建config.yml文件创建systemd服务文件启动loki grafana下载grafana 本文基于promtaillokigrafanaprometheus&#xff08;可选&#xff09; 搭建一个轻量快速的日志系统&…