├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── scripts ├── common.js ├── generateComponent │ ├── index.js │ └── template.js ├── generateStore │ ├── index.js │ └── template.js └── generateView │ ├── index.js │ └── template.js └── src ├── App.vue ├── assets ├── logo.png └── styles │ ├── base.css │ └── common.css ├── components └── index.js ├── main.js ├── router └── index.js ├── store ├── index.js └── mutationTypes.js ├── utils └── index.js └── views └── HelloWorld ├── HelloWorld.vue └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | /package-lock.json 2 | /src/*.DS_Store 3 | /src/assets/.DS_Store 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-tools 2 | Vue工具,快速创建view/conmoment/store,自动注册路由等,简化开发
3 | 可以使用命令行快速创建页面,组件,store等

4 | 优点:
5 | 1.减少手动敲代码的时间,自动注册路由,快速创建全局组件/局部组件,快速创建store
6 | 2.有助于统一文件命名,自动生成文件,view和component使用大驼峰命名,store使用小驼峰命名
7 | 3.使用node的优势帮助我们简化开发周期
8 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | "env":{ 6 | "development": { 7 | "plugins": ["dynamic-import-node"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mydemo1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "new:view": "node ./scripts/generateView/index", 10 | "new:comp": "node ./scripts/generateComponent/index", 11 | "new:store": "node ./scripts/generateStore/index" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.21.2", 15 | "element-ui": "^2.6.1", 16 | "vue": "^2.5.2", 17 | "vue-router": "^3.0.1", 18 | "vuex": "^3.0.1", 19 | "core-js": "^2.6.5" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.5.0", 23 | "@vue/cli-plugin-eslint": "^3.5.0", 24 | "@vue/cli-service": "^3.5.0", 25 | "babel-eslint": "^10.0.1", 26 | "eslint": "^5.16.0", 27 | "eslint-plugin-vue": "^5.0.0", 28 | "vue-template-compiler": "^2.5.21", 29 | "chalk": "^2.0.1" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "eslint:recommended" 39 | ], 40 | "rules": {}, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "postcss": { 46 | "plugins": { 47 | "autoprefixer": {} 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jeff-Bee/vue-tools/e64cdf426633460e97c678a8968bf864d1f0814f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | mydemo1 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /scripts/common.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk') 2 | const path = require('path') 3 | const fs = require('fs') 4 | const resolvePath = (...file) => path.resolve(__dirname, ...file) 5 | const log = message => console.log(chalk.green(`${message}`)) 6 | const successLog = message => console.log(chalk.blue(`${message}`)) 7 | const errorLog = error => console.log(chalk.red(`${error}`)) 8 | const resolveComponentName = componentName => { 9 | componentName = componentName.toLowerCase(); 10 | //截取单词,按大驼峰命名拼接 11 | let componentNameStr = componentName.split("|"); 12 | if (componentNameStr.length > 1) { 13 | componentNameStr = componentNameStr.map((item) => { 14 | if (item.trim()) { 15 | return item.substring(0, 1).toUpperCase() + item.substring(1); 16 | } 17 | return ''; 18 | }); 19 | return componentNameStr.join(''); 20 | } else { 21 | errorLog('格式错误!名称各单词之间用|隔开,单个单词如home|,多个单词如home|index') 22 | return ''; 23 | } 24 | } 25 | 26 | // 递归创建目录 27 | const mkdirs=(directory, callback)=> { 28 | var exists = fs.existsSync(directory) 29 | if (exists) { 30 | callback() 31 | } else { 32 | mkdirs(path.dirname(directory), function () { 33 | fs.mkdirSync(directory) 34 | callback() 35 | }) 36 | } 37 | } 38 | 39 | module.exports ={ 40 | dotExistDirectoryCreate : (directory) => { 41 | return new Promise((resolve) => { 42 | mkdirs(directory, function () { 43 | resolve(true) 44 | }) 45 | }) 46 | }, 47 | generateFile : (path, data) => { 48 | if (fs.existsSync(path)) { 49 | errorLog(`${path}文件已存在`) 50 | return 51 | } 52 | return new Promise((resolve, reject) => { 53 | fs.writeFile(path, data, 'utf8', err => { 54 | if (err) { 55 | errorLog(err.message) 56 | reject(err) 57 | } else { 58 | resolve(true) 59 | } 60 | }) 61 | }) 62 | }, 63 | path: path, 64 | chalk: chalk, 65 | fs: fs, 66 | log: log, 67 | successLog: successLog, 68 | errorLog: errorLog, 69 | resolvePath: resolvePath, 70 | resolveComponentName: resolveComponentName 71 | 72 | } -------------------------------------------------------------------------------- /scripts/generateComponent/index.js: -------------------------------------------------------------------------------- 1 | // index.js` 2 | //导入公用方法 3 | const { 4 | dotExistDirectoryCreate, 5 | generateFile, 6 | fs, 7 | log, 8 | resolvePath, 9 | successLog, 10 | errorLog, 11 | resolveComponentName 12 | } = require('../common.js'); 13 | const { 14 | componentTemplate, 15 | entryTemplate, 16 | globalRegisterImportTemplate, 17 | globalRegisterExportTemplate 18 | } = require('./template') 19 | 20 | log('请输入要生成的组件名称、会生成在 components/目录下,如需生成全局组件,请加 g/ 前缀,名称各单词之间用|隔开,单个单词如home|,多个单词如home|index') 21 | let componentName = '' 22 | let isGlobal=false 23 | process.stdin.on('data', async chunk => { 24 | const inputName = String(chunk).trim().toString() 25 | if (inputName.includes('/')) { 26 | const inputArr = inputName.split('/') 27 | componentName = inputArr[inputArr.length - 1] 28 | if (inputArr[0]=='g') 29 | { 30 | isGlobal=true; 31 | } 32 | else{ 33 | isGlobal = false; 34 | errorLog("设置全局参数前缀错误,无法全局注册"); 35 | } 36 | } else { 37 | componentName = inputName 38 | } 39 | //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接 40 | componentName = resolveComponentName(componentName); 41 | if (!componentName) { 42 | return; 43 | } 44 | /** 45 | * 组件目录路径 46 | */ 47 | const componentDirectory = resolvePath('../src/components', componentName) 48 | 49 | /** 50 | * vue组件路径 51 | */ 52 | const componentVueName = resolvePath(componentDirectory, `${componentName}.vue`) 53 | /** 54 | * 入口文件路径 55 | */ 56 | const entryComponentName = resolvePath(componentDirectory, 'index.js') 57 | 58 | const hasComponentDirectory = fs.existsSync(componentDirectory) 59 | if (hasComponentDirectory) { 60 | errorLog(`${componentName}组件目录已存在,请重新输入`) 61 | return 62 | } else { 63 | log(`正在生成 component 目录 ${componentDirectory}`) 64 | await dotExistDirectoryCreate(componentDirectory) 65 | } 66 | try { 67 | log(`正在生成 vue 文件 ${componentVueName}`) 68 | await generateFile(componentVueName, componentTemplate(componentName)) 69 | log(`正在生成 entry 文件 ${entryComponentName}`) 70 | await generateFile(entryComponentName, entryTemplate(componentName)) 71 | if (isGlobal) 72 | { 73 | log(`正在注册全局组件文件 ${componentName}`) 74 | await addGlobalComponent(componentName); 75 | } 76 | successLog('组件生成成功') 77 | } catch (e) { 78 | errorLog(e.message) 79 | } 80 | 81 | process.stdin.emit('end') 82 | }) 83 | process.stdin.on('end', () => { 84 | log('exit') 85 | process.exit() 86 | }) 87 | 88 | //添加全局注册 89 | function addGlobalComponent(fileName) { 90 | const file = resolvePath('../src/components', 'index.js'); 91 | return new Promise((resolve,reject)=>{ 92 | if (fs.existsSync(file)) { 93 | fs.readFile(file, 'utf-8', (err, data) => { 94 | if (err) { 95 | errorLog(err.message); 96 | reject(); 97 | } else { 98 | let dataStr = data.toString(); 99 | let importStr, exportStr; 100 | if (!dataStr) { 101 | emptyComponentAdd(file, fileName).then(()=>{ 102 | resolve(); 103 | }); 104 | return; 105 | } 106 | let dataList = dataStr.split("export"); 107 | if (dataList && dataList.length == 2) { 108 | importStr = dataList[0]; 109 | importStr += globalRegisterImportTemplate(fileName); 110 | exportStr = 'export' + dataList[1]; 111 | exportStr = exportStr.replace(/}/, globalRegisterExportTemplate(fileName)); 112 | let writeStr = importStr + '\n' + exportStr; 113 | writeDataToFile(file, writeStr).then(() => { 114 | resolve(); 115 | });; 116 | } else { 117 | errorLog("components/index.js格式不规范,请调整为标准格式后重试"); 118 | reject(); 119 | } 120 | } 121 | }); 122 | } else { 123 | emptyComponentAdd(file, fileName).then(()=>{ 124 | resolve(); 125 | }); 126 | } 127 | }) 128 | 129 | 130 | function emptyComponentAdd(file,fileName) { 131 | let importStr = globalRegisterImportTemplate(fileName); 132 | let exportStr = `export default (Vue) => {\n${globalRegisterExportTemplate(fileName)}`; 133 | let writeStr = importStr + '\n' + exportStr; 134 | return writeDataToFile(file, writeStr); 135 | } 136 | 137 | function writeDataToFile(file, data) { 138 | return new Promise((resolve,reject)=>{ 139 | fs.writeFile(file, data, { 140 | 'flag': 'w' 141 | }, function (err) { 142 | if (err) { 143 | errorLog(err.message); 144 | reject(); 145 | } 146 | successLog('全局注册成功!'); 147 | resolve(); 148 | }); 149 | }) 150 | 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /scripts/generateComponent/template.js: -------------------------------------------------------------------------------- 1 | // template.js 2 | module.exports = { 3 | componentTemplate: compoentName => { 4 | return ` 8 | 13 | ` 15 | }, 16 | entryTemplate: compoentName=> `import ${compoentName} from './${compoentName}.vue' 17 | export default ${compoentName}`, 18 | globalRegisterImportTemplate: compoentName => `import ${compoentName} from './${compoentName}/${compoentName}'`, 19 | globalRegisterExportTemplate: compoentName => `Vue.component(${compoentName}.name, ${compoentName})\n}` 20 | } 21 | -------------------------------------------------------------------------------- /scripts/generateStore/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | //导入公用方法 3 | const { 4 | dotExistDirectoryCreate, 5 | generateFile, 6 | fs, 7 | log, 8 | resolvePath, 9 | successLog, 10 | errorLog, 11 | resolveComponentName 12 | } = require('../common.js'); 13 | // 导入模板 14 | const { 15 | storeTemplate, 16 | storeRegisterImportTemplate, 17 | storeRegisterExportTemplate 18 | } = require('./template') 19 | 20 | log('请输入要生成的store名称、会生成在 store/modules/目录下,名称各单词之间用|隔开,单个单词如home|,多个单词如home|index') 21 | let componentName = '' 22 | process.stdin.on('data', async chunk => { 23 | // store名称 24 | const inputName = String(chunk).trim().toString() 25 | // 获取要创建的store名称 26 | if (inputName.includes('/')) { 27 | const inputArr = inputName.split('/') 28 | componentName = inputArr[inputArr.length - 1] 29 | } else { 30 | componentName = inputName 31 | } 32 | //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接 33 | componentName = resolveComponentName(componentName); 34 | if (!componentName) { 35 | return; 36 | } 37 | //store用小驼峰 38 | componentName = componentName.substring(0, 1).toLowerCase() + componentName.substring(1); 39 | // store跟页面路径 40 | const storePath = resolvePath('../src', "store") 41 | if (!fs.existsSync(storePath)) { 42 | log(`正在生成 store 文件夹`) 43 | await dotExistDirectoryCreate(storePath) 44 | } 45 | // store跟页面路径 46 | const componentPath = resolvePath(storePath, "modules") 47 | if (!fs.existsSync(componentPath)) { 48 | log(`正在生成 modules 文件夹`) 49 | await dotExistDirectoryCreate(componentPath) 50 | } 51 | // store文件 52 | const storeFile = resolvePath(componentPath, `${componentName}.js`) 53 | 54 | // 判断要创建的store文件是否存在 55 | const hasComponentExists = fs.existsSync(storeFile) 56 | if (hasComponentExists) { 57 | errorLog(`${inputName}文件已存在,请重新输入`) 58 | return 59 | } 60 | try { 61 | log(`正在生成 store 文件 ${storeFile}`) 62 | await generateFile(storeFile, storeTemplate(componentName)) 63 | log(`正在注册store文件 ${storeFile}`) 64 | await addStore(componentName); 65 | successLog('store生成成功') 66 | } catch (e) { 67 | errorLog(e.message) 68 | } 69 | 70 | process.stdin.emit('end') 71 | }) 72 | process.stdin.on('end', () => { 73 | log('exit') 74 | process.exit() 75 | }) 76 | 77 | function addStore(fileName) { 78 | const file = resolvePath('../src/store', 'index.js'); 79 | let storeListItem; 80 | return new Promise((resolve,reject)=>{ 81 | if (fs.existsSync(file)) { 82 | fs.readFile(file, 'utf-8', (err, data) => { 83 | if (err) { 84 | errorLog(err.message); 85 | reject(err.message); 86 | } else { 87 | let dataStr = data.toString(); 88 | if (!dataStr) { 89 | emptyIndexAdd(file, fileName).then(() => { 90 | resolve(); 91 | });; 92 | } else { 93 | addStoreResgiter(dataStr, fileName).then(() => { 94 | resolve(); 95 | });; 96 | } 97 | } 98 | }); 99 | } else { 100 | emptyIndexAdd(file, fileName).then(()=>{ 101 | resolve(); 102 | }); 103 | } 104 | }) 105 | 106 | function addStoreResgiter(dataStr, fileName) { 107 | return new Promise((resolve,reject)=>{ 108 | //1.根据Vue.use(Vuex)分割,0是import注册部分,1是引入部分 109 | let storeRegisterList = dataStr.split('Vue.use(Vuex)'); 110 | if (storeRegisterList && storeRegisterList.length==2) 111 | { 112 | let storeRegisterImport = storeRegisterList[0]; 113 | storeRegisterImport +=storeRegisterImportTemplate(fileName); 114 | let storeRegisterUse = storeRegisterList[1]; 115 | //匹配modules:{},往modules对象中加内容 116 | let reg = /(modules\s*:\s*\{)((.|\s)*?)\}/; 117 | let storeList = storeRegisterUse.match(reg); 118 | if (storeList && storeList.input) { 119 | storeListItem = storeList[1] + storeList[2] + (storeList[2].trim()?",":"") + storeRegisterExportTemplate(fileName) + "\n}"; 120 | dataStr = storeRegisterUse.replace(reg, storeListItem); 121 | dataStr = storeRegisterImport + "\nVue.use(Vuex)" + dataStr; 122 | console.log(dataStr); 123 | writeDataToFile(file, dataStr).then(()=>{ 124 | resolve(); 125 | }); 126 | } else { 127 | errorLog("store/index.js页面结构不正确,本次注册store失败!"); 128 | reject(); 129 | } 130 | }else{ 131 | errorLog("store/index.js页面结构不正确,本次注册store失败!"); 132 | reject(); 133 | } 134 | }) 135 | 136 | } 137 | 138 | function emptyIndexAdd(file, fileName) { 139 | let importStr = `import Vue from 'vue' 140 | import Vuex from 'vuex' 141 | import types from './mutationTypes' 142 | import ${fileName} from './modules/${fileName}' 143 | Vue.use(Vuex) 144 | export default new Vuex.Store({ 145 | types, 146 | modules: { 147 | ${fileName} 148 | } 149 | })`; 150 | return writeDataToFile(file, importStr); 151 | } 152 | 153 | function writeDataToFile(file, data) { 154 | return new Promise((resolve,reject)=>{ 155 | fs.writeFile(file, data, function (err) { 156 | console.log(err); 157 | if (err) { 158 | errorLog(err.message); 159 | reject(err.message); 160 | } 161 | successLog('store注册成功!'); 162 | resolve(); 163 | }); 164 | }); 165 | 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /scripts/generateStore/template.js: -------------------------------------------------------------------------------- 1 | // template.js 2 | module.exports = { 3 | storeTemplate: compoenntName => { 4 | return `const ${compoenntName} = { 5 | state: { 6 | }, 7 | getters: { 8 | }, 9 | actions: { 10 | }, 11 | mutations: { 12 | } 13 | } 14 | export default {...${compoenntName}}` 15 | }, 16 | storeRegisterImportTemplate: compoenntName => { 17 | return `import ${compoenntName} from './modules/${compoenntName}'`; 18 | }, 19 | storeRegisterExportTemplate: compoenntName => { 20 | return ` ${compoenntName}`; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scripts/generateView/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | //导入公用方法 3 | const { 4 | dotExistDirectoryCreate, 5 | generateFile, 6 | fs, 7 | log, 8 | resolvePath, 9 | successLog, 10 | errorLog, 11 | resolveComponentName 12 | } = require('../common.js'); 13 | // 导入模板 14 | const { 15 | viewTemplate, 16 | entryTemplate, 17 | viewRouterTemplate 18 | } = require('./template'); 19 | 20 | 21 | log('请输入要生成的页面名称、会生成在 views/目录下,页面名称各单词之间用|隔开,单个单词如home|,多个单词如home|index') 22 | let componentName = '' 23 | process.stdin.on('data', async chunk => { 24 | // 组件名称 25 | const inputName = String(chunk).trim().toString() 26 | // 获取组件名 27 | if (inputName.includes('/')) { 28 | const inputArr = inputName.split('/') 29 | componentName = inputArr[inputArr.length - 1] 30 | } else { 31 | componentName = inputName 32 | } 33 | //判断名字是否包含|,不包含提示错误,重新输入,包含则按大驼峰拼接 34 | componentName = resolveComponentName(componentName); 35 | if (!componentName) 36 | { 37 | return; 38 | } 39 | // Vue页面组件路径 40 | const componentPath = resolvePath('../src/views', componentName) 41 | // vue文件 42 | const vueFile = resolvePath(componentPath, `${componentName}.vue`) 43 | // 入口文件 44 | const entryFile = resolvePath(componentPath, 'index.js') 45 | // 判断组件文件夹是否存在 46 | const hasComponentExists = fs.existsSync(componentPath) 47 | if (hasComponentExists) { 48 | errorLog(`${inputName}页面组件已存在,请重新输入`) 49 | return 50 | } else { 51 | log(`正在生成 view 目录 ${componentPath}`) 52 | await dotExistDirectoryCreate(componentPath) 53 | } 54 | try { 55 | log(`正在生成 vue 文件 ${vueFile}`) 56 | await generateFile(vueFile, viewTemplate(componentName)) 57 | log(`正在生成 entry 文件 ${entryFile}`) 58 | await generateFile(entryFile, entryTemplate(componentName)) 59 | log(`正在注册路由文件 ${componentName}`) 60 | await addRouter(componentName); 61 | successLog('页面生成成功') 62 | } catch (e) { 63 | errorLog(e.message) 64 | } 65 | 66 | process.stdin.emit('end') 67 | }) 68 | process.stdin.on('end', () => { 69 | log('exit') 70 | process.exit() 71 | }) 72 | 73 | function addRouter(fileName) { 74 | const file = resolvePath('../src/router', 'index.js'); 75 | let reg = /(routes\s*:\s*\[)((.|\s)*?)\]/; 76 | let routerListItem; 77 | return new Promise((resolve, reject) => { 78 | if (fs.existsSync(file)) { 79 | fs.readFile(file, 'utf-8', (err, data) => { 80 | if (err) { 81 | errorLog(err.message); 82 | reject(); 83 | } else { 84 | let dataStr = data.toString(); 85 | if (!dataStr) { 86 | emptyIndexAdd(file, fileName).then(()=>{ 87 | resolve(); 88 | }); 89 | } else { 90 | let routerList = dataStr.match(reg); 91 | if (routerList && routerList.input) { 92 | routerListItem = routerList[1] + routerList[2] + (routerList[2].trim() ? 93 | "," : '') + viewRouterTemplate(fileName) + "]"; 94 | dataStr = dataStr.replace(reg, routerListItem); 95 | writeDataToFile(file, dataStr).then(()=>{ 96 | resolve(); 97 | }); 98 | 99 | } else { 100 | errorLog("router/index.js页面结构不正确,本次注册路由失败!"); 101 | reject(); 102 | } 103 | } 104 | } 105 | 106 | }) 107 | } else { 108 | emptyIndexAdd(file, fileName).then(()=>{ 109 | resolve(); 110 | }); 111 | } 112 | }); 113 | 114 | function emptyIndexAdd(file, fileName) { 115 | 116 | let importStr = ` 117 | import Vue from 'vue' 118 | import Router from 'vue-router' 119 | Vue.use(Router) 120 | let router = new Router({ 121 | mode: 'hash', 122 | routes: [ 123 | { 124 | path: '/${fileName}', 125 | name: ${fileName}, 126 | component: () => import("@/views/${fileName}/${fileName}") 127 | } 128 | ] 129 | }) 130 | router.beforeEach((to, from, next) => { 131 | next(); 132 | }) 133 | export default router 134 | ` 135 | return writeDataToFile(file, importStr); 136 | } 137 | 138 | function writeDataToFile(file, data) { 139 | return new Promise((resolve,reject)=>{ 140 | fs.writeFile(file, data, { 141 | 'flag': 'w' 142 | }, function (err) { 143 | if (err) { 144 | errorLog(err.message); 145 | reject(err.message); 146 | } 147 | successLog('路由注册成功!'); 148 | resolve(); 149 | }); 150 | }) 151 | 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /scripts/generateView/template.js: -------------------------------------------------------------------------------- 1 | // template.js 2 | module.exports = { 3 | viewTemplate: compoenntName => { 4 | return ` 8 | 13 | ` 15 | }, 16 | entryTemplate: compoenntName => { 17 | return `import ${compoenntName} from './${compoenntName}.vue' 18 | export { 19 | ${compoenntName} 20 | }` 21 | }, 22 | viewRouterTemplate: compoenntName => `{ 23 | path: '/${compoenntName.toLocaleLowerCase?compoenntName.toLocaleLowerCase():compoenntName}', 24 | name: '${compoenntName.toLocaleLowerCase?compoenntName.toLocaleLowerCase():compoenntName}', 25 | component: () => import("@/views/${compoenntName}/${compoenntName}") 26 | }\n` 27 | } 28 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 13 | 14 | 24 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jeff-Bee/vue-tools/e64cdf426633460e97c678a8968bf864d1f0814f/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/styles/base.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | menu, 72 | nav, 73 | output, 74 | ruby, 75 | section, 76 | summary, 77 | time, 78 | mark, 79 | audio, 80 | video, 81 | input { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font-weight: normal; 87 | vertical-align: baseline; 88 | box-sizing: border-box; 89 | } 90 | 91 | /* HTML5 display-role reset for older browsers */ 92 | article, 93 | aside, 94 | details, 95 | figcaption, 96 | figure, 97 | footer, 98 | header, 99 | menu, 100 | nav, 101 | section { 102 | display: block; 103 | } 104 | 105 | body { 106 | line-height: 1; 107 | } 108 | 109 | blockquote, 110 | q { 111 | quotes: none; 112 | } 113 | 114 | blockquote:before, 115 | blockquote:after, 116 | q:before, 117 | q:after { 118 | content: none; 119 | } 120 | 121 | table { 122 | border-collapse: collapse; 123 | border-spacing: 0; 124 | } 125 | 126 | /* custom */ 127 | a { 128 | color: #7e8c8d; 129 | text-decoration: none; 130 | -webkit-backface-visibility: hidden; 131 | } 132 | 133 | li { 134 | list-style: none; 135 | } 136 | 137 | ::-webkit-scrollbar { 138 | width: 5px; 139 | height: 5px; 140 | } 141 | 142 | ::-webkit-scrollbar-track-piece { 143 | background-color: rgba(0, 0, 0, 0.2); 144 | -webkit-border-radius: 6px; 145 | } 146 | 147 | ::-webkit-scrollbar-thumb:vertical { 148 | height: 5px; 149 | background-color: rgba(125, 125, 125, 0.7); 150 | -webkit-border-radius: 6px; 151 | } 152 | 153 | ::-webkit-scrollbar-thumb:horizontal { 154 | width: 5px; 155 | background-color: rgba(125, 125, 125, 0.7); 156 | -webkit-border-radius: 6px; 157 | } 158 | 159 | html, 160 | body { 161 | width: 100%; 162 | } 163 | 164 | body { 165 | -webkit-text-size-adjust: none; 166 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 167 | } -------------------------------------------------------------------------------- /src/assets/styles/common.css: -------------------------------------------------------------------------------- 1 | .normal_btn,.focus_btn{ 2 | cursor: pointer; 3 | box-shadow: 0 6px 10px 0 rgba(66,0,193,0.24); 4 | border:1px solid; 5 | color: #1817E6; 6 | border-color:#5A59FF #4D1EA9; 7 | } 8 | .normal_btn:hover{ 9 | opacity: 0.92; 10 | background: #EEEDFF; 11 | box-shadow: 0 4px 7px -2px rgba(66,0,193,0.24); 12 | } 13 | .focus_btn{ 14 | background-image: linear-gradient(-40deg,#5A59FF 0%, #6128CF 100%); 15 | color: #fff!important; 16 | } 17 | .focus_btn:hover{ 18 | opacity: 0.8; 19 | box-shadow: 0 6px 10px 0 rgba(66,0,193,0.10); 20 | } -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | 2 | export default(Vue) => { 3 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import components from './components' 4 | import ElementUI,{Message} from 'element-ui' 5 | import 'element-ui/lib/theme-chalk/index.css' 6 | import '@/assets/styles/base.css' 7 | import '@/assets/styles/common.css' 8 | 9 | Vue.config.productionTip = false 10 | Vue.use(components) 11 | Vue.use(ElementUI) 12 | Vue.prototype.$message = Message 13 | 14 | new Vue({ 15 | render: h => h(App), 16 | }).$mount('#app') 17 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | let router = new Router({ 7 | mode: 'hash', 8 | routes: [ 9 | 10 | { 11 | path: '/helloworld', 12 | name: 'helloworld', 13 | component: () => import("@/views/HelloWorld/HelloWorld") 14 | } 15 | ] 16 | }) 17 | export default router 18 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | let state = {} 6 | let getters = {} 7 | let mutations = {} 8 | let actions = {} 9 | export default new Vuex.Store({ 10 | state, 11 | getters, 12 | mutations, 13 | actions, 14 | modules: { 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /src/store/mutationTypes.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/views/HelloWorld/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 5 | 10 | -------------------------------------------------------------------------------- /src/views/HelloWorld/index.js: -------------------------------------------------------------------------------- 1 | import HelloWorld from './HelloWorld.vue' 2 | export { 3 | HelloWorld 4 | } --------------------------------------------------------------------------------