cesium+vue3项目创建

项目创建

先上成果图

注意：创建项目前请确认已成功安装node、yarn

项目说明：

yarn+vite+vue3+js+element-plus+cesium

1. 创建项目：

   • yarn create vite your-project-name
   • 键盘上下方向键选择vue，空格确认
   • 选择JavaScript并确认
   • 根据提示依次进入项目，下载依赖，启动项目

2. 安装vue-router+pinia+element-plus+cesium+less

   • yarn add vue-router pinia element-plus unplugin-vue-components unplugin-auto-import cesium vite-plugin-cesium less less-loader

   • src下创建router、store文件夹，各自文件夹下创建index.js和modules文件夹

       1.router//router文件夹下的......
     /*****************************modeles/login.js ********************************/
     export default [
       {
         path: '/login',
         name: 'login',
         component: () => import('../../views/LoginView.vue'),
         meta: { title: '登录页' },
       },
     ];
     
     /*******************************index.js **********************************/
     import LoginRouter from './modules/login';
     import { createRouter, createWebHashHistory } from 'vue-router';
     const routes = [
       {
         path: '/',
         name: 'home',
         component: () => import('../views/HomeView.vue'),
       },
           ...LoginRouter,
     ];
     const router = createRouter({
       history: createWebHashHistory(),
       routes,
     });
     export default router;
     **********************************************************************************
       2.pinia//pinia文件夹下的......
     /*****************************modeles/user.js ********************************/
     // 1. 导入
     import { defineStore } from 'pinia';
     
     // 2. 使用
     const userStore = defineStore('userStore', {
       state: () => ({
         arrList: [],
       }),
       actions: {},
       getters: {},
     });
     
     // 3. 导出
     export default userStore;
     /*******************************index.js **********************************/
     // 1. 导入
     import { createPinia } from 'pinia';
     // 2. 创建
     const pinia = createPinia();
     // 3. 导出
     export default pinia;
     
     /**最后main.js引入**/
     import router from './router/index';
     import pinia from './pinia/index';
     createApp(App).use(router).use(pinia).mount('#app');
     *******************************************************************************
         3.element-plus、cesium、less直接在vite.config.js中配置
     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     // 按需引入element-plus
     import AutoImport from 'unplugin-auto-import/vite';
     import Components from 'unplugin-vue-components/vite';
     import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
     //引入cesium
     import cesium from 'vite-plugin-cesium';
     // https://vitejs.dev/config/
     export default defineConfig({
       plugins: [
         vue(),
         cesium(),
         AutoImport({
           resolvers: [ElementPlusResolver()],
         }),
         Components({
           resolvers: [ElementPlusResolver()],
         }),
       ],
       css: {
         preprocessorOptions: {
           less: {
             math: 'always', // 括号内才使用数学计算
             globalVars: {
               // 全局变量
               // mainColor: 'red',
             },
           },
         },
       },
     });
     

   • yarn add normalize.css 在main.js中 improt 'normalize.css’消除浏览器默认样式

     项目框架搭建完成！！！

     点我去下载源码