Three-js 学习笔记（1）——搭建环境

1，准备
    安装 windows 10 x64
    安装 nodejs 14.16.1
    安装 npm 6.14.8
    安装 Visual Studio Code
    搭建vue环境
        全局安装vue-cli
        

cnpm install -g @vue/cli

查看安装的vue版本

vue --version

2，搭建项目
    cd到指定的目录，创建vue项目

vue create vue_three

启动看一下

npm run serve

安装 vue-router

npm install vue-router@3.2.0

修改 App.vue

	<template>
	  <div id="app">
	    <router-view />
	  </div>
	</template>

	<script>
	export default {
	  name: 'App',
	  components: {}
	}
	</script>

修改 main.js

	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'

	Vue.config.productionTip = false

	new Vue({
	  el: '#app',
	  router,
	  render: h => h(App)
	})

 路由配置
 创建文件 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export const constantRoutes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home')
  },
  {
    path: '/geometry/geometry_01',
    name: 'geometry_01',
    component: () => import('@/views/geometry/geometry_01')
  },
  {
    path: '/geometry/geometry_02',
    name: 'geometry_02',
    component: () => import('@/views/geometry/geometry_02')
  },


]

export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

   在src下创建目录，views
   在views下创建vue，home.vue

<template>
  <div class="home">
    <h1>Three</h1>

    <h3>基础示例</h3>
    <ul>
        <li>
          <router-link to="/geometry/geometry_01">几何图形</router-link><br>
          <router-link to="/geometry/geometry_02">材质效果</router-link><br>
        </li>
    </ul>

    <h3>进阶示例</h3>
    <h3>其它示例</h3>
  </div>
</template>

<script>
export default {
  name: 'Home',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>