version

名称版本查看命令
vscode1.36.1面板–>help–>about
nodejs10.15.1node --version
npm6.4.1npm --version
cesium自己封装(1.58)
webpack4.39.1webpack -version
cnpm6.1.0cnpm --version

安装nodejs

网站:http://nodejs.cn/download/
下载安装包后安装

安装cnpm(淘宝镜像)

步骤命令说明
1$ npm install -g cnpm --registry=https://registry.npm.taobao.org尽量打开cmd运行,速度快些

@vue/cli(vue-cli 3.x)安装

步骤命令说明
1mkdir webapp建立一个空文件件,webapp
2npm install -g @vue/cli全局安装vue-cli 3.x版本
3vue -V查看vue版本是否正确
4vue create app创建app文件,开始自动配置vue-cli
5在这里插入图片描述弹出的cmd中,用上下箭头和空格控制选择所需要安装的插件,插件详情下面介绍
6在这里插入图片描述配置完后,回车enter进行自动安装

配置简介:

名称作用
Babeles6转换工具
TypeScriptJavaScript的一个超集(添加了可选的静态类型和基于类的面向对象编程:类型批注和编译时类型检查、类、接口、模块、lambda 函数)
Progressive Web App (PWA) Support渐进式Web应用程序
Routervue-router(vue路由)
Vuexvuex(vue的状态管理模式)
CSS Pre-processorsCSS 预处理器(如:less、sass)
Linter / Formatter代码风格检查和格式化(如:ESlint)
Unit Testing单元测试(unit tests)
E2E Testinge2e(end to end) 测试

测试:进入到app文件中,然后npm run serve
在这里插入图片描述
vue/cli搭建成功

整合cesium

cesium利用的是gulp打包技术,由于cesium开源,我们会自己封装,然后压缩代码;不用webpack,这样,我们在引入cesium的时候,是将压缩好的代码,也就是build中的,拷贝到vue/cli的public下,然后在Index.html中直接引用;我们在about.vue中加载球体看看
在这里插入图片描述
然后运行浏览器一波:
在这里插入图片描述

vue-cli项目结构说明

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐