diff --git a/index.js b/index.js index cbbe70a..3866ad7 100755 --- a/index.js +++ b/index.js @@ -10,23 +10,6 @@ import { red, cyan, blue } from 'kolorist' import prompts from 'prompts' import fs from 'iofs' import { resolve, join, dirname, normalize } from 'path' -import { - writePackageJson, - writeConfigFile, - writeGitIgnore, - writePrettierrc -} from './lib/demo-config.js' -import { writeHtmlFile } from './lib/demo-html.js' -import { writeLogo } from './lib/logo.js' -import { - writeMainJs, - writeAppVue, - writeHomeVue, - writeAboutVue, - writeHelloVue, - writeRouter, - writeStore -} from './lib/demo-js.js' const NODE_VERSION = +process.versions.node.split('.').slice(0, 2).join('.') const CURRENT_DIR = process.cwd() @@ -147,48 +130,55 @@ function sleep(num = 1) { let fiteVerion = await getFiteVersion() - fs.mkdir(join(targetDir, 'src')) - console.log('[c---------]', '10%') - writePackageJson(join(targetDir, 'package.json'), res.projectName, fiteVerion) - writeConfigFile(join(targetDir, 'fite.config.js')) - writeGitIgnore(join(targetDir, '.gitignore')) - writePrettierrc(join(targetDir, '.prettierrc.yaml')) - + if (res.isSPA) { + fs.cp(join(root, './lib/spa'), targetDir) + } else { + fs.cp(join(root, './lib/mpa'), targetDir) + } console.log('[ooc-------]', '30%') - writeHtmlFile(join(targetDir, 'index.html')) - - writeLogo(join(targetDir, 'src/assets/logo.svg')) - fs.cp(join(root, 'lib/favicon.ico'), join(targetDir, 'public/favicon.ico')) - + fs.cp(join(root, './lib/common'), targetDir) console.log('[oooooc----]', '60%') - if (res.isSPA) { - writeMainJs(join(targetDir, 'src/main.js')) - writeAppVue(join(targetDir, 'src/app.vue')) - writeHomeVue(join(targetDir, 'src/views/home.vue')) - writeAboutVue(join(targetDir, 'src/views/about.vue')) - writeHelloVue(join(targetDir, 'src/components/hello.vue')) - writeRouter(join(targetDir, 'src/router.js')) - writeStore(join(targetDir, 'src/store.js'), fiteVerion) - } else { - // index page - writeMainJs(join(targetDir, 'src/pages/index/main.js')) - writeAppVue(join(targetDir, 'src/pages/index/app.vue')) - writeHomeVue(join(targetDir, 'src/pages/index/views/home.vue')) - writeAboutVue(join(targetDir, 'src/pages/index/views/about.vue')) - writeHelloVue(join(targetDir, 'src/pages/index/components/hello.vue')) - writeRouter(join(targetDir, 'src/pages/index/router.js')) - writeStore(join(targetDir, 'src/pages/index/store.js'), fiteVerion) + { + fs.echo( + ` +import { reactive } from 'vue' - // demo page - writeMainJs(join(targetDir, 'src/pages/demo/main.js', true)) - writeAppVue(join(targetDir, 'src/pages/demo/app.vue', true)) +const store = reactive({ + foo: 'bar', + version: '${fiteVerion}' +}) + +export default function (app) { + app.config.globalProperties.$store = store +} +`, + join(targetDir, res.isSPA ? 'src/store.js' : 'src/pages/index/store.js') + ) + + fs.echo( + ` +{ + "name": "fite-app", + "type": "module", + "scripts": { + "start": "fite dev", + "build": "fite build", + "build:keep": "fite build --no-clean" + }, + "devDependencies": { + "fite": "^${fiteVerion}" + } +} + `, + join(targetDir, 'package.json') + ) } - console.log('[oooooooooo]', '100%') + console.log(cyan('初始化完成, 可依次执行以下命令启动项目: ')) console.log(blue('npm i')) console.log(blue('npm start')) diff --git a/lib/common/.gitignore b/lib/common/.gitignore new file mode 100644 index 0000000..2dde5ab --- /dev/null +++ b/lib/common/.gitignore @@ -0,0 +1,16 @@ + +dist +node_modules + +*.sublime-project +*.sublime-workspace +package-lock.json + +._* + +.Spotlight-V100 +.Trashes +.DS_Store +.AppleDouble +.LSOverride + diff --git a/lib/common/.prettierrc.yaml b/lib/common/.prettierrc.yaml new file mode 100644 index 0000000..6734234 --- /dev/null +++ b/lib/common/.prettierrc.yaml @@ -0,0 +1,11 @@ + +jsxBracketSameLine: true +jsxSingleQuote: true +semi: false +singleQuote: true +printWidth: 80 +useTabs: false +tabWidth: 2 +trailingComma: none +bracketSpacing: true +arrowParens: avoid diff --git a/lib/demo-html.js b/lib/common/index.html similarity index 56% rename from lib/demo-html.js rename to lib/common/index.html index 1c0a616..9666934 100644 --- a/lib/demo-html.js +++ b/lib/common/index.html @@ -1,14 +1,4 @@ -/** - * {} - * @author yutent - * @date 2022/10/10 17:00:29 - */ - -import fs from 'iofs' - -export function writeHtmlFile(file) { - fs.echo( - ` + @@ -17,16 +7,15 @@ export function writeHtmlFile(file) { {{title}} - - + + + {{#if process.env.NODE_ENV === 'development' }} + + {{#/if}} -
+
-`, - file - ) -} diff --git a/lib/favicon.ico b/lib/common/public/favicon.ico similarity index 100% rename from lib/favicon.ico rename to lib/common/public/favicon.ico diff --git a/lib/common/src/assets/logo.svg b/lib/common/src/assets/logo.svg new file mode 100644 index 0000000..e2a9ebf --- /dev/null +++ b/lib/common/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lib/common/src/components/hello.vue b/lib/common/src/components/hello.vue new file mode 100644 index 0000000..019fa52 --- /dev/null +++ b/lib/common/src/components/hello.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/lib/demo-config.js b/lib/demo-config.js deleted file mode 100644 index c1bbcfc..0000000 --- a/lib/demo-config.js +++ /dev/null @@ -1,114 +0,0 @@ -/** - * {} - * @author yutent - * @date 2022/10/10 16:49:07 - */ - -import fs from 'iofs' - -export function writePackageJson(file, name, version) { - fs.echo( - JSON.stringify( - { - name: name || 'fite-app', - type: 'module', - scripts: { - start: 'fite dev', - build: 'fite build' - }, - devDependencies: { - fite: `^${version}` - } - }, - null, - 2 - ), - file - ) -} - -export function writeConfigFile(file) { - fs.echo( - ` -import { resolve } from 'path' - -export default { - devServer: { - port: 8080, - domain: '', - https: false, - ssl: { - key: '', - cert: '', - // ca: '' - } - }, - pages: { - // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式) - // 这里的key值, 将是最终的页面的名称 - index: { - // 这里的resolve可将相对路径转为绝对路径 - // 如果传入的路径已经是绝对路径的, 可不需要resolve - entry: resolve('./src/main.js'), - title: 'vue-live 应用示例' - } - }, - // 以下cdn地址, 可自行修改为适合的 - // 有用到其他的库, 可以手动添加, - // 也可以在页面中直接引入完整的路径, 而不必须在这里声明 - imports: { - vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js', - // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果 - // 如需要支持devtools的, 请修改为原版vue-router地址即可。 - 'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js', - // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js', - // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js', - fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js' - } -} - -`, - file - ) -} - -export function writeGitIgnore(file) { - fs.echo( - ` -dist -node_modules - -*.sublime-project -*.sublime-workspace -package-lock.json - -._* - -.Spotlight-V100 -.Trashes -.DS_Store -.AppleDouble -.LSOverride - -`, - file - ) -} - -export function writePrettierrc(file) { - fs.echo( - ` -jsxBracketSameLine: true -jsxSingleQuote: true -semi: false -singleQuote: true -printWidth: 80 -useTabs: false -tabWidth: 2 -trailingComma: none -bracketSpacing: true -arrowParens: avoid -`, - file - ) -} diff --git a/lib/demo-js.js b/lib/demo-js.js deleted file mode 100644 index 5f13e53..0000000 --- a/lib/demo-js.js +++ /dev/null @@ -1,307 +0,0 @@ -/** - * {} - * @author yutent - * @date 2022/10/10 17:00:29 - */ - -import fs from 'iofs' - -export function writeMainJs(file, demo) { - fs.echo( - ` -import { createApp } from 'vue' -import App from './app.vue' - - -import store from './store' -${demo ? '' : `import router from './router'`} - -const app = createApp(App) - -${ - demo - ? `app.use(store).mount('.app')` - : `app.use(router).use(store).mount('.app')` -} - - -`, - file - ) -} - -export function writeRouter(file) { - fs.echo( - ` -import { createRouter, createWebHistory } from 'vue-router' -import Home from './views/home.vue' - -const router = createRouter({ - history: createWebHistory(), - routes: [ - { - path: '/', - name: 'home', - component: Home - }, - { - path: '/about', - name: 'about', - component: () => import('./views/about.vue') - } - ] -}) - -export default router - - -`, - file - ) -} - -export function writeStore(file, version) { - fs.echo( - ` -import { reactive } from 'vue' - -const store = reactive({ - foo: 'bar', - version: '${version}' -}) - -export default function (app) { - app.config.globalProperties.$store = store -} -`, - file - ) -} - -export function writeAppVue(file, demo) { - if (demo) { - fs.echo( - ` - - - - - `, - file - ) - } else { - fs.echo( - ` - - - - - - - -`, - file - ) - } -} - -export function writeHelloVue(file) { - fs.echo( - ` - - - - - - -`, - file - ) -} - -export function writeHomeVue(file) { - fs.echo( - ` - - - - -`, - file - ) -} - -export function writeAboutVue(file) { - fs.echo( - ` - - - - -`, - file - ) -} diff --git a/lib/logo.js b/lib/logo.js deleted file mode 100644 index 37d7b05..0000000 --- a/lib/logo.js +++ /dev/null @@ -1,8 +0,0 @@ -import fs from 'iofs' - -export function writeLogo(file) { - fs.echo( - '', - file - ) -} diff --git a/lib/mpa/fite.config.js b/lib/mpa/fite.config.js new file mode 100644 index 0000000..cb90baf --- /dev/null +++ b/lib/mpa/fite.config.js @@ -0,0 +1,58 @@ +import { resolve } from 'path' + +export default { + // 用于配置部署目录, 默认为根目录, 如果需要部署到二级目录的话, + // 请取消以下注释, 并填写你最终需要部署的二级目录名, 必须以 / 开头及结尾。如: '/foo/' + // base: '/', + devServer: { + port: 8080, + domain: '', + https: false, + ssl: { + key: '', + cert: '' + // ca: '' //可选 + } + }, + // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式) + pages: { + // 这里的key值, 将是最终的页面的名称 + index: { + // 这里的resolve可将相对路径转为绝对路径 + // 如果传入的路径已经是绝对路径的, 可不需要resolve + entry: resolve('./src/pages/index/main.js'), + title: 'fite-app 应用示例' + }, + login: { + // 这里的resolve可将相对路径转为绝对路径 + // 如果传入的路径已经是绝对路径的, 可不需要resolve + entry: resolve('./src/pages/login/main.js'), + title: 'fite-app 登录示例' + }, + // 还可单独将某个页面放到二级目录中 (这里的 @ 只是示例所用, 不是必须的, 但用到的字符,应该为url安全的字符) + '@foo/bar': { + // 这里的resolve可将相对路径转为绝对路径 + // 如果传入的路径已经是绝对路径的, 可不需要resolve + entry: resolve('./src/pages/@foo/bar/main.js'), + title: '特殊页面示例' + } + }, + inject: { + // v1.0.1之后, 可以注入一个scss, 所有的vue文件中的样式都会被注入这个公共scss + // 注意: 该文件不支持热更新, 不可被vue/js文件引用 (但可以被其他的scss文件引用) + scss: resolve('./src/inject.scss') + }, + // 以下cdn地址, 可自行修改为适合的 + // 有用到其他的库, 可以手动添加, + // 也可以在页面中直接引入完整的路径, 而不必须在这里声明 + imports: { + vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js', + // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果 + // 如需要支持devtools的, 请修改为原版vue-router地址即可。 + 'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js', + // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js', + // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js', + fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js', + '@bd/core': '//jscdn.ink/@bd/core/latest/index.js' + } +} diff --git a/lib/mpa/src/inject.scss b/lib/mpa/src/inject.scss new file mode 100644 index 0000000..f8fb149 --- /dev/null +++ b/lib/mpa/src/inject.scss @@ -0,0 +1,5 @@ +@for $i from 1 to 3 { + .fo-#{$i} { + color: red; + } +} diff --git a/lib/mpa/src/pages/@foo/bar/app.vue b/lib/mpa/src/pages/@foo/bar/app.vue new file mode 100644 index 0000000..d7d3a96 --- /dev/null +++ b/lib/mpa/src/pages/@foo/bar/app.vue @@ -0,0 +1,135 @@ + + + + + + + diff --git a/lib/mpa/src/pages/@foo/bar/main.js b/lib/mpa/src/pages/@foo/bar/main.js new file mode 100644 index 0000000..8aef29b --- /dev/null +++ b/lib/mpa/src/pages/@foo/bar/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './app.vue' + +createApp(App).mount('#app') diff --git a/lib/mpa/src/pages/index/app.vue b/lib/mpa/src/pages/index/app.vue new file mode 100644 index 0000000..07bbe3d --- /dev/null +++ b/lib/mpa/src/pages/index/app.vue @@ -0,0 +1,88 @@ + + + + + + + diff --git a/lib/mpa/src/pages/index/main.js b/lib/mpa/src/pages/index/main.js new file mode 100644 index 0000000..01ddc6b --- /dev/null +++ b/lib/mpa/src/pages/index/main.js @@ -0,0 +1,7 @@ +import { createApp } from 'vue' +import App from './app.vue' + +import router from './router' +import store from './store' + +createApp(App).use(router).use(store).mount('#app') diff --git a/lib/mpa/src/pages/index/router.js b/lib/mpa/src/pages/index/router.js new file mode 100644 index 0000000..ea669d0 --- /dev/null +++ b/lib/mpa/src/pages/index/router.js @@ -0,0 +1,23 @@ + +import { createRouter, createWebHistory } from 'vue-router' +import Home from './views/home.vue' + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + name: 'home', + component: Home + }, + { + path: '/about', + name: 'about', + component: () => import('./views/about.vue') + } + ] +}) + +export default router + + diff --git a/lib/mpa/src/pages/index/views/about.vue b/lib/mpa/src/pages/index/views/about.vue new file mode 100644 index 0000000..d44f23e --- /dev/null +++ b/lib/mpa/src/pages/index/views/about.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/lib/mpa/src/pages/index/views/home.vue b/lib/mpa/src/pages/index/views/home.vue new file mode 100644 index 0000000..797f67b --- /dev/null +++ b/lib/mpa/src/pages/index/views/home.vue @@ -0,0 +1,17 @@ + + + diff --git a/lib/mpa/src/pages/login/app.vue b/lib/mpa/src/pages/login/app.vue new file mode 100644 index 0000000..c15492e --- /dev/null +++ b/lib/mpa/src/pages/login/app.vue @@ -0,0 +1,80 @@ + + + + + + + diff --git a/lib/mpa/src/pages/login/main.js b/lib/mpa/src/pages/login/main.js new file mode 100644 index 0000000..8aef29b --- /dev/null +++ b/lib/mpa/src/pages/login/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './app.vue' + +createApp(App).mount('#app') diff --git a/lib/spa/fite.config.js b/lib/spa/fite.config.js new file mode 100644 index 0000000..ae6fbf2 --- /dev/null +++ b/lib/spa/fite.config.js @@ -0,0 +1,44 @@ +import { resolve } from 'path' + +export default { + // 用于配置部署目录, 默认为根目录, 如果需要部署到二级目录的话, + // 请取消以下注释, 并填写你最终需要部署的二级目录名, 必须以 / 开头及结尾。如: '/foo/' + // base: '/', + devServer: { + port: 8080, + domain: '', + https: false, + ssl: { + key: '', + cert: '' + // ca: '' //可选 + } + }, + // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式) + pages: { + // 这里的key值, 将是最终的页面的名称 + index: { + // 这里的resolve可将相对路径转为绝对路径 + // 如果传入的路径已经是绝对路径的, 可不需要resolve + entry: resolve('./src/main.js'), + title: 'fite-app 应用示例' + } + }, + inject: { + // v1.0.1之后, 可以注入一个scss, 所有的vue文件中的样式都会被注入这个公共scss + // 注意: 该文件不支持热更新, 不可被vue/js文件引用 (但可以被其他的scss文件引用) + scss: resolve('./src/inject.scss') + }, + // 以下cdn地址, 可自行修改为适合的 + // 有用到其他的库, 可以手动添加, + // 也可以在页面中直接引入完整的路径, 而不必须在这里声明 + imports: { + vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js', + // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果 + // 如需要支持devtools的, 请修改为原版vue-router地址即可。 + 'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js', + // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js', + // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js', + fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js' + } +} diff --git a/lib/spa/src/app.vue b/lib/spa/src/app.vue new file mode 100644 index 0000000..acc728b --- /dev/null +++ b/lib/spa/src/app.vue @@ -0,0 +1,83 @@ + + + + + + + diff --git a/lib/spa/src/main.js b/lib/spa/src/main.js new file mode 100644 index 0000000..01ddc6b --- /dev/null +++ b/lib/spa/src/main.js @@ -0,0 +1,7 @@ +import { createApp } from 'vue' +import App from './app.vue' + +import router from './router' +import store from './store' + +createApp(App).use(router).use(store).mount('#app') diff --git a/lib/spa/src/router.js b/lib/spa/src/router.js new file mode 100644 index 0000000..ea669d0 --- /dev/null +++ b/lib/spa/src/router.js @@ -0,0 +1,23 @@ + +import { createRouter, createWebHistory } from 'vue-router' +import Home from './views/home.vue' + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + name: 'home', + component: Home + }, + { + path: '/about', + name: 'about', + component: () => import('./views/about.vue') + } + ] +}) + +export default router + + diff --git a/lib/spa/src/views/about.vue b/lib/spa/src/views/about.vue new file mode 100644 index 0000000..d44f23e --- /dev/null +++ b/lib/spa/src/views/about.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/lib/spa/src/views/home.vue b/lib/spa/src/views/home.vue new file mode 100644 index 0000000..797f67b --- /dev/null +++ b/lib/spa/src/views/home.vue @@ -0,0 +1,17 @@ + + + diff --git a/package.json b/package.json index c8b2eae..fa55732 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "create-fite-app", "type": "module", - "version": "1.0.0", + "version": "1.1.0", "bin": { "create-fite-app": "index.js" },