├── .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 `
5 |
6 |
7 |
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 `
5 |
6 |
7 |
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 |
2 |
3 |

4 |
5 |
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 |
2 |
3 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/src/views/HelloWorld/index.js:
--------------------------------------------------------------------------------
1 | import HelloWorld from './HelloWorld.vue'
2 | export {
3 | HelloWorld
4 | }
--------------------------------------------------------------------------------