1. Create projects

1. Global installationyarnandvite:

npm i -g yarn vite

2. Create a project using YARN. XXX is the project name.

yarn create vite xxx

Select VUE as shown:

Select the vue – ts:

3. Enter the project directory:

cd xxx

Install router and vuex packages:

yarn add vue-router@next vuex@next

The package file is shown as follows:

2. Configure the route file

1. Create a directory as follows:

SRC /router/index.ts SRC /store/index.ts

Configure the router/index.ts file

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes:Array< RouteRecordRaw > = [] // The route format is the same as vue2. The following information is added

const router =  createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
Copy the code
2. The main configuration. Ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

app.mount('#app')
Copy the code

Before we write the route, we need to configure something to make our page path easier to write

3. Configure the vite. Config. ts file
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// import path from 'path'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // '@components': join(root, '/components'),
      The '@': path.resolve(__dirname, 'src') // Inside any module file, you can use the __dirname variable to get the full absolute path to the directory where the current module file resides.}}})Copy the code

Vite website

TS Chinese Document

Router /index.ts = router/index.ts = router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes:Array<RouteRecordRaw> = [
    {
        path: '/'.redirect: '/index'.// With redirect, the default page is displayed
    },
    {
        path: '/index'.component: () = > import('@/components/HelloWorld.vue'),
        meta: { title: 'home'}}, {path: '/line'.component: () = > import('@/components/line.vue'),
        meta: { title: 'the line'}}, {path: '/lifangti'.component: () = > import('@/components/lifangti.vue'),
        meta: { title: 'Cube'}},]const router =  createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
Copy the code

App.vue reads as follows:

<template>
  <router-view></router-view>
</template>
Copy the code

3. The configuration vuex

1.store/index.ts

import { createStore } from 'vuex'

const state = {
 
}

const mutations = {
 
}

const getters = {

}

const actions = {

}

const modules = {

}

export default createStore({
  state,
  getters,
  mutations,
  actions,
  modules
})
Copy the code

2. Configure the main.ts file

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)

app.mount('#app')

Copy the code

4. Run the project

yarn dev

5. Import three. Js

1. Install the three.js package

Run the NPM install three command to import the three.js module package and view it in node_modules

2. Import the package to the required component
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
Copy the code

Could not find a declaration file for module ‘three’,

An error message prompts you to use the command NPM I — save-dev@types /three or add it to the xxx.d.ts file

declare module 'three'
declare module 'three/examples/jsm/controls/OrbitControls.js'
Copy the code

While searching baidu for this problem, I found that other authors used file names similar to this one

Something like this, and I only have env.d.ts in my own file directory

So I put the top two lines in env.d.ts,

I have tried both the above two methods, but the code line still reported an error after the NPM command was executed, so I also used the second method, and the code line reported an error. However, when I recorded this problem and tried to reproduce the error, I commented out the two lines of code in EVN.D. ts, and there was no error when IMPORTING the code page of Three, which made me have some doubts. When I started to record these problems, I had not systematically learned vue3, TS and three, so I guess I could only find this reason in the process of learning