@vue/cli(vue-cli 3.0)框架搭建并整合cesium

version

名称	版本	查看命令
vscode	1.36.1	面板–>help–>about
nodejs	10.15.1	node --version
npm	6.4.1	npm --version
cesium	自己封装(1.58)
webpack	4.39.1	webpack -version
cnpm	6.1.0	cnpm --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)安装

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

配置简介:

名称	作用
Babel	es6转换工具
TypeScript	JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vuex（vue的状态管理模式）
CSS Pre-processors	CSS 预处理器（如：less、sass）
Linter / Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	e2e（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项目结构说明