2024年Web前端最新Vue3配置Cesium_vue3 cesium，中高级前端大厂高频面试题

最新推荐文章于 2024-08-16 10:17:15 发布

2401_84617080

最新推荐文章于 2024-08-16 10:17:15 发布

阅读量657

点赞数 7

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84617080/article/details/138475332

版权

程序员专栏收录该内容

108 篇文章 0 订阅

订阅专栏

自学前端时，初学者常感到迷茫，因缺乏明确的学习路径和实践。本文通过分享Vue3集成Cesium的实例，探讨前端学习方法，强调实践操作的重要性。同时，提出中高级前端应深化技术理解，如栈内技术、栈外知识、工程经验、团队协作和业界影响力，并提供前端面试题解析和学习资源。

摘要由CSDN通过智能技术生成

自学几个月前端，为什么感觉什么都没学到？？

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

⚓ Running completion hooks…

📄 Generating README.md…

🎉 Successfully created project world.
👉 Get started with the following commands:

$ cd world
$ npm run serve




---


Tips  
 通过图形界面方式创建 Vue 项目

E:\CesiumProject>vue ui
🚀 Starting GUI…
🌠 Ready on http://localhost:8000




---


### 2. 配置 Cesium


先进入项目目录

E:\CesiumProject>cd world
E:\CesiumProject\world>


安装 `cesium`

E:\CesiumProject\world> npm i cesium --save


配置 `vue.config.js` ，如果没有就在项目根目录创建一个。

const path = require(“path”);
const TerserPlugin = require(“terser-webpack-plugin”);

const CopyWebpackPlugin = require(“copy-webpack-plugin”);
const webpack = require(“webpack”);
const cesiumSource = “./node_modules/cesium/Source”;

function resolve(dir) {
return path.join(__dirname, dir);
}

module.exports = {
devServer: {
port: 8080,
open: true,
proxy: {
//配置代理服务器来解决跨域问题
“/api”: {
target: “http://localhost:80/api/”, //配置要替换的后台接口地址
changOrigin: true, //配置允许改变Origin
pathRewrite: {
“^/api/”: “/”,
},
},
},
},
lintOnSave: false,
configureWebpack: {
output: {
sourcePrefix: " “, // 1 让webpack 正确处理多行字符串配置 amd参数
},
amd: {
// 2
toUrlUndefined: true, // webpack在cesium中能友好的使用require
},
resolve: {
extensions: [”.js", “.vue”, “.json”],
alias: {
//'vue $KaTeX parse error: Expected group after '_' at position 228: \dots: path.resolve(_̲_dirname, cesiu\dots$ /,
use: {
loader: “@open-wc/webpack-import-meta-loader”,
},
},
{
test: /.(glb|gltf)?$/,
use: {
loader: “url-loader”,
},
},
],
},
},
};


### 3. 安装一些必要的模块


* `webpack-import-meta-loader`

E:\CesiumProject\world> npm install @open-wc/webpack-import-meta-loader --save-dev

* `node-sass`

E:\CesiumProject\world> npm i node-sass@4.14.1 --save-dev

* `sass-loader`

E:\CesiumProject\world> npm i sass-loader@10.1.0 --save-dev



Sass直接安装，会自动安装为最新版本，可能会导致项目无法启动，因此安装如上建议版本。


### 4. 测试 Cesium


在 `sec/views/` 下新建 `Index.vue`，如下


在 `src/router/index.js` 中添加

import { createRouter, createWebHistory } from ‘vue-router’
import Home from ‘…/views/Home.vue’
const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
},

/** 添加一个页面 **/
{
path: ‘/index’,
name: ‘Index’,
component: () => import(‘…/views/Index.vue’)
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router