我的qq 2038373094

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

 

使用的工具vscode

 

开始部署的第一步  node.js的安装

    1、首先安装node.js

    官网https://nodejs.org/en/download/

    安装教程：都是直接下一步(安装位置可以变更一下)

    测试是否安装成功，windows+r  输入node -v和node --version cha

 

3.安装cnpm

npm的国内镜像—cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 第二步、安装vscode（去官网下载，跟装qq，微信一样安装）

 

第三步、在d盘新建一个文件夹如threejs

 

第四步、创建threejs工程

 

4.1、在vscode里面打开文件夹

 

 

4.2、打开终端

 

4.3、创建 package.json

 输入cnpm init

然后就会出现package.json文件

 

安装typescript

npm install -g typescript

 

4.4、创建 tsconfig.json 

打开终端，输入 tsc --init就会生成配置文件

 

4.5、 建立工程所需要的目录结构

 

src 目录：存放源码，比如ts文件。

lib  目录：存放库文件，比如第三方js库引用。

bin 目录：存放编译结果输出。

 

4.6、编写第一个ts文件：Main.ts

src文件夹下面新建一个Main.ts

在文件里面输入console.log("hello world");

TypeScript语言是JavaScript的超集，所以我们需要将它先编译成js才能使用。

 

4.7、初步配置tsconfig.json（这一步很重要）

{ "compilerOptions": 
  { "target": "es5", 
    "noImplicitAny": false,
     "module": "amd", 
     "removeComments": false,
     "sourceMap": false, 
     "outDir": "lib/js/"//你要生成js的目录,可自由命名 
     } 
    }

 

4.8、ts文件编译成js

1、ctrl+shift+B

2、选择第一个tsc:构建

3、控制台会出现如下所示，这个是正确的 （我以为错误的，百度了很多次）

4、刷新一下文件列表，就会出现Main.js了

 

4.9、在lib文件夹下面新建一个index.html

如下所示，引入了Main.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>threejs第一个案例</title>
    <script type="text/javascript" src="js/Main.js"></script>
</head>
 
<body>
    <img src="" id="img"/>
    <canvas id='my-canvas' width='480' height='400'>
        对不起，您的浏览器未支持H5内容.
    </canvas>
</body>
 
</html>

 

5、安装web浏览的http服务插件：lite-server

npm install --save-dev lite-server

6、在商店里面安装view in brower

7、配置view in browser插件

如果不配置的话，有可能会报如下错误

7.1、配置如下  菜单栏“文件”——“首选项”——“设置”

 

7.2、在搜索框输入view in browser configuration，然后选择一个浏览器，选择的前提是你的电脑上面安装了这个浏览器，我是谷歌

 

 

 

8、在启动项目之前，打开终端，输入一下几个命令，看看底层环境配置有没有搭建好

 

 

 

 9、在package.json里面加入lite-server启动的快捷命令     "dev": "lite-server"

               

{
  "name": "threejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.4.0"
  }
}

 

 10、现在就可以用cnpm run dev启动了

如果有异常的可以看这里https://blog.csdn.net/qq_37591637/article/details/90610304

 

 

强烈推荐先使用简单/自己擅长的工具，然后再用强大的工具如webstrom或者vscode来做项目

2019.5.27我搞了一天，但是一直报错，可能是环境冲突了！

2019.5.28我用了我擅长的myeclispe来做threejs；因为这个的基础需要引入一个three.js就可以了；因为时间比较赶，所以我就没有一点点尝试其他的了，还是先入门，再晋级吧！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue