How to create sample frontend in vue use cli and vite

1
2npm i -g @vue/cli
3vue --version
4vue create vue-starter-project
5
6# create local development configuration file
7touch .env.development

 1# can define the different environment file
 2touch .env.development.local # to local testing for development don't commit the git
 3touch .env.staging # to staging environment to configuration
 4
 5# The env file content may be 
 6echo 'NODE_ENV="staging"' 
 7
 8# integration the env file to launch
 9# {
10#   ...
11#   "scripts": {
12#     ...
13#     "staging": "vue-cli-service serve --mode staging",
14#   },
15#   ...
16# }

 1<script>
 2import DevData from '../data/airports.development.mock'
 3import StagingData from '../data/airports.staging.mock'
 4
 5export default {
 6  name: 'App',
 7  computed: {
 8      airports() {
 9        if (process.env.NODE_ENV === 'development') return DevData
10        else return StagingData
11      }
12  }
13}
14</script>

 1npm create vite@latest
 2pnpm create vite
 3
 4# npm 7+, extra double-dash is needed:
 5npm create vite@latest my-vue-app -- --template vue
 6
 7# yarn
 8yarn create vite my-vue-app --template vue
 9
10# pnpm
11pnpm create vite my-vue-app --template vue
12
13# bun
14bunx create-vite my-vue-app --template vue
15
16npx degit user/project#main my-project
17cd my-project
18
19npm install
20npm run dev

1export default defineConfig({
2  plugins: [vue()],
3  resolve: {
4    alias: {
5      '@': '/src',
6    },
7  },
8})

 1import { fileURLToPath, URL } from 'node:url'
 2
 3import { defineConfig } from 'vite'
 4import vue from '@vitejs/plugin-vue'
 5
 6// https://vitejs.dev/config/
 7export default defineConfig({
 8  plugins: [vue()],
 9  resolve: {
10    alias: {
11      '@': fileURLToPath(new URL('./src', import.meta.url))
12    }
13  }
14})