├── .npmrc ├── .browserslistrc ├── .stylelintignore ├── .vscode └── settings.json ├── .husky ├── pre-commit ├── commit-msg └── _ │ └── husky.sh ├── src ├── assets │ ├── logo.png │ └── emoji.png ├── datepicker.png ├── index.less ├── shims-vue.d.ts ├── index.ts ├── store │ └── index.ts ├── router │ └── index.ts ├── apis │ └── index.ts ├── index.scss ├── components │ ├── Me.vue │ └── HelloWorld.vue ├── slide.scss └── App.vue ├── .gitignore ├── postcss.config.js ├── .prettierrc ├── commit ├── publish.js ├── git-commit.js └── promps.js ├── .stylelintrc.js ├── commitlint.config.js ├── .travis.yml ├── .editorconfig ├── vite.config.ts ├── babel.config.js ├── .eslintrc.js ├── tsconfig.json ├── index.html ├── static ├── head.json └── whiteScreenTime.js ├── README.md └── package.json /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # 支持的浏览器版本 2 | last 1 version 3 | > 1% 4 | not dead -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.png 3 | *.eot 4 | *.ttf 5 | *.woff 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run precommit 5 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxpsuper/createVue/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/datepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxpsuper/createVue/HEAD/src/datepicker.png -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run commitlint 5 | -------------------------------------------------------------------------------- /src/assets/emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zxpsuper/createVue/HEAD/src/assets/emoji.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | dist/ 8 | .deploy*/ -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // CSS后处理 2 | module.exports = { 3 | plugins: [ 4 | require('autoprefixer') 5 | ], 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "useTabs": false, 6 | "singleQuote": true 7 | } 8 | -------------------------------------------------------------------------------- /src/index.less: -------------------------------------------------------------------------------- 1 | // index.less 2 | .suporka { 3 | display: block; 4 | position: relative; 5 | right: 0; 6 | left: 0; 7 | width: 100px; 8 | font-size: 12px; 9 | } 10 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | 4 | const component: DefineComponent<{}, {}, any> 5 | export default component 6 | } 7 | -------------------------------------------------------------------------------- /commit/publish.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @desc 静态资源push到gh-pages分支 3 | */ 4 | var ghpages = require('gh-pages') 5 | ghpages.publish( 6 | './dist', 7 | { 8 | branch: 'gh-pages', 9 | }, 10 | function (err) { 11 | console.log(err) 12 | console.log('docs同步完成!') 13 | } 14 | ) 15 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["stylelint-config-standard", "css-properties-sorting"], 3 | plugins: ["stylelint-order"], // stylelint-order是CSS属性排序插件 4 | rules: { 5 | "no-duplicate-selectors": null, 6 | "declaration-block-no-shorthand-property-overrides": null, 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | 'type-enum': [2, 'always', [ 5 | 'build', 'chore', 'ci', 'feat', 'docs', 'fix', 'perf', 'revert', 'refactor', 'style', 'test', 'init', 'build', 'release', 'delete' 6 | ]], 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式 2 | import router from './router/index' 3 | import store from './store/index' 4 | import App from './App.vue' // 引入 APP 页面组建 5 | import './index.scss' 6 | import './index.less' 7 | 8 | const app = createApp(App) // 通过 createApp 初始化 app 9 | app.use(router).use(store).mount('#app') // 将页面挂载到 root 节点 10 | -------------------------------------------------------------------------------- /commit/git-commit.js: -------------------------------------------------------------------------------- 1 | const shell = require('shelljs') 2 | const inquirer = require('inquirer') 3 | const prompsConfig = require('./promps') 4 | 5 | async function gitCommit() { 6 | let { type } = await inquirer.prompt(prompsConfig.ciType) 7 | let { msg } = await inquirer.prompt(prompsConfig.ciMsg) 8 | 9 | shell.exec(`git commit -m "${type}: ${msg}"`, function () { 10 | console.log(`\n提交脚本: git commit -m "${type}: ${msg}"`) 11 | }) 12 | } 13 | 14 | gitCommit() 15 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | branchs: 5 | only: 6 | - master 7 | cache: 8 | directories: 9 | - node_modules 10 | install: 11 | - yarn install 12 | scripts: 13 | - yarn build 14 | deploy: 15 | provider: pages 16 | local_dir: dist 17 | skip_cleanup: true 18 | # 在 GitHub 上生成的令牌，允许 Travis 推送代码到你的仓库。 19 | # 在仓库对应的 Travis 设置页面中配置，用于安全控制。 20 | github_token: $GITHUB_TOKEN 21 | keep_history: true 22 | on: 23 | branch: master 24 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | 3 | # 表示是最顶层的 EditorConfig 配置文件 4 | root = true 5 | 6 | [*] # 表示所有文件适用 7 | charset = utf-8 # 设置文件字符集为 utf-8 8 | indent_style = space # 缩进风格（tab | space） 9 | indent_size = 2 # 缩进大小 10 | end_of_line = lf # 控制换行类型(lf | cr | crlf) 11 | trim_trailing_whitespace = true # 去除行首的任意空白字符 12 | insert_final_newline = true # 始终在文件末尾插入一个新行 13 | 14 | [*.md] # 表示仅 md 文件适用以下规则 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue' 2 | import { resolve } from 'path' 3 | import { defineConfig } from 'vite' 4 | 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | publicDir: './static', 8 | define: { 9 | 'process.env': { 10 | VUE_BASE_URL: '/', 11 | BUILD_TIME: new Date().toLocaleString(), 12 | }, 13 | }, 14 | resolve: { 15 | extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], 16 | alias: { 17 | '@': resolve('src'), 18 | }, 19 | }, 20 | }) 21 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import 'es6-promise/auto' 2 | import { createStore } from 'vuex' 3 | 4 | export default createStore({ 5 | state: { 6 | count: 0, 7 | suporka: 'suporka', 8 | }, 9 | mutations: { 10 | increment(state) { 11 | state.count++ 12 | }, 13 | decrement(state) { 14 | state.count-- 15 | }, 16 | }, 17 | actions: { 18 | countUp(ctx) { 19 | ctx.commit('increment') 20 | }, 21 | countDown(ctx) { 22 | ctx.commit('decrement') 23 | }, 24 | }, 25 | modules: {}, 26 | }) 27 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | useBuiltIns: 'usage', // 按需引入 polyfill 7 | corejs: 3, 8 | }, 9 | ], 10 | [ 11 | '@babel/preset-typescript', // 引用Typescript插件 12 | { 13 | allExtensions: true, // 支持所有文件扩展名，否则在vue文件中使用ts会报错 14 | }, 15 | ], 16 | ], 17 | plugins: [ 18 | [ 19 | '@babel/plugin-transform-runtime', 20 | { 21 | corejs: 3, 22 | }, 23 | ], 24 | '@babel/proposal-class-properties', 25 | '@babel/proposal-object-rest-spread', 26 | ], 27 | } 28 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { createRouter, createWebHashHistory } from 'vue-router' 3 | // 路由懒加载 4 | const HelloWorld = () => import('@/components/HelloWorld.vue') 5 | const Me = () => import('@/components/Me.vue') 6 | const router = createRouter({ 7 | history: createWebHashHistory(), 8 | routes: [ 9 | { path: '/', redirect: { name: 'introduce' } }, 10 | { 11 | path: '/introduce', 12 | name: 'introduce', 13 | component: HelloWorld, 14 | }, 15 | { 16 | path: '/me', 17 | name: 'me', 18 | component: Me, 19 | }, 20 | ], 21 | }) 22 | 23 | export default router 24 | -------------------------------------------------------------------------------- /src/apis/index.ts: -------------------------------------------------------------------------------- 1 | import axios, { AxiosRequestConfig } from 'axios' 2 | 3 | export default { 4 | post(url: string, data: any, config: AxiosRequestConfig) { 5 | if (!config) { 6 | config = { 7 | headers: { 8 | 'Content-Type': 'application/x-www-form-urlencoded', 9 | }, 10 | } 11 | } 12 | return axios.post(url, data, config).then((res) => { 13 | return Promise.resolve(res.data) 14 | }) 15 | }, 16 | get(url: string, data: AxiosRequestConfig) { 17 | return axios.get(url, { params: data }).then((res) => { 18 | return Promise.resolve(res.data) 19 | }) 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /.husky/_/husky.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | if [ -z "$husky_skip_init" ]; then 3 | debug () { 4 | [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1" 5 | } 6 | 7 | readonly hook_name="$(basename "$0")" 8 | debug "starting $hook_name..." 9 | 10 | if [ "$HUSKY" = "0" ]; then 11 | debug "HUSKY env variable is set to 0, skipping hook" 12 | exit 0 13 | fi 14 | 15 | if [ -f ~/.huskyrc ]; then 16 | debug "sourcing ~/.huskyrc" 17 | . ~/.huskyrc 18 | fi 19 | 20 | export readonly husky_skip_init=1 21 | sh -e "$0" "$@" 22 | exitCode="$?" 23 | 24 | if [ $exitCode != 0 ]; then 25 | echo "husky - $hook_name hook exited with code $exitCode (error)" 26 | exit $exitCode 27 | fi 28 | 29 | exit 0 30 | fi 31 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | node: true, 4 | browser: true, 5 | es6: true, 6 | commonjs: true, 7 | }, 8 | // plugin:prettier/recommended：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出 9 | extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly', 13 | }, 14 | parserOptions: { 15 | parser: '@typescript-eslint/parser', 16 | ecmaVersion: 2018, 17 | sourceType: 'module', 18 | }, 19 | plugins: ['vue', '@typescript-eslint'], 20 | rules: { 21 | 'no-console': 'off', 22 | 'import/no-unresolved': 'off', 23 | 'import/extensions': 'off', 24 | 'no-plusplus': 'off', 25 | 'no-param-reassign': 'off', 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | // index.scss 2 | .haha { 3 | color: blue; 4 | } 5 | $animation-time: 0.3s; 6 | $ease-in-out: ease-in-out; 7 | @mixin motion-common() { 8 | animation-duration: $animation-time; 9 | animation-fill-mode: both; 10 | } 11 | 12 | @mixin make-motion($className, $keyframeName) { 13 | .#{$className}-enter-active, 14 | .#{$className}-appear { 15 | @include motion-common(); 16 | animation-play-state: paused; 17 | } 18 | .#{$className}-leave-active { 19 | @include motion-common(); 20 | animation-play-state: paused; 21 | } 22 | .#{$className}-enter-active, 23 | .#{$className}-appear { 24 | animation-name: '#{$keyframeName}In'; 25 | animation-play-state: running; 26 | } 27 | .#{$className}-leave-active { 28 | animation-name: '#{$keyframeName}Out'; 29 | animation-play-state: running; 30 | } 31 | } 32 | 33 | @import './slide.scss'; 34 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "checkJs": true, 7 | "strict": true, 8 | "jsx": "preserve", 9 | "importHelpers": true, 10 | "moduleResolution": "node", 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "sourceMap": true, 15 | "noEmit": true, 16 | "isolatedModules": true, 17 | "baseUrl": ".", 18 | "types": ["node", "webpack-env"], 19 | "paths": { 20 | "@/*": ["src/*"] 21 | }, 22 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 23 | }, 24 | "include": [ 25 | "src/**/*.ts", 26 | "src/**/*.tsx", 27 | "src/**/*.vue", 28 | "tests/**/*.ts", 29 | "tests/**/*.tsx" 30 | ], 31 | "exclude": ["node_modules"] 32 | } 33 | -------------------------------------------------------------------------------- /src/components/Me.vue: -------------------------------------------------------------------------------- 1 | 17 | 30 | 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Suporka Vue App 6 | 10 | 11 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /static/head.json: -------------------------------------------------------------------------------- 1 | { 2 | "user": [ 3 | { 4 | "name": "首页", 5 | "child": [ 6 | { "name": "JavaScript" }, 7 | { "name": "Html" }, 8 | { "name": "Css" } 9 | ] 10 | }, 11 | { 12 | "name": "前端", 13 | "child": [ 14 | { "name": "JavaScript" }, 15 | { "name": "Html" }, 16 | { "name": "Css" } 17 | ] 18 | }, 19 | { 20 | "name": "后端", 21 | "child": [ 22 | { "name": "Python" }, 23 | { "name": "Java" }, 24 | { "name": "Go" } 25 | ] 26 | }, 27 | { 28 | "name": "财会金融", 29 | "child": [ 30 | { "name": "初级会计" }, 31 | { "name": "中级会计" }, 32 | { "name": "注册会计(CPA)" }, 33 | { "name": "特许金融分析师(CFA)" } 34 | ] 35 | }, 36 | { 37 | "name": "案例及总结", 38 | "child": [ 39 | { "name": "前端案例总结" }, 40 | { "name": "后端案例总结" }, 41 | { "name": "财会金融案例" } 42 | ] 43 | }, 44 | { 45 | "name": "其他", 46 | "child": [ 47 | { "name": "JavaScript" }, 48 | { "name": "Html" }, 49 | { "name": "Css" } 50 | ] 51 | } 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # createVue 2 | 3 | ## 项目介绍 4 | 5 | - 本项目基于 webpack5 搭建 vue3 + ts 项目。[相关文章](https://juejin.cn/post/6955430382485553166) 6 | 7 | - 你可以用此项目搭建属于你的项目！！ 8 | 9 | - 熬夜不易，如果您觉得我的文章或者 demo 有用，可以赏我杯咖啡(^\_−)☆ 10 | 11 | - webpack4 搭建 vue 项目点 [这里](https://github.com/zxpsuper/createVue/tree/v1.0.0) 12 | 13 |
14 | 微信 15 | 16 |
17 | 18 |
19 |
20 | 21 | **另外，我也做了一个[《从零搭建 react 的项目》](https://github.com/zxpsuper/createReact), 分享给大家** 22 | 23 | > 在 github 项目的右上角，有三个按钮,分别是 watch、star、fork，新来的同学注意不要用错了，无休止的邮件提醒会给你造成不必要的信息干扰。 24 | > 25 | > 当你选择 Watching，表示你以后会关注这个项目的全部动态，以后只要这个项目发生变动，被别人提交了 pull request、被发起了 issue 等情况你都会收到邮件通知。 26 | > 27 | > star 相当于是点赞或收藏，方便以后查找。 28 | > 29 | > fork 表示你想要补充完善这个项目的内容。 30 | 31 | ![](https://github.com/zxpsuper/Demo/blob/master/images/fork_and_star.jpg) 32 | 33 | ## 使用方法： 34 | 35 | ```shell 36 | # 克隆项目 37 | git clone https://github.com/zxpsuper/createVue.git 38 | # 进入文件夹 39 | cd createVue 40 | 41 | # 安装依赖 42 | npm install 43 | 44 | # 进入开发 45 | npm start 46 | 47 | # 打包 48 | npm run build 49 | 50 | # git commit 51 | npm run commit 52 | ``` 53 | 54 | 55 | ## 更新日志 56 | ### :sunny:2022/07/21 57 | 58 | - 限定 node 版本为 14.18.0. 目前项目中所用的部分模块并不支持最新的 node 版本。开发者可以通过 nvm 切换版本 14.18.0 尝试 59 | - npm install 并不会提示 node 版本不匹配，建议用 yarn 60 | 61 | #### :sunny:2022/02/28 62 | 63 | - 添加对 vite 的支持，可与 webpack 同时使用。目前测试 vite 打包的体积会更小 64 | 65 | #### :sunny:2021/04/17 66 | 67 | - 添加 vue-router 68 | 69 | - 添加 vuex 70 | 71 | ## 关于作者 :boy: 72 | 73 | 作者： 小皮咖 74 | 75 | Email：zxpscau@163.com 76 | 77 | Github: https://github.com/zxpsuper 78 | 79 | 知乎：https://www.zhihu.com/people/super-32-94-54/activities 80 | 81 | 掘金：https://juejin.im/user/5af17df4518825672a02e1f5 82 | 83 | 对内容有任何疑问，欢迎联系我。 84 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 46 | 47 | 48 | 72 | -------------------------------------------------------------------------------- /static/whiteScreenTime.js: -------------------------------------------------------------------------------- 1 | function WhiteScreenTime() { 2 | this.lastModifyTime = new Date().getTime() 3 | } 4 | WhiteScreenTime.prototype.updateLastModifyTime = function() { 5 | this.lastModifyTime = new Date().getTime() 6 | let that = this 7 | let imgs = document.getElementsByTagName('img') 8 | for (let item of imgs) { 9 | item.onload = function(params) { 10 | that.lastModifyTime = new Date().getTime() 11 | } 12 | } 13 | } 14 | WhiteScreenTime.prototype.showData = function() { 15 | let t = performance.timing 16 | console.log( 17 | 'DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0) + 'ms' 18 | ) 19 | console.log( 20 | 'TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0) + 'ms' 21 | ) 22 | console.log( 23 | 'request请求耗时 ：' + 24 | (t.responseEnd - t.responseStart).toFixed(0) + 25 | 'ms' 26 | ) 27 | console.log( 28 | '解析dom树耗时 ：' + 29 | (t.domComplete - t.domInteractive).toFixed(0) + 30 | 'ms' 31 | ) 32 | 33 | console.log( 34 | 'domready时间 ：' + 35 | (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0) + 36 | 'ms' 37 | ) 38 | console.log( 39 | 'onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0) + 'ms' 40 | ) 41 | console.log( 42 | '白屏时间 ：' + 43 | (t.responseStart - t.navigationStart).toFixed(0) + 44 | 'ms（浏览器开始渲染 标签或者解析完 标签的时刻就是页面白屏结束的时间点）' 45 | ) 46 | console.log( 47 | '首屏时间 ：' + 48 | (this.lastModifyTime - t.navigationStart).toFixed(0) + 49 | 'ms（最后一张图片加载时间减浏览器处理当前网页的启动时间）' 50 | ) 51 | if ((t = performance.memory)) { 52 | console.log( 53 | 'js内存使用占比 ：' + 54 | ((t.usedJSHeapSize / t.totalJSHeapSize) * 100).toFixed(2) + 55 | '%' 56 | ) 57 | } 58 | } 59 | window.whiteScreenTime = new WhiteScreenTime() 60 | window.onload = function() { 61 | window.whiteScreenTime.updateLastModifyTime() 62 | } 63 | -------------------------------------------------------------------------------- /commit/promps.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ciType: [ 3 | { 4 | type: 'list', 5 | name: 'type', 6 | message: '请选择本次提交的类型:', 7 | choices: [ 8 | { 9 | name: '引入新特性', 10 | value: 'feat', 11 | }, 12 | { 13 | name: '改进代码的结构格式/样式', 14 | value: 'style', 15 | }, 16 | { 17 | name: '修复 bug', 18 | value: 'fix', 19 | }, 20 | { 21 | name: '提升性能', 22 | value: 'perf', 23 | }, 24 | { 25 | name: '删除代码或文件', 26 | value: 'delete', 27 | }, 28 | { 29 | name: '其他修改, 比如改变构建流程、或者增加依赖库、工具等', 30 | value: 'chore', 31 | }, 32 | { 33 | name: '重构', 34 | value: 'refactor', 35 | }, 36 | { 37 | name: '撰写文档', 38 | value: 'docs', 39 | }, 40 | { 41 | name: '增加测试', 42 | value: 'test', 43 | }, 44 | { 45 | name: '更新打包文件', 46 | value: 'build', 47 | }, 48 | { 49 | name: '初次提交', 50 | value: 'init', 51 | }, 52 | { 53 | name: '发布/版本标签', 54 | value: 'release', 55 | }, 56 | { 57 | name: '部署功能', 58 | value: 'deploy', 59 | }, 60 | { 61 | name: '代码回滚', 62 | value: 'revert', 63 | }, 64 | { 65 | name: 'CI持续集成修改', 66 | value: 'ci', 67 | }, 68 | ], 69 | }, 70 | ], 71 | ciMsg: { 72 | type: 'input', 73 | name: 'msg', 74 | message: '请输入提交文本:', 75 | validate: function (value) { 76 | if (value) { 77 | return true 78 | } 79 | return '文本必须输入!' 80 | }, 81 | }, 82 | comptName: { 83 | type: 'input', 84 | name: 'name', 85 | message: '请输入组件名称:', 86 | validate: function (value) { 87 | if (/^[\-a-z]+$/.test(value)) { 88 | return true 89 | } 90 | return '组件名称只能包含小写字母和横杠(-)!' 91 | }, 92 | }, 93 | compConfig: [ 94 | { 95 | type: 'confirm', 96 | name: 'needConfig', 97 | message: '是否需要组件配置文件(普通组件不需要)', 98 | default: false, 99 | }, 100 | ], 101 | } 102 | -------------------------------------------------------------------------------- /src/slide.scss: -------------------------------------------------------------------------------- 1 | @mixin slide-motion($className, $keyframeName) { 2 | @include make-motion($className, $keyframeName); 3 | .#{$className}-enter-active, 4 | .#{$className}-appear { 5 | opacity: 0; 6 | animation-timing-function: $ease-in-out; 7 | } 8 | .#{$className}-leave-active { 9 | animation-timing-function: $ease-in-out; 10 | } 11 | } 12 | 13 | @include slide-motion(transition-drop, ivuTransitionDrop); 14 | @include slide-motion(slide-up, ivuSlideUp); 15 | @include slide-motion(slide-down, ivuSlideDown); 16 | @include slide-motion(slide-left, ivuSlideLeft); 17 | @include slide-motion(slide-right, ivuSlideRight); 18 | 19 | @keyframes ivuTransitionDropIn { 20 | 0% { 21 | opacity: 0; 22 | transform: scaleY(0.8); 23 | } 24 | 100% { 25 | opacity: 1; 26 | transform: scaleY(1); 27 | } 28 | } 29 | 30 | @keyframes ivuTransitionDropOut { 31 | 0% { 32 | opacity: 1; 33 | transform: scaleY(1); 34 | } 35 | 100% { 36 | opacity: 0; 37 | transform: scaleY(0.8); 38 | } 39 | } 40 | 41 | @keyframes ivuSlideUpIn { 42 | 0% { 43 | opacity: 0; 44 | transform-origin: 0% 0%; 45 | transform: scaleY(0.8); 46 | } 47 | 100% { 48 | opacity: 1; 49 | transform-origin: 0% 0%; 50 | transform: scaleY(1); 51 | } 52 | } 53 | 54 | @keyframes ivuSlideUpOut { 55 | 0% { 56 | opacity: 1; 57 | transform-origin: 0% 0%; 58 | transform: scaleY(1); 59 | } 60 | 100% { 61 | opacity: 0; 62 | transform-origin: 0% 0%; 63 | transform: scaleY(0.8); 64 | } 65 | } 66 | 67 | @keyframes ivuSlideDownIn { 68 | 0% { 69 | opacity: 0; 70 | transform-origin: 100% 100%; 71 | transform: scaleY(0.8); 72 | } 73 | 100% { 74 | opacity: 1; 75 | transform-origin: 100% 100%; 76 | transform: scaleY(1); 77 | } 78 | } 79 | 80 | @keyframes ivuSlideDownOut { 81 | 0% { 82 | opacity: 1; 83 | transform-origin: 100% 100%; 84 | transform: scaleY(1); 85 | } 86 | 100% { 87 | opacity: 0; 88 | transform-origin: 100% 100%; 89 | transform: scaleY(0.8); 90 | } 91 | } 92 | 93 | @keyframes ivuSlideLeftIn { 94 | 0% { 95 | opacity: 0; 96 | transform-origin: 0% 0%; 97 | transform: scaleX(0.8); 98 | } 99 | 100% { 100 | opacity: 1; 101 | transform-origin: 0% 0%; 102 | transform: scaleX(1); 103 | } 104 | } 105 | 106 | @keyframes ivuSlideLeftOut { 107 | 0% { 108 | opacity: 1; 109 | transform-origin: 0% 0%; 110 | transform: scaleX(1); 111 | } 112 | 100% { 113 | opacity: 0; 114 | transform-origin: 0% 0%; 115 | transform: scaleX(0.8); 116 | } 117 | } 118 | 119 | @keyframes ivuSlideRightIn { 120 | 0% { 121 | opacity: 0; 122 | transform-origin: 100% 0%; 123 | transform: scaleX(0.8); 124 | } 125 | 100% { 126 | opacity: 1; 127 | transform-origin: 100% 0%; 128 | transform: scaleX(1); 129 | } 130 | } 131 | 132 | @keyframes ivuSlideRightOut { 133 | 0% { 134 | opacity: 1; 135 | transform-origin: 100% 0%; 136 | transform: scaleX(1); 137 | } 138 | 100% { 139 | opacity: 0; 140 | transform-origin: 100% 0%; 141 | transform: scaleX(0.8); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "createvue", 3 | "version": "1.0.0", 4 | "description": "none", 5 | "main": "index.js", 6 | "engines": { 7 | "node" : "~14.18.0" 8 | }, 9 | "scripts": { 10 | "precommit": "lint-staged", 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "start": "webpack serve --progress --hot --inline --config build/webpack.dev.js", 13 | "vite": "vite", 14 | "vite:build": "vite build", 15 | "vite:preview": "vite preview", 16 | "commit": "node commit/git-commit.js", 17 | "check-types": "tsc --watch", 18 | "build": "webpack --config build/webpack.prod.js", 19 | "publish": "npm run build && node commit/publish.js", 20 | "lintcss": "stylelint --fix \"src/**/*.less\" --syntax less", 21 | "commitlint": "commitlint -e" 22 | }, 23 | "lint-staged": { 24 | "src/**/*.{js,json,css,vue}": [ 25 | "prettier --write", 26 | "eslint --fix ./src --ext .vue,.js,.ts" 27 | ], 28 | "*.{html,vue,css,sass,scss,less}": [ 29 | "stylelint --fix" 30 | ] 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "git+https://github.com/zxpsuper/createVue.git" 35 | }, 36 | "keywords": [ 37 | "create", 38 | "vue" 39 | ], 40 | "author": "suporka", 41 | "license": "MIT", 42 | "bugs": { 43 | "url": "https://github.com/zxpsuper/createVue/issues" 44 | }, 45 | "homepage": "https://github.com/zxpsuper/createVue#readme", 46 | "devDependencies": { 47 | "@babel/cli": "^7.13.16", 48 | "@babel/core": "^7.13.16", 49 | "@babel/plugin-proposal-class-properties": "^7.13.0", 50 | "@babel/plugin-proposal-object-rest-spread": "^7.13.8", 51 | "@babel/plugin-transform-runtime": "^7.13.15", 52 | "@babel/preset-env": "^7.13.15", 53 | "@babel/preset-typescript": "^7.13.0", 54 | "@commitlint/cli": "^12.1.1", 55 | "@commitlint/config-conventional": "^12.1.1", 56 | "@types/node": "^14.14.41", 57 | "@types/webpack-env": "^1.16.0", 58 | "@typescript-eslint/eslint-plugin": "^4.22.0", 59 | "@typescript-eslint/parser": "^4.22.0", 60 | "@vitejs/plugin-vue": "^2.2.2", 61 | "@vue/compiler-sfc": "^3.0.11", 62 | "autoprefixer": "^10.2.5", 63 | "babel-eslint": "^10.1.0", 64 | "babel-loader": "^8.2.2", 65 | "copy-webpack-plugin": "^8.1.1", 66 | "css-loader": "^5.2.2", 67 | "css-minimizer-webpack-plugin": "^2.0.0", 68 | "css-properties-sorting": "^1.0.10", 69 | "dayjs": "^1.10.4", 70 | "eslint": "^7.24.0", 71 | "eslint-config-airbnb-base": "^14.2.1", 72 | "eslint-config-prettier": "^8.3.0", 73 | "eslint-plugin-import": "^2.22.1", 74 | "eslint-plugin-prettier": "^3.4.0", 75 | "eslint-plugin-vue": "^7.9.0", 76 | "file-loader": "^6.2.0", 77 | "fork-ts-checker-webpack-plugin": "^6.2.4", 78 | "friendly-errors-webpack-plugin": "^1.7.0", 79 | "gh-pages": "^3.1.0", 80 | "happypack": "^5.0.1", 81 | "hard-source-webpack-plugin": "^0.13.1", 82 | "html-webpack-plugin": "^5.3.1", 83 | "husky": "^6.0.0", 84 | "inquirer": "^8.0.0", 85 | "less": "^4.1.1", 86 | "less-loader": "^8.1.1", 87 | "lint-staged": "^10.5.4", 88 | "mini-css-extract-plugin": "^1.4.1", 89 | "optimize-css-assets-webpack-plugin": "^5.0.4", 90 | "pinst": "^2.1.6", 91 | "postcss": "^8.2.10", 92 | "postcss-loader": "^5.2.0", 93 | "prettier": "^2.2.1", 94 | "sass": "^1.32.10", 95 | "sass-loader": "^11.0.1", 96 | "shelljs": "^0.8.4", 97 | "style-loader": "^2.0.0", 98 | "stylelint": "^13.13.0", 99 | "stylelint-config-standard": "^22.0.0", 100 | "stylelint-order": "^4.1.0", 101 | "ts-loader": "^8.1.0", 102 | "typescript": "^4.2.4", 103 | "uglifyjs-webpack-plugin": "^2.2.0", 104 | "uniq": "^1.0.1", 105 | "url-loader": "^4.1.1", 106 | "vue-loader": "^16.2.0", 107 | "webpack": "^5.33.2", 108 | "webpack-bundle-analyzer": "^4.4.1", 109 | "webpack-cli": "^4.6.0", 110 | "webpack-dev-server": "^3.11.2", 111 | "webpack-merge": "^5.7.3", 112 | "workbox-webpack-plugin": "^6.1.5" 113 | }, 114 | "dependencies": { 115 | "@babel/runtime": "^7.13.17", 116 | "@babel/runtime-corejs3": "^7.13.17", 117 | "@vitejs/plugin-vue": "^2.2.2", 118 | "axios": "^0.21.1", 119 | "core-js": "^3.11.0", 120 | "es6-promise": "^4.2.5", 121 | "vue": "^3.0.11", 122 | "vue-router": "^4.0.6", 123 | "vite": "^2.8.4", 124 | "vuex": "^4.0.0" 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 59 | 60 | 210 | --------------------------------------------------------------------------------