Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5517c25

Browse files
author
coderwhy
committed
增加addpage addstore功能,readme
1 parent8cc739b commit5517c25

File tree

10 files changed

+203
-36
lines changed

10 files changed

+203
-36
lines changed

‎lib/core/actions.js‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
const{ promisify}=require('util');
22
constpath=require('path');
3+
constfs=require('fs');
34

45
constprogram=require('commander');
56
constdownloadRepo=promisify(require('download-git-repo'));
67
constopen=require('open');
78

89
constlog=require('../utils/log');
910
constterminal=require('../utils/terminal');
10-
const{ ejsCompile, writeFile}=require('../utils/file');
11+
const{ ejsCompile, writeFile, mkdirSync}=require('../utils/file');
1112
constrepoConfig=require('../config/repo_config');
1213

1314
constcreateProject=async(project,otherArg)=>{
@@ -19,7 +20,7 @@ const createProject = async (project, otherArg) => {
1920

2021
// 3.执行终端命令npm install
2122
// terminal.exec('npm install', {cwd: `./${project}`});
22-
constnpm=project.platform==='win32' ?'npm.cmd' :'npm';
23+
constnpm=process.platform==='win32' ?'npm.cmd' :'npm';
2324
awaitterminal.spawn(npm,['install'],{cwd:`./${project}`});
2425

2526
// 4.打开浏览器
@@ -29,19 +30,35 @@ const createProject = async (project, otherArg) => {
2930
awaitterminal.spawn(npm,['run','serve'],{cwd:`./${project}`});
3031
}
3132

32-
constaddComponent=async(name)=>{
33-
console.log(name,program.dest);
34-
33+
consthandleEjsToFile=async(name,dest,template,filename)=>{
3534
// 1.获取模块引擎的路径
36-
consttemplatePath=path.resolve(__dirname,'../template/component.vue.ejs');
37-
constresult=awaitejsCompile(templatePath,{name});
35+
consttemplatePath=path.resolve(__dirname,template);
36+
constresult=awaitejsCompile(templatePath,{name,lowerName:name.toLowerCase()});
3837

3938
// 2.写入文件中
40-
consttargetPath=path.resolve(program.dest,`${name}.vue`);
39+
// 判断文件不存在,那么就创建文件
40+
mkdirSync(dest);
41+
consttargetPath=path.resolve(dest,filename);
4142
writeFile(targetPath,result);
4243
}
4344

45+
constaddComponent=async(name,dest)=>{
46+
handleEjsToFile(name,dest,'../template/component.vue.ejs',`${name}.vue`);
47+
}
48+
49+
constaddPage=async(name,dest)=>{
50+
addComponent(name,dest);
51+
handleEjsToFile(name,dest,'../template/vue-router.js.ejs','router.js')
52+
}
53+
54+
constaddStore=async(name,dest)=>{
55+
handleEjsToFile(name,dest,'../template/vue-store.js.ejs','index.js')
56+
handleEjsToFile(name,dest,'../template/vue-types.js.ejs','types.js')
57+
}
58+
4459
module.exports={
4560
createProject,
46-
addComponent
61+
addComponent,
62+
addPage,
63+
addStore
4764
}

‎lib/core/create.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ const program = require('commander');
22

33
const{
44
createProject,
5-
addComponent
5+
addComponent,
6+
addPage,
7+
addStore
68
}=require('./actions');
79

810
constcreateCommands=()=>{
@@ -14,13 +16,27 @@ const createCommands = () => {
1416

1517
program
1618
.command('addcpn <name>')
17-
.description('add vue component, 例如: coderwhy addcpn NavBar -d src/components')
18-
.action(addComponent)
19+
.description('add vue component, 例如: coderwhy addcpn NavBar [-d src/components]')
20+
.action(name=>addComponent(name,program.dest||'src/components'))
21+
22+
program
23+
.command('addpage <name>')
24+
.description('add vue page, 例如: coderwhy addpage Home [-d dest]')
25+
.action(name=>{
26+
addPage(name,program.dest||`src/pages/${name.toLowerCase()}`)
27+
})
28+
29+
program
30+
.command('addstore <name>')
31+
.description('add vue store, 例如: coderwhy addstore favor [-d dest]')
32+
.action(name=>{
33+
addStore(name,program.dest||`src/store/modules/${name.toLowerCase()}`)
34+
})
1935

2036
program.command('test').action(()=>{
2137
// terminal.spawn("npm", ['--version']);
2238
// terminal.exec("npm --version");
23-
// open('http://localhost:8080/');
39+
// open('http://localhost:8080/');`
2440
})
2541
}
2642

‎lib/template/component.vue.ejs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<%_if(data) { _%>
22
<template>
3-
<divclass="<%= data.name %>">
3+
<divclass="<%= data.lowerName %>">
44
<h2>{{ message }}</h2>
55
</div>
66
</template>
@@ -36,7 +36,7 @@
3636
</script>
3737
3838
<style scoped>
39-
.<%=data.name%> {
39+
.<%=data.lowerName%> {
4040
4141
}
4242
</style>

‎lib/template/test.vue‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎lib/template/vue-router.js.ejs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<%_if (data) { _%>
2+
// 普通加载路由
3+
// import <%= data.name %> from './<%= data.name %>.vue'
4+
// 懒加载路由
5+
const <%=data.name%>= ()=>import('./<%= data.name %>.vue')
6+
exportdefault {
7+
path:'/<%= data.lowerName %>',
8+
name:'<%= data.name %>',
9+
component:<%=data.name%>,
10+
children: [
11+
]
12+
}
13+
<%_ } _%>

‎lib/template/vue-store.js.ejs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as types from './types.js'
2+
export default {
3+
namespaced: true,
4+
state: {
5+
},
6+
mutations: {
7+
},
8+
actions: {
9+
},
10+
getters: {
11+
}
12+
}

‎lib/template/vue-types.js.ejs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export {
2+
3+
}

‎lib/utils/file.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
constfs=require('fs');
2+
constpath=require('path');
23
constejs=require('ejs');
34

45
constlog=require('./log');
@@ -23,7 +24,21 @@ const writeFile = (path, content) => {
2324
returnfs.promises.writeFile(path,content);
2425
}
2526

27+
constmkdirSync=(dirname)=>{
28+
if(fs.existsSync(dirname)){
29+
returntrue
30+
}else{
31+
// 不存在,判断父亲文件夹是否存在？
32+
if(mkdirSync(path.dirname(dirname))){
33+
// 存在父亲文件，就直接新建该文件
34+
fs.mkdirSync(dirname)
35+
returntrue
36+
}
37+
}
38+
}
39+
2640
module.exports={
2741
ejsCompile,
28-
writeFile
42+
writeFile,
43+
mkdirSync
2944
}

‎package.json‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
{
22
"name":"coderwhy",
3-
"version":"1.0.0",
4-
"description":"a frontendhelper tools",
3+
"version":"1.1.0",
4+
"description":"CLI front-enddevelopment tools",
55
"main":"index.js",
66
"bin": {
77
"coderwhy":"index.js"
88
},
99
"scripts": {
1010
"test":"echo\"Error: no test specified\" && exit 1"
1111
},
12-
"keywords": [],
13-
"author":"",
14-
"license":"ISC",
12+
"keywords": ["vue","react","CLI","component"],
13+
"author":"coderwhy",
14+
"license":"MIT",
15+
"homepage":"https://github.com/coderwhy/coderwhy",
16+
"repository": {
17+
"type":"git",
18+
"url":"https://github.com/coderwhy/coderwhy"
19+
},
1520
"dependencies": {
1621
"chalk":"^4.1.0",
1722
"commander":"^6.1.0",

‎readme.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
#说明文档
2+
##`coderwhy`: 一个帮助你快速搭建和开发前端项目的CLI
3+
4+
>想不起来其他名字，以这个命名吧~
5+
6+
##创建项目
7+
8+
目前支持Vue，后期会支持React，Angular考虑中~
9+
10+
vue项目模块已经帮你配置：
11+
12+
* 常用的目录结构（你可以在此基础上修改）
13+
* vue.config.js（其中配置了别名，你可以自行修改和配置更多）
14+
* axios（网络请求axios的安装以及二次封装）
15+
* vue-router（router的安装和配置，另外有路由的动态加载，后面详细说明）
16+
* vuex（vuex的安装和配置，另外有动态加载子模块，后面详细说明）
17+
18+
创建项目
19+
20+
```shell
21+
coderwhy create your_project_name
22+
```
23+
24+
自动拉取项目模板、安装项目依赖、打开浏览器`http://localhost:8080/`、自动启动项目
25+
26+
27+
28+
##项目开发
29+
30+
项目开发目前提供三个功能：
31+
32+
* 创建Vue组件
33+
* 创建Vue页面，并配置路由
34+
* 创建Vuex子模块
35+
36+
37+
38+
###创建Vue组件：
39+
40+
````shell
41+
coderwhy addcpn YourComponentName# 例如coderwhy add NavBar，默认会存放到src/components文件夹中
42+
coderwhy addcpn YourComponentName -d src/pages/home# 也可以指定存放的具体文件夹
43+
````
44+
45+
46+
47+
###创建Vue页面，并配置路由
48+
49+
```shell
50+
coderwhy addpage YourPageName# 例如coderwhy addpage Home，默认会放到src/pages/home/Home.vue中，并且会创建src/page/home/router.js
51+
coderwhy addpage YourPageName -d src/views# 也可以指定文件夹，但需要手动集成路由
52+
```
53+
54+
为什么会创建router.js文件：
55+
56+
*`router.js`文件是路由的其中一个配置；
57+
* 创建该文件中`src/router/index.js`中会自动加载到路由的`routes`配置中，不需要手动配置了（如果是自己配置的文件夹需要手动配置）
58+
59+
`src/router/index.js`中已经完成如下操作：
60+
61+
```js
62+
// 动态加载pages中所有的路由文件
63+
constfiles=require.context('@/pages',true,/router\.js$/);
64+
constroutes=files.keys().map(key=> {
65+
constpage=require('@/pages'+key.replace('.',''));
66+
returnpage.default;
67+
})
68+
```
69+
70+
71+
72+
###创建Vuex子模块
73+
74+
```shell
75+
coderwhy addstore YourVuexChildModuleName# 例如coderwhy addstore home，默认会放到src/store/modules/home/index.js和types.js
76+
coderwhy addstore YourVuexChildModuleName -d src/vuex/modules# 也可以指定文件夹
77+
```
78+
79+
创建完成后，不需要手动配置，已经动态将所有子模块集成进去：
80+
81+
```js
82+
// 动态加载modules
83+
constmodules= {}
84+
constfiles=require.context('./',true,/index\.js$/);
85+
files.keys().filter(key=> {
86+
if (key==='./index.js')returnfalse;
87+
returntrue
88+
}).map(key=> {
89+
// 获取名字
90+
constmodulePath=key.replace('./modules/','');
91+
constmoduleName=modulePath.replace('/index.js','');
92+
constmodule=require(`${key}`);
93+
94+
modules[`${moduleName}`]=module.default;
95+
})
96+
```
97+
98+
99+
100+
101+

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp