init template

4 years ago · 52b8226ca2
16 changed files with 5273 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+registry=https://registry.npm.taobao.org
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "windi",
+    "windicss"
+  ]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!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>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,22 @@
+{
+  "name": "vue3-vite-template",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "element-plus": "^1.1.0-beta.21",
+    "unplugin-vue-components": "^0.15.6",
+    "vite-plugin-windicss": "^1.4.11",
+    "vue": "^3.2.16",
+    "vue-router": "^4.0.12",
+    "windicss": "^3.1.9"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.3",
+    "vite": "^2.6.4",
+    "vite-plugin-linter": "^1.0.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,10 @@
+<script setup>
+import Navbar from 'components/navbar.vue';
+</script>
+
+<template>
+  <Navbar />
+  <div class="p-4">
+    <router-view></router-view>
+  </div>
+</template>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@ -0,0 +1,3 @@
+<template>
+  <h1 class="text-lg font-medium py-3 px-6 shadow">{{ $route.meta.title || '智能大气腐蚀检测平台' }}</h1>
+</template>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,11 @@
+import 'virtual:windi.css'
+
+import App from './App.vue'
+import { createApp } from 'vue'
+import router from './routers/index';
+
+const app = createApp(App);
+
+app
+  .use(router)
+  .mount('#app')
--- a/src/routers/index.js
+++ b/src/routers/index.js
@ -0,0 +1,14 @@
+import { createRouter, createWebHistory } from 'vue-router'
+// 还有 createWebHashHistory 和 createMemoryHistory
+
+const routes = [
+  { path: '/', redirect: '/network-config'},
+  { path: '/network-config', name: 'network-config', meta: { title: '网络参数配置' }, component: () => import('@/views/network-config.vue')}
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
--- a/src/views/network-config.vue
+++ b/src/views/network-config.vue
@ -0,0 +1,8 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6"><div class="bg-gray-400">1</div></el-col>
+    <el-col :span="6"><div class="bg-gray-400">2</div></el-col>
+    <el-col :span="6"><div class="bg-gray-400">3</div></el-col>
+    <el-col :span="6"><div class="bg-gray-400">4</div></el-col>
+  </el-row>
+</template>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,28 @@
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import WindiCSS from 'vite-plugin-windicss';
+import { defineConfig } from 'vite'
+import path from 'path';
+import vue from '@vitejs/plugin-vue'
+
+const resolve = dir => path.join(__dirname, dir);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    WindiCSS(),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '~': __dirname,
+      '@': resolve('src'),
+      'views': resolve('src/views'),
+      'components': resolve('src/components'),
+      'assets': resolve('src/assets'),
+    }
+  }
+})