十分钟搞定Vue搭建

这里写图片描述

既然你来到了这里,肯定你知道vue是什么,具体我也就不说了。

废话不多说。

Vue推荐开发环境

Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016

现在开始安装环境

安装nodejs
可以在终端里下载,但是不推荐,npm的版本会报错
去nodejs官网下载即可,地址:http://nodejs.cn/中文网

安装vue淘宝镜像
npm install -g vue –registry=https://registry.npm.taobao.org

安装webpack
npm install webpack -g

安装vue脚手架
npm install vue-cli -g

—————-如果第二次编写新的vue项目,就可以在这里开始了—————–

根据模板创建项目
vue init webpack 项目名字<项目名字不能用中文>

会有一些初始化的设置,如下输入:
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认
Use ESLint to lint your code? n
pick an eslint preset. 默认Standard
setup unit tests with karma + mocha?No(单元测试不需要)
setup e2e tests with Nightwatch?No(单元测试不需要)

进入项目
打开终端
cd 项目名字

安装项目依赖
npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西,–save 是你发布之后还依赖的东西
npm install vue-router vue-resource –save

启动项目
npm run dev

发布项目
npm run build

目前基础搭建这里应该暂时可以了。

  • 8
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue搭建Cesium地图,你可以按照以下步骤进行操作: 1. 在src/view目录下新建一个名为earth.vue的组件,用于放置Cesium地图的代码。这个组件应该包括一个div容器,用来渲染地图。代码如下: ```html <template> <div class="container"> <div id="cesiumContainer"></div> </div> </template> <script> import { Viewer } from 'cesium/Cesium' import 'cesium/Widgets/widgets.css' export default { name: "earth", mounted() { let viewer = new Viewer("cesiumContainer"); } }; </script> <style scoped> .container { width: 100%; height: 100vh; } #cesiumContainer { width: 100%; height: 100vh; } </style> ``` 2. 在webpack配置文件中,设置cesium的别名。这样在引入Cesium模块时,可以使用别名来代替。代码如下: ```javascript const path = require('path'); module.exports = { // ... resolve: { alias: { cesium: path.resolve(__dirname, cesiumSource) // 设置cesium别名 } } // ... }; ``` 3. 在组件中引入Cesium模块。由于Cesium 1.63版本以后使用的是ES6模块化语法,所以不能直接使用`import Cesium from 'cesium/Cesium'`导入模块。应该在组件的script标签中,使用上述设置的别名来引入Cesium。代码如下: ```javascript import { Viewer } from 'cesium/Cesium' ``` 通过以上步骤,你就可以在Vue中成功搭建Cesium地图了。在earth.vue组件中的mounted生命周期钩子中,创建一个Viewer实例并将其渲染到id为cesiumContainer的div容器中。然后你可以根据需要对地图进行配置和操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值