vue2系列低版本的 threejs架构方案整理

[复制链接]
查看: 308   回复: 0

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
939
2023-5-3 22:53:47   显示全部楼层   阅读模式  
1.jpg


实际开发中根们配合得公司不一定全部使用vue3所以我们,配合甲方也要适当降低vue2.x系列版本去开发threejs项目

1.安装vue2.x某某版本

  1. npm install vue@2.6.12
复制代码


2.安装自己得工程文件

  1. vue create my-project
复制代码

3.安装threejs
  1. npm install three
复制代码

4.启动vue
  1. npm run serve
复制代码


5.安装less

  1. npm i less-loader less --save-dev
复制代码


6安装ajx

  1. npm install axios
复制代码


7.压缩glb指令

  1. gltf-pipeline -i model.glb -o modelDraco.glb -d
复制代码


8.rest一下全局得默认css
在如下目录
新建一个rest.css
微信截图_20230503235249.png

把如下rest全局css粘贴上去

点击查看


9、屏蔽vue2引入未使用变量得报错

1.png

找到配置文件
vue2.x版本报错error: ‘xxxx‘ is defined but never used (no-unused-vars)

  1. "no-unused-vars":"off"
复制代码

增补一条就行了,有没引用得变量不要报错

10.[backcolor=rgba(206, 17, 38, 0.1)] [backcolor=rgba(206, 17, 38, 0.1)]1:1[backcolor=rgba(206, 17, 38, 0.1)]  [backcolor=rgba(206, 17, 38, 0.1)]error[backcolor=rgba(206, 17, 38, 0.1)]  Component name "index" should always be multi-word  [backcolor=rgba(206, 17, 38, 0.1)]vue/multi-word-component-names


报错不能使用index.vue命名 但是用index尤其内部 一个包一个包得所以 增补配置修正


"vue/multi-word-component-names":"off"


  1.     "rules": {
  2.       "no-unused-vars":"off",
  3.       "vue/multi-word-component-names":"off"
  4.    
  5.     }
复制代码

11、vue得vscode用户快捷代码片段

  1. {
  2.         "Print to console": {
  3.                 "prefix": "vue2", //这里的vue是代码指令,你可以随意更改
  4.                 "body": [ // body[]中的代码就是 输入vue指令后显示的代码
  5.                
  6.                         "<script  >",
  7.                         "import { reactive,toRefs,ref,computed} from 'vue'",
  8.                         // "import { useStore } from 'vuex'",
  9.                         // "import { useRouter } from 'vue-router'",
  10.                         "",
  11.                         // "export default {",
  12.                         // // "  name: '',",          // 这里每段代码的“”双引号是必须加的,后面要跟上逗号 ","
  13.                         // // "  components: {},",    // 代码前面,双引号内的空格是设置空格样式的, 一个空格对应vue文件中的一个空格
  14.                         // // "  data () {",
  15.                         // // "    return {",
  16.                         // // "    }",
  17.                         // // "  },",
  18.                         // // "  created () { },",
  19.                         // // "  mounted () { },",
  20.                         // // "  methods: {}",
  21.                         // " setup() { ",
  22.                         // "   const router=useRouter()",
  23.                         // "   const store=useStore()",
  24.                         // "",
  25.                         // "   computed=(()=>{", //获取vuex里的数据
  26.                         // "   return",
  27.                         // "  });",
  28.                         // "",
  29.                         // "   return{}",
  30.                         // "},",
  31.                         // "}",
  32.                         "</script>",
  33.                                 // "$1",             // 这里的$1 可以不要,建议去掉
  34.                                 "<template>",
  35.                                 "<div>",
  36.                                 "xiefan",
  37.                                 "</div>",
  38.                                 "</template>",
  39.                                 "", // 这里的引号内的空, 是为了添加 空行
  40.                         "<style scoped lang='less'>",        
  41.                         "</style>",
  42.                         "" // 这里加空行, 是为了解决vue中</style>后面报错缺少空行的问题
  43.                 ],
  44.         }
  45. }
复制代码


12 npm run build 时候如何让打包文件由绝对路径变相对路径

再vue.config.js配置文件下增补这个代码

  1.   publicPath: './'
复制代码
1.png


回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司