vue cli4搭建cesium環境

搭建項目之前，請確認好你自己已經安裝過node, npm, vue cli。沒安裝的可以參考下面的鏈接安裝。

1.進入一個目錄，開始創建
輸入：

vue create project-one

2.我們這裏選擇手動配置

按 ↓ 選擇“Manually select features”，再按 Enter

3.選擇你需要的配置項
通過↑ ↓ 箭頭選擇你要配置的項，按空格是選中，按 a 是全選，按 i 是反選。具體每個配置項表示什麼意思在下面會有說明。

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉碼器，可以將ES6代碼轉爲ES5代碼，從而在現有環境執行。 
( ) TypeScript// TypeScript是一個JavaScript（後綴.js）的超集（後綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出爲 JavaScript在瀏覽器運行
( ) 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） 測試

選完之後按 Enter。分別選擇每個對應功能的具體包。選你擅長的，沒有擅長的，就選使用廣的，哈哈，方便諮詢別人。

3.1 選擇是否使用history router

Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過調用瀏覽器提供的接口）。
我這裏建議選n。這樣打包出來丟到服務器上可以直接使用了，後期要用的話，也可以自己再開起來。
選yes的話需要服務器那邊再進行設置。
Use history mode for router? (Requires proper server setup for index fallback in production)

3.2 選擇css 預處理器

我選擇的是Sass/Scss(with dart-sass)

node-sass是自動編譯實時的，dart-sass需要保存後纔會生效。sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現。（該回答參考http://www.imooc.com/qadetail/318730）

3.3 選擇Eslint代碼驗證規則
提供一個插件化的javascript代碼檢測工具，ESLint + Prettier //使用較多

3.4 選擇什麼時候進行代碼規則檢測

( ) Lint on save // 保存就檢測
( ) Lint and fix on commit // fix和commit時候檢查

3.5 選擇單元測試

> Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect

3.6 選擇如何存放配置

> In dedicated config files // 獨立文件放置
  In package.json // 放package.json裏

如果是選擇獨立文件放置，項目會有單獨如下圖所示的幾件文件。

3.7 是否保存當前配置

鍵入N不記錄，如果鍵入Y需要輸入保存名字，如第2步所看到的我保存的名字爲test。

4.等待創建項目

5.執行它給出的命令，可以直接訪問了

6.安裝element-ui

在vue-cli@3之後，element爲vue-cli準備了相應的element插件，我們可以用這個插件快速的來安裝element-ui。只需要cd到工程根目錄，運行vue add element即可：

如果你已經用VSCode打開了項目運行下面的命令可能會報下面這個錯

Vue 無法加載文件 X:\Xxx\XXX\node-v12.16.3-x64\node_global\vue.ps1，因爲在此係統上禁止運行腳

解決辦法

vue add element

等待插件下載：

爲了方便，選擇全部導入：

繼續選擇，最後回車：

安裝完成

可見，該插件自動幫我們更新了依賴，加入了element相關依賴，並自動幫我們在代碼中引入了element，十分的方便
注意：安裝結束後會讀取.svn或者.git裏的文件，如果訪問不到的話，會報一個operation not permitted的錯誤。我在有.svn文件夾的時候出現過這個錯誤，所以最好是安裝完element後，再做版本控制相關的操作。

測試element是否安裝成功

npm run serve

頁面上多出了el-button，表示element-ui安裝成功，自此項目框架就搭建完成了。

7.引入Cesium庫

進入到項目的文件夾，在此處打開cmd，輸入

npm install cesium -s

修改main.js 文件在裏面添加

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

引入完成後，在項目文件夾下新建文件：vue.config.js，文件內容爲：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
  // 基本路徑  3.6之前的版本時 baseUrl
  publicPath: "./",
  // 輸出文件目錄
  outputDir: "dist",
  // eslint-loader 是否在保存的時候檢查
  lintOnSave: false,
  // webpack-dev-server 相關配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 5000,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

在views文件夾下新建組件CesiumScene.vue，文件內容：


<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>

export default {
  name: 'cesiumPage',
  data () {
    return {
    }
  },
  mounted(){
    var Cesium = this.Cesium;
    var cesiumContainer = document.getElementById("cesiumContainer");
    var viewer = new Cesium.Viewer("cesiumContainer",{
      //加載在線谷歌地圖
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
         url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
      })
    })
      //去除 版權圖標
      viewer._cesiumWidget._creditContainer.style.display="none";
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>

修改App.vue文件內容如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
html,
body,
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  color: #000;
  overflow: hidden;
}
</style>

修改路由如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import CesiumScene from '../views/CesiumScene.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'scene',
    component: CesiumScene
  }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

啓動項目

在項目文件夾下打開cmd，輸入

npm run serve

打開瀏覽器，輸入IP或localhost+端口號，即localhost:5000，查看結果

vue cli4搭建cesium環境

Cesium加載視頻

Cesium學習

Cesium座標系介紹

vue cli4搭建cesium環境

vue : 無法加載文件 X:\Xxx\XXX\node-v12.16.3-x64\node_global\vue.ps1,因爲在此係統禁止運行腳本

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結