@vue/cli(vue-cli 3.0)框架搭建并整合cesium
vue-cli 3.x整合cesuim超详细攻略及解释
·
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项目结构说明
更多推荐
已为社区贡献2条内容
所有评论(0)