From: Haoqun Jiang Date: Tue, 10 Aug 2021 13:12:08 +0000 (+0800) Subject: feat: add vuex option X-Git-Tag: v3.0.0-alpha.2~11 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=864b60c45052a7d74cfbc34f8da4b1d39b85b111;p=thirdparty%2Fvuejs%2Fcreate-vue.git feat: add vuex option `main.js/ts` template is extracted to a standalone `entry` category, as it will, and only will be affected by the `router`/`vuex` option, which is different than the other code/config templates. `vuex` & `vue-router` dependencies are moved into the `config` template. `store/index.js` is also moved into `config` because it doesn't affect other code (only the entry). --- diff --git a/index.js b/index.js index 11dd5702..a3a31b4a 100755 --- a/index.js +++ b/index.js @@ -48,7 +48,7 @@ async function init() { // --typescript / --ts // --jsx // --router / --vue-router - // --vuex (todo) + // --vuex // --with-tests / --tests / --cypress const argv = minimist(process.argv.slice(2), { alias: { @@ -60,6 +60,10 @@ async function init() { boolean: true }) + // if any of the feature flags is set, we would skip the feature prompts + // use `??` instead of `||` once we drop Node.js 12 support + const isFeatureFlagsUsed = typeof (argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) === 'boolean' + let targetDir = argv._[0] const defaultProjectName = !targetDir ? 'vue-project' : targetDir @@ -116,15 +120,15 @@ async function init() { }, { name: 'needsTypeScript', - type: () => (argv.typescript ? null : 'toggle'), + type: () => (isFeatureFlagsUsed ? null : 'toggle'), message: 'Add TypeScript?', initial: false, active: 'Yes', inactive: 'No' }, { - name: 'needsJSX', - type: () => (argv.jsx ? null : 'toggle'), + name: 'needsJsx', + type: () => (isFeatureFlagsUsed ? null : 'toggle'), message: 'Add JSX Support?', initial: false, active: 'Yes', @@ -132,16 +136,25 @@ async function init() { }, { name: 'needsRouter', - type: () => (argv.router ? null : 'toggle'), + type: () => (isFeatureFlagsUsed ? null : 'toggle'), message: 'Add Vue Router for Single Page Application development?', initial: false, active: 'Yes', inactive: 'No' }, + { + name: 'needsVuex', + type: () => (isFeatureFlagsUsed ? null : 'toggle'), + message: + 'Add Vuex for state management?', + initial: false, + active: 'Yes', + inactive: 'No' + }, { name: 'needsTests', - type: () => (argv.tests ? null : 'toggle'), + type: () => (isFeatureFlagsUsed ? null : 'toggle'), message: 'Add Cypress for testing?', initial: false, active: 'Yes', @@ -164,9 +177,10 @@ async function init() { const { packageName = toValidPackageName(defaultProjectName), shouldOverwrite, - needsJSX = argv.jsx, + needsJsx = argv.jsx, needsTypeScript = argv.typescript, needsRouter = argv.router, + needsVuex = argv.vuex, needsTests = argv.tests } = result const root = path.join(cwd, targetDir) @@ -193,15 +207,46 @@ async function init() { // Add configs. render('config/base') - if (needsJSX) { + if (needsJsx) { render('config/jsx') } + if (needsRouter) { + render('config/router') + } + if (needsVuex) { + render('config/vuex') + } if (needsTests) { render('config/cypress') } if (needsTypeScript) { render('config/typescript') + } + + // Render code template. + // prettier-ignore + const codeTemplate = + (needsTypeScript ? 'typescript-' : '') + + (needsRouter ? 'router' : 'default') + render(`code/${codeTemplate}`) + + // Render entry file (main.js/ts). + if (needsVuex && needsRouter) { + render('entry/vuex-and-router') + } else if (needsVuex) { + render('entry/vuex') + } else if (needsRouter) { + render('entry/router') + } else { + render('entry/default') + } + // TODO: + // Replace `` in README with detailed explanation of npm scripts. + + // Cleanup. + + if (needsTypeScript) { // rename all `.js` files to `.ts` // rename jsconfig.json to tsconfig.json preOrderDirectoryTraverse( @@ -220,18 +265,6 @@ async function init() { ) } - // Render code template. - // prettier-ignore - const codeTemplate = - (needsTypeScript ? 'typescript-' : '') + - (needsRouter ? 'router' : 'default') - render(`code/${codeTemplate}`) - - // TODO: - // Replace `` in README with detailed explanation of npm scripts. - - // Cleanup. - if (!needsTests) { // All templates assumes the need of tests. // If the user doesn't need it: diff --git a/template/code/router/package.json b/template/config/router/package.json similarity index 100% rename from template/code/router/package.json rename to template/config/router/package.json diff --git a/template/code/typescript-router/package.json b/template/config/vuex/package.json similarity index 50% rename from template/code/typescript-router/package.json rename to template/config/vuex/package.json index 8888f592..099c41a1 100644 --- a/template/code/typescript-router/package.json +++ b/template/config/vuex/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "vue-router": "^4.0.10" + "vuex": "^4.0.2" } } diff --git a/template/config/vuex/src/store/index.js b/template/config/vuex/src/store/index.js new file mode 100644 index 00000000..2b9da8fe --- /dev/null +++ b/template/config/vuex/src/store/index.js @@ -0,0 +1,8 @@ +import { createStore } from 'vuex' + +export default createStore({ + state: {}, + mutations: {}, + actions: {}, + modules: {} +}) diff --git a/template/entry/default/src/main.js b/template/entry/default/src/main.js new file mode 100644 index 00000000..01433bca --- /dev/null +++ b/template/entry/default/src/main.js @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/template/code/typescript-router/src/main.ts b/template/entry/router/src/main.js similarity index 100% rename from template/code/typescript-router/src/main.ts rename to template/entry/router/src/main.js diff --git a/template/entry/vuex-and-router/src/main.js b/template/entry/vuex-and-router/src/main.js new file mode 100644 index 00000000..ab55e6d5 --- /dev/null +++ b/template/entry/vuex-and-router/src/main.js @@ -0,0 +1,12 @@ +import { createApp } from 'vue' +import App from './App.vue' + +import router from './router' +import store from './store' + +const app = createApp(App) + +app.use(router) +app.use(store) + +app.mount('#app') diff --git a/template/entry/vuex/src/main.js b/template/entry/vuex/src/main.js new file mode 100644 index 00000000..020a706b --- /dev/null +++ b/template/entry/vuex/src/main.js @@ -0,0 +1,9 @@ +import { createApp } from 'vue' +import App from './App.vue' +import store from './store' + +const app = createApp(App) + +app.use(store) + +app.mount('#app')