WEBGIS开发教程

Appearance

章节导航

使用技术

  • Vue3
  • sass
  • vite
  • pinia
  • vue-router
  • element

1. 初始化工程 ​

1.1 初始化工程 ​

通过命令npm create vite@latest创建基本模板项目。 init-proj

1.2 安装依赖 ​

通过命令npm i或者yarn安装依赖。 init-proj 在安装的过程中会提示你安装一些伙伴依赖，为方便后续使用，我们通过命令npm i sass -D安装一下sass依赖。 修改/src/style.css为/src/style.scss，并修改其内容：

css
:root {
  --primary-color: red;
}

* {
  margin: 0;
  padding: 0;
}

html, body, #app {
  height: 100%;
  overflow: hidden;
}

对应的修改/src/main.js的引入文件为import './style.scss'。

1.3 启动工程 ​

通过命令npm run dev或者yarn dev启动工程，启动后如下图： init-proj

2. 配置工程 ​

2.1 配置环境变量 ​

在工程跟目录下创建四个文件：.env、.env.dev、.env.sit、.env.prod。

  • .env：一些公用的配置信息，其内容为：
VITE_APP_TITLE = SDK示例文档
  • .env.dev：开发环境配置信息，其内容为：
VITE_APP_API_BASE = http://localhost:8081
  • .env.sit：测试环境配置信息，其内容为：
VITE_APP_API_BASE = http://192.168.1.100:8081
  • .env.prod：生产环境配置信息，其内容为：
VITE_APP_API_BASE = http://192.168.1.200:8081

上述配置信息可通过import.meta.env.VITE_APP_API_BASE和import.meta.env.VITE_APP_TITLE调用。

创建完配置文件，修改package.json文件，修改scripts节点为如下内容：

json
{
  ...,
  "scripts": {
    "dev": "vite --mode dev",
    "build:sit": "vite build --mode sit",
    "build": "vite build -- mode prod",
    "preview": "vite preview"
  }
}

2.2 配置alias别名 @ ​

配置别名，以@引入文件。修改vite.config.js文件，内容如下：

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

3. 配置vue-router ​

3.1 安装依赖 ​

通过命令npm install vue-router@next -S安装依赖

3.2 创建配置文件 ​

创建/src/router/index.js文件，文件内容如下：

js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/home/index.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

根据上述配置创建/src/view/home/index.vue文件，文件内容为：

vue
<template>
  <div class="header">首页</div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.header {
  font-size: 1rem;
  padding: 1rem;
  font-weight: bold;
  color: var(--primary-color);
}
</style>

3.3 导入挂载路由 ​

修改/src/main.js文件，修改后内容为:

js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from "./router";

const app = createApp(App)

app.use(router).mount('#app')

3.4 修改App.vue管理路由 ​

修改/src/App.vue文件，修改后内容如下：

vue
<template>
  <router-view></router-view>
</template>

4. 引入element ​

4.1 添加依赖 ​

通过命令npm install element-plus -S添加依赖。

4.2 引入 ​

修改/src/main.js文件，修改后内容为:

js
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import router from "./router";

const app = createApp(App)

app.use(router).use(ElementPlus).mount('#app')

4.3 测试 ​

修改/src/view/home/index.vue文件，添加<el-button type="primary">Primary</el-button>测试。

5. 添加pinia ​

5.1 安装依赖 ​

通过命令npm install pinia -S安装依赖。

5.2 创建配置文件 ​

创建文件/src/stores/app.js，文件内容为：

js
import { defineStore } from "pinia";

export const appStore = defineStore({
  id: "app",
  state: () => {
    return {
      version: 'v1.0.0'
    }
  },
  actions: {
    setVersion(version) {
      this.version = version
    }
  }
});

5.3 引入 ​

修改/src/main.js文件，修改后内容为:

js
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'

import router from "./router";

const app = createApp(App)
const pinia = createPinia()

app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')

5.4 测试 ​

修改/src/view/home/index.vue文件，修改后内容为：

vue
<template>
  <div class="header">{{version}}</div>
  <el-button type="primary" @click="changeVersion()">Primary</el-button>
</template>

<script>
import { appStore } from '@/stores/app.js'
const app_store = appStore()

export default {
  name: 'HomePage',
  data() {
    return {}
  },
  computed: {
    version() {
      return app_store.version
    }
  },
  methods: {
    changeVersion() {
      app_store.setVersion('v1.0.1')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  font-size: 1rem;
  padding: 1rem;
  font-weight: bold;
  color: var(--primary-color);
}
</style>

Copyright © 2023 LZUGIS