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

xiefandaren

实际开发中根们配合得公司不一定全部使用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


把如下rest全局css粘贴上去

点击查看


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



找到配置文件
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: './'

复制代码