Compare commits

...

19 Commits
main ... gsl

@ -0,0 +1 @@
APP_TITLE=DEMO

@ -0,0 +1 @@
APP_FLAG=dev

@ -0,0 +1 @@
APP_FLAG=prod

@ -0,0 +1 @@
APP_FLAG=staging

@ -0,0 +1,2 @@
assets
mock

@ -0,0 +1,31 @@
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:vue/essential",
"airbnb-base"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
"semi": [2, "never"],
"comma-dangle": 0,
"no-console": 0,
"quotes": [2, "single"],
"no-undef": 0,
"no-debugger": 0,
"import/no-unresolved": 0,
"import/extensions": 0,
"no-param-reassign": 0,
"vue/multi-word-component-names": 0,
"vue/no-multiple-template-root": 0,
"import/no-extraneous-dependencies": 0
}
}

24
.gitignore vendored

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1 @@
try to run `chmod +x ./.husky/pre-commit` if pre-commit doesn't work.

@ -0,0 +1 @@
npx eslint ./src --ext .js,.vue

@ -1,2 +1,49 @@
<<<<<<< HEAD
# view-ui-project-vite
This project build for Vue3, Vue-router, Vuex, ViewUIPlus and Vite.
## Install
```shell
npm install
```
## Run
```shell
npm run serve
```
## Build
### Build for Production
```shell
npm run build
```
### Build for Staging
```shell
npm run build:staging
```
## Preview
### Preview for Production
```shell
npm run preview
```
### Preview for Staging
```shell
npm run preview:staging
```
## Run Eslint
### Run without Fixing
- This operation will also run before git-commit.
```shell
npm run lint
```
### Run with Fixing
```shell
npm run lint:fix
```
## .env Description
- This project exposes environment variables on `import.meta.env` object.
- Different modes (development/staging/production) correspond to different environment files (.env.*).
- .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
=======
# jty # jty
>>>>>>> 8f9bf5ff9937c1920b62a1c5c3de013610b8c391

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://file.iviewui.com/file/iview-design-favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- APP_TITLE %></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

8061
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,45 @@
{
"name": "view-ui-project-vite",
"version": "1.0.0",
"description": "a template project for vue3, vue-router, vuex, ViewUIPlus and vite.",
"scripts": {
"serve": "npm run dev",
"dev": "vite serve",
"build": "vite build",
"build:staging": "vite build --mode=staging",
"preview": "npm run build && vite preview",
"preview:staging": "npm run build:staging && vite preview --mode=staging",
"lint": "eslint ./src --ext .js,.vue",
"lint:fix": "eslint ./src --ext .js,.vue --fix",
"prepare": "husky install"
},
"dependencies": {
"axios": "^0.27.0",
"element-plus": "^2.8.6",
"view-ui-plus": "^1.3.0",
"vue": "^3.2.25",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.1",
"autoprefixer": "^10.4.5",
"eslint": "^8.14.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-vue": "^8.7.1",
"husky": "^7.0.4",
"less": "^4.0.0",
"less-loader": "^10.2.0",
"mockjs": "^1.1.0",
"vite": "^2.9.18",
"vite-plugin-html": "^3.2.0"
},
"engines": {
"node": ">= 12.0.0",
"npm": ">= 6.9.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,19 @@
<template>
<div id="app">
<MyComponent />
</div>
</template>
<script>
import MyComponent from './components/MainPage.vue';
export default {
components: {
MyComponent
}
};
</script>
<style>
/* 你可以在这里添加全局样式 */
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

@ -0,0 +1,93 @@
<template>
<div class="gradient-1">
<transition name="fade">
<div class="container">
<div class="demo-login">
<Login @on-submit="handleSubmit">
<h3>用户登录</h3>
<br>
<UserName name="username" />
<Password name="password" />
<div class="demo-auto-login">
<Checkbox v-model="autoLogin" size="large"></Checkbox>
<a>忘记密码</a>
</div>
<Submit/>
<br>
<a href="" class="another">换种方式登录</a>
</Login>
</div>
</div>
</transition>
</div>
</template>
<script setup>
const autoLogin = true;
async function handleSubmit(valid, {username, password}){
if (valid) {
const user = {
name : username,
password : password
}
const res = await axios.post('https://localhost:8080/Login',user)
.then(response => {
//
this.$Message.success('登录成功')
})
.catch(error => {
//
this.$Message.info('error');
})
console.log(res);
}
};
</script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.gradient-1 {
width: 100%;
height: 100vh;
position: relative;
background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
}
.container{
height: 400px;
width: 300px;
border: pink solid 1px;
border-radius: 10px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-login{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
}
.demo-auto-login{
margin-bottom: 24px;
text-align: left;
}
.demo-auto-login a{
float: right;
}
h3{
color: #2d8cf0;
}
</style>

@ -0,0 +1,211 @@
<template>
<div class="gradient-1">
<div class="headArea">
<div class="haBody">
<div class="haBody-1">
<h1>
<a href="" class="logo">
<img src="../logo1.png" style="width: 100px; height: 50px;">
</a>
</h1>
</div>
<div class="haBody-2"></div>
<div class="haBody-3" @click="getMessage">
<div style="margin-top: 5px; margin-left: 30px;">
<Icon type="md-mail" size="40"/>
</div>
</div>
<div class="haBody-4">
<a href="">
<div class="AvaParent">
<Avatar icon="ios-person" size="large" class="Avatar"/>
</div>
</a>
</div>
</div>
</div>
<div class="bodyArea">
<div class="selectArea">
<div class="func-1">
<a href="">
<div class="sendGoods">我要寄件</div>
</a>
</div>
<div class="func-2">
<a href="">
<div class="getGoods">我要取件</div>
</a>
</div>
<div class="func-3">
<a href="">
<div class="quiryGoods">查询快递</div>
</a>
</div>
<div class="func-4">
<a href="">
<div class="changeInfo">修改个人信息</div>
</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
function getMessage(){
}
</script>
<style>
body{
background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
}
.gradient-1 {
width: 100%;
height: 100%;
position: relative;
}
.headArea {
height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.haBody{
display: flex;
justify-content: flex-end;
width: 75%;
height: 100%;
background-color: #eee;
}
.haBody-1{
background-image: url();
position:absolute;
left: 255px;
width: 100px;
height: 50px;
background-color: #eee;
}
.haBody-2{
width: 100px;
height: 50px;
background-color: #eee;
}
.haBody-3{
width: 100px;
height: 50px;
background-color: #eee;
}
.haBody-4{
padding-top: 5px;
padding-left: 23px;
width: 100px;
height: 50px;
background-color: #eee;
}
.logo{
text-decoration: none;
}
.AvaParent{
width: 40px;
height: 40px;
border-radius: 50%;
}
.bodyArea{
margin-left: auto;
margin-right: auto;
margin-top: 15px;
padding-top: 15px;
width: 75%;
height: 92%;
border-radius: 10px;
background-color: #eee;
}
.selectArea{
margin-left: auto;
margin-right: auto;
width: 95%;
height: 95%;
background-color: #eee;
}
.func-1{
background-color: #E0E0E0;
margin-top: 100px;
margin-left: 100px;
width: 400px;
height: 200px;
border-radius: 10px;
}
.func-2{
margin-top: -200px;
margin-left: 900px;
width: 400px;
height: 200px;
border-radius: 10px;
background-color: #E0E0E0;
}
.func-3{
margin-top: 200px;
margin-left: 100px;
width: 400px;
height: 200px;
border-radius: 10px;
background-color: #E0E0E0;
}
.func-4{
margin-top: -200px;
margin-left: 900px;
width: 400px;
height: 200px;
border-radius: 10px;
background-color: #E0E0E0;
}
*{
box-sizing:border-box;
overflow: hidden;
}
.sendGoods{
display: flex;
justify-content: center;
align-items: center;
margin-top: 75px;
letter-spacing: 10px;
font-size:xx-large;
color: black;
}
.getGoods{
display: flex;
justify-content: center;
align-items: center;
margin-top: 75px;
letter-spacing: 10px;
font-size:xx-large;
color: black;
}
.quiryGoods{
display: flex;
justify-content: center;
align-items: center;
margin-top: 75px;
letter-spacing: 10px;
font-size:xx-large;
color: black;
}
.changeInfo{
display: flex;
justify-content: center;
align-items: center;
margin-top: 75px;
letter-spacing: 10px;
font-size:xx-large;
color: black;
}
</style>

@ -0,0 +1,32 @@
<template>
<div class="demo-login">
<Login @on-submit="handleSubmit">
<Mobile name="mobile" />
<Captcha name="captcha" :field="['mobile']" @on-get-captcha="handleGetCaptcha" />
<Submit />
</Login>
</div>
</template>
<script>
export default {
methods: {
handleSubmit (valid, { mobile, captcha }) {
if (valid) {
this.$Modal.info({
title: '输入的内容如下:',
content: 'mobile: ' + mobile + ' | captcha: ' + captcha
});
}
},
handleGetCaptcha () {
this.$Message.info('获取验证码');
}
}
}
</script>
<style>
.demo-login{
width: 400px !important;
margin: 0 auto;
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -0,0 +1,17 @@
import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import './styles/index.less'
// import './mock'
const app = createApp(App)
app.use(router)
.use(ElementPlus)
.use(store)
.use(ViewUIPlus)
.mount('#app')

@ -0,0 +1,6 @@
import Mock from 'mockjs'
import './user'
Mock.setup({ timeout: 300 })
export default Mock

@ -0,0 +1,11 @@
import Mock from 'mockjs'
Mock.mock(/\/userList/, 'get', {
code: 200,
data: [
{
id: '@id',
name: '@name'
}
]
})

@ -0,0 +1,25 @@
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '../components/Login.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
routes,
history: createWebHistory(),
scrollBehavior() {
return { top: 0 }
}
})
export default router

@ -0,0 +1,8 @@
import { createStore } from 'vuex'
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {}
})

@ -0,0 +1,3 @@
@import '~view-ui-plus/src/styles/index.less';
//@primary-color: #8c0776;

@ -0,0 +1 @@
@font-size: 16px;

@ -0,0 +1,21 @@
<template>
<Demo/>
</template>
<script>
import Login from '@/components/Login.vue'
export default {
name: 'Home',
components: {
Login
},
setup() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>

@ -0,0 +1 @@
sout this is a test

@ -0,0 +1,75 @@
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
import { createHtmlPlugin } from 'vite-plugin-html'
import path from 'path'
const config = ({ mode }) => {
const isProd = mode === 'production'
const envPrefix = 'APP_'
const { APP_TITLE = '' } = loadEnv(mode, process.cwd(), envPrefix)
return {
plugins: [
vue(),
createHtmlPlugin({
minify: isProd,
inject: {
data: {
title: APP_TITLE,
},
}
})
],
build: {
target: 'es2015',
outDir: path.resolve(__dirname, 'dist'),
assetsDir: 'assets',
assetsInlineLimit: 8192,
sourcemap: !isProd,
emptyOutDir: true,
rollupOptions: {
input: path.resolve(__dirname, 'index.html'),
output: {
chunkFileNames: 'js/[name].[hash].js',
entryFileNames: 'js/[name].[hash].js',
// assetFileNames: "assets/[name].[hash].[ext]",
}
}
},
envPrefix,
resolve: {
alias: [
{ find: /^@\//, replacement: `${path.resolve(__dirname, 'src')}/` },
{ find: /^~/, replacement: '' }
],
extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
},
css: {
postcss: {
plugins: [
autoprefixer
],
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variable.less')}";`
}
}
},
server: {
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
},
preview: {
port: 5000
}
}
}
export default defineConfig(config)
Loading…
Cancel
Save