Vue项目搭建

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

E:\Projects\OpenGMS-Lab>npm init vue@latest
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Project name: ... lab-ui
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in E:\Projects\OpenGMS-Lab\lab-ui...

Done. Now run:

  cd lab-ui
  npm install
  npm run dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

npm install eslint --save-dev
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin


# ESLint官方提供的Vue插件，可以检查 .vue文件中的语法错误
npm install eslint-plugin-vue

# 使用eslint插件将prettier作为eslint规则执行
npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

# 禁用所有与格式相关的eslint规则，也就是说把所有格式相关的校验都交给 prettier 处理
npm install --save-dev eslint-config-prettier

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

module.exports = {
  root: true,
  env: {
    node: true
  },
  parserOptions: {
    ecmaVersion: 2020,
    parser: "babel-eslint"
  },
  parser: "@typescript-eslint/parser",
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended" //把所有格式相关的校验都交给 prettier 处理
  ],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error"
  }
};

1
2
3
4

module.exports = {
  // 无尾逗号
  "trailingComma": "none"
};

1

npm install unplugin-vue-components -D

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
});

1

npm i -D unplugin-auto-import

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

1

npm i vite-plugin-vue-setup-extend -D

1
2
3
4
5

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

1
2
3

<script lang="ts" setup name="demo">

</script>

1

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

1
2

import { createRouter, createWebHashHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";

1
2
3
4
5

// .eslintrc.js文件
'parser': '@typescript-eslint/parser',
'parserOptions': {
  'parser': 'babel-eslint',
},

1
2
3
4
5

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

1

npm install eslint@8.22.0 --save-exact

1

npm install element-plus --save

1
2
3
4
5
6

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

1
2
3
4
5
6
7
8

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

<style>
@import './assets/css/main.css';
@import './assets/css/color-dark.css';
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView
    },
    {
      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("../views/AboutView.vue")
    }
  ]
});

export default router;

1

npm install @element-plus/icons-vue

1
2
3
4
5
6
7
8
9

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- Use el-icon to provide attributes to SVG icon -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- Or use it independently without derive attributes from parent -->
    <Edit />
  </div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_830376_qzecyukz0s.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

1
2
3
4

[class*=" el-icon-lx"],
[class^=el-icon-lx] {
    font-family: lx-iconfont !important;
}