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

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

306

主题

306

帖子

1703

积分

管理员

Rank: 9Rank: 9Rank: 9

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


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

1.安装vue2.x某某版本
npm install vue@2.6.12

2.安装自己得工程文件
vue create my-project
3.安装threejs
npm install three
4.启动vue
npm run serve

5.安装less
npm i less-loader less --save-dev

6安装ajx
npm install axios

7.压缩glb指令
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)
 "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"

    "rules": {
      "no-unused-vars":"off",
      "vue/multi-word-component-names":"off" 
   
    }
11、vue得vscode用户快捷代码片段
{
        "Print to console": {
                "prefix": "vue2", //这里的vue是代码指令,你可以随意更改
                "body": [ // body[]中的代码就是 输入vue指令后显示的代码
                
                        "<script  >",
                        "import { reactive,toRefs,ref,computed} from 'vue'",
                        // "import { useStore } from 'vuex'",
                        // "import { useRouter } from 'vue-router'",
                        "",
                        // "export default {",
                        // // "  name: '',",          // 这里每段代码的“”双引号是必须加的,后面要跟上逗号 "," 
                        // // "  components: {},",    // 代码前面,双引号内的空格是设置空格样式的, 一个空格对应vue文件中的一个空格
                        // // "  data () {",
                        // // "    return {",
                        // // "    }",
                        // // "  },",
                        // // "  created () { },",
                        // // "  mounted () { },",
                        // // "  methods: {}",
                        // " setup() { ",
                        // "   const router=useRouter()",
                        // "   const store=useStore()",
                        // "",
                        // "   computed=(()=>{", //获取vuex里的数据
                        // "   return",
                        // "  });",
                        // "",
                        // "   return{}",
                        // "},",
                        // "}",
                        "</script>",
                                // "$1",             // 这里的$1 可以不要,建议去掉
                                "<template>",
                                "<div>",
                                "xiefan",
                                "</div>",
                                "</template>",
                                "", // 这里的引号内的空, 是为了添加 空行
                        "<style scoped lang='less'>",        
                        "</style>",
                        "" // 这里加空行, 是为了解决vue中</style>后面报错缺少空行的问题
                ],
        }
}

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

再vue.config.js配置文件下增补这个代码
  publicPath: './'
1.png


回复

使用道具 举报

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

高级模式

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