当前位置: 首页 > 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限制):
在这里插入图片描述

http://www.lryc.cn/news/484720.html

相关文章:

  • Linux通过使用scp和sftp发送或拉取文件
  • Jtti:服务器总是自动重启怎么办?
  • 北京大学c++程序设计听课笔记101
  • 一键生成本地SSL证书:打造HTTPS安全环境
  • Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)
  • 速盾:cdn 支持 php 吗?
  • 在linux中使用nload实时查看网卡流量
  • 【JavaEE进阶】Spring 事务和事务传播机制
  • Flink1.19编译并Standalone模式本地运行
  • gitlab-development-kit部署gitlab《二》
  • Java面试之多线程并发篇(3)
  • 任何使用 Keras 进行迁移学习
  • Mac 使用mac 原生工具将mp4视频文件提取其中的 mp3 音频文件
  • 【SQL】一文速通SQL
  • 【学习】【HTML】块级元素,行内元素,行内块级元素
  • 握手协议是如何在SSL VPN中发挥作用的?
  • 机器学习 - 为 Jupyter Notebook 安装新的 Kernel
  • CTF攻防世界小白刷题自学笔记13
  • Rust 模板匹配——根据指定图片查找处于大图中的位置(支持GPU加速)
  • JVM详解:类的加载过程
  • Python →爬虫实践
  • Visitor 访问者模式
  • Mac解压包安装MongoDB8并设置launchd自启动
  • Springboot采用jasypt加密配置
  • 加载shellcode
  • K8S如何基于Istio实现全链路HTTPS
  • React Query在现代前端开发中的应用
  • 【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测
  • PostgreSQL中表的数据量很大且索引过大时怎么办
  • 【QML】QML多线程应用(WorkerScript)