vue3.0 init

This commit is contained in:
xiaoxian521 2020-11-16 22:44:09 +08:00
parent 9bdbf56ec0
commit a6d76a34fa
28 changed files with 17480 additions and 14 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

View File

@ -1,30 +1,30 @@
# CURD-TS
# CURD-TS 正在开发中……
一套基于TS的增删改查系统前端语言Vue3.0、React、Angular后端语言node+express采用了三种数据库MySQL、MongoDB、SQLite编写。
A TS based add, delete, modify and query system, the front-end language vue3.0, react, angular, back-end language node + Express, using three kinds of database mysql, mongodb, SQLite
# 结构介绍
## 结构介绍
① sql为数据库存放文件夹
② doc为文档编写存放文件夹
③ backend为后端项目存放文件夹
④ frontend为前端项目存放文件夹
# Structure introduction
## Structure introduction
① SQL stores the folder for the database
② Doc write storage folder for documents
③ Backend stores the folder for the back-end project
④ Frontend stores the folder for the front-end project
# 前端对应代码存放目录
## 前端对应代码存放目录
vue => /frontend/vue-ts
react => /frontend/react-ts
angular => /frontend/angular-ts
# Front end corresponding code storage directory
## Front end corresponding code storage directory
vue => /frontend/vue-ts
react => /frontend/react-ts
angular => /frontend/angular-ts
# 注意点
## 注意点
① 接口文档使用Swagger
② 编写者必须严格遵守项目中tslint编写规则
③ 编写者必须严格遵循代码命名语义化、提高代码可读性
@ -33,7 +33,7 @@ angular => /frontend/angular-ts
⑥ 编写者提交代码发生冲突必须先解决在推送严禁使用git push -f origin 分支
⑦ 编写者无须在项目中放置.gitignore文件如需加入别的git忽略请放在CURD-TS文件夹跟目录的.gitignore文件
# Attention point
## Attention point
① Interface documents use swagger
② The author must strictly abide by the tslint writing rules in the project
③ The author must strictly follow the code naming semantics and improve the readability of the code

View File

@ -1,19 +1,19 @@
# 接口
# 安装依赖
## 安装依赖
```
npm install
```
# 项目启动
## 项目启动
```
npm run dev
```
# Swagger文档访问地址
## Swagger文档访问地址
http://localhost:3000
# 注意点
## 注意点
请先全局安装typescript、ts-node如安装请忽略
```
npm install -g typescript

View File

@ -2,17 +2,17 @@
简约而不简单的文档
# 安装依赖
## 安装依赖
```
npm install
```
# 文档启动
## 文档启动
```
npm run docs
```
# 文档打包
## 文档打包
```
npm run docs:build
```

BIN
frontend/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -0,0 +1 @@
# angular-ts

View File

@ -0,0 +1 @@
# react-ts

31
frontend/vue-ts/README.md Normal file
View File

@ -0,0 +1,31 @@
# vue-ts
## Project setup
```
npm install
```
## Compiles and hot-reloads for development
```
npm run serve
```
## Compiles and minifies for production
```
npm run build
```
## Run your unit tests
```
npm run test:unit
```
## Run your end-to-end tests
```
npm run test:e2e
```
## Lints and fixes files
```
npm run lint
```

View File

@ -0,0 +1,3 @@
{
"pluginsFile": "tests/e2e/plugins/index.js"
}

View File

@ -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.ts"></script>
</body>
</html>

View File

@ -0,0 +1,6 @@
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript',
transform: {
'^.+\\.vue$': 'vue-jest'
}
}

17156
frontend/vue-ts/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,46 @@
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vite",
"build": "vite build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0",
"axios": "0.21.0"
},
"devDependencies": {
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~3.9.3",
"vite": "^1.0.0-rc.9",
"vue-jest": "^5.0.0-0"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,3 @@
<template>
<router-view/>
</template>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -0,0 +1,6 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

View File

@ -0,0 +1,25 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: Home
},
// {
// 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(/* webpackChunkName: "about" */ '../views/About.vue')
// }
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

5
frontend/vue-ts/src/shims-vue.d.ts vendored Normal file
View File

@ -0,0 +1,5 @@
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

View File

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

View File

@ -0,0 +1,15 @@
<template>
<div>{{ text }}</div>
</template>
<script lang="ts">
import { ref } from "vue"
export default {
setup() {
const text = ref("vue-ts")
return {
text
}
}
}
</script>

View File

@ -0,0 +1,12 @@
module.exports = {
plugins: [
'cypress'
],
env: {
mocha: true,
'cypress/globals': true
},
rules: {
strict: 'off'
}
}

View File

@ -0,0 +1,25 @@
/* eslint-disable arrow-body-style */
// https://docs.cypress.io/guides/guides/plugins-guide.html
// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
// /* eslint-disable import/no-extraneous-dependencies, global-require */
// const webpack = require('@cypress/webpack-preprocessor')
module.exports = (on, config) => {
// on('file:preprocessor', webpack({
// webpackOptions: require('@vue/cli-service/webpack.config'),
// watchOptions: {}
// }))
return Object.assign({}, config, {
fixturesFolder: 'tests/e2e/fixtures',
integrationFolder: 'tests/e2e/specs',
screenshotsFolder: 'tests/e2e/screenshots',
videosFolder: 'tests/e2e/videos',
supportFile: 'tests/e2e/support/index.js'
})
}

View File

@ -0,0 +1,8 @@
// https://docs.cypress.io/api/introduction/api.html
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App')
})
})

View File

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

View File

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')

View File

@ -0,0 +1,12 @@
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
props: { msg }
})
expect(wrapper.text()).toMatch(msg)
})
})

View File

@ -0,0 +1,41 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}