项目创建
先上成果图
注意:创建项目前请确认已成功安装node、yarn
项目说明:
yarn+vite+vue3+js+element-plus+cesium
-
创建项目:
- yarn create vite your-project-name
- 键盘上下方向键选择vue,空格确认
- 选择JavaScript并确认
- 根据提示依次进入项目,下载依赖,启动项目
-
安装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’消除浏览器默认样式
项目框架搭建完成!!!
点我去下载源码
-