关于类似vue-cli 脚手架

Posted lfqcode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于类似vue-cli 脚手架相关的知识,希望对你有一定的参考价值。

  1 #!/usr/bin/env node
  2 
  3 const download = require(‘download-git-repo‘)
  4 const program = require(‘commander‘)
  5 const exists = require(‘fs‘).existsSync
  6 const path = require(‘path‘)
  7 const ora = require(‘ora‘)
  8 const home = require(‘user-home‘)
  9 const tildify = require(‘tildify‘)
 10 const chalk = require(‘chalk‘)
 11 const inquirer = require(‘inquirer‘)
 12 const rm = require(‘rimraf‘).sync
 13 const logger = require(‘../lib/logger‘)
 14 const generate = require(‘../lib/generate‘)
 15 const checkVersion = require(‘../lib/check-version‘)
 16 const warnings = require(‘../lib/warnings‘)
 17 const localPath = require(‘../lib/local-path‘)
 18 
 19 const isLocalPath = localPath.isLocalPath
 20 const getTemplatePath = localPath.getTemplatePath
 21 
 22 /**
 23  * Usage.
 24  */
 25 
 26 program
 27   .usage(‘<template-name> [project-name]‘)
 28   .option(‘-c, --clone‘, ‘use git clone‘)
 29   .option(‘--offline‘, ‘use cached template‘)
 30 
 31 /**
 32  * Help.
 33  */
 34 
 35 program.on(‘--help‘, () => {
 36   console.log(‘  Examples:‘)
 37   console.log()
 38   console.log(chalk.gray(‘    # create a new project with an official template‘))
 39   console.log(‘    $ vue init webpack my-project‘)
 40   console.log()
 41   console.log(chalk.gray(‘    # create a new project straight from a github template‘))
 42   console.log(‘    $ vue init username/repo my-project‘)
 43   console.log()
 44 })
 45 
 46 /**
 47  * Help.
 48  */
 49 
 50 function help () {
 51   program.parse(process.argv)
 52   if (program.args.length < 1) return program.help()
 53 }
 54 help()
 55 
 56 /**
 57  * Settings.
 58  */
 59 
 60 let template = program.args[0]
 61 const hasSlash = template.indexOf(‘/‘) > -1
 62 const rawName = program.args[1]
 63 const inPlace = !rawName || rawName === ‘.‘
 64 const name = inPlace ? path.relative(‘../‘, process.cwd()) : rawName
 65 const to = path.resolve(rawName || ‘.‘)
 66 const clone = program.clone || false
 67 
 68 const tmp = path.join(home, ‘.vue-templates‘, template.replace(/[/:]/g, ‘-‘))
 69 if (program.offline) {
 70   console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
 71   template = tmp
 72 }
 73 
 74 /**
 75  * Padding.
 76  */
 77 
 78 console.log()
 79 process.on(‘exit‘, () => {
 80   console.log()
 81 })
 82 
 83 if (inPlace || exists(to)) {
 84   inquirer.prompt([{
 85     type: ‘confirm‘,
 86     message: inPlace
 87       ? ‘Generate project in current directory?‘
 88       : ‘Target directory exists. Continue?‘,
 89     name: ‘ok‘
 90   }]).then(answers => {
 91     if (answers.ok) {
 92       run()
 93     }
 94   }).catch(logger.fatal)
 95 } else {
 96   run()
 97 }
 98 
 99 /**
100  * Check, download and generate the project.
101  */
102 
103 function run () {
104   // check if template is local
105   if (isLocalPath(template)) {
106     const templatePath = getTemplatePath(template)
107     if (exists(templatePath)) {
108       generate(name, templatePath, to, err => {
109         if (err) logger.fatal(err)
110         console.log()
111         logger.success(‘Generated "%s".‘, name)
112       })
113     } else {
114       logger.fatal(‘Local template "%s" not found.‘, template)
115     }
116   } else {
117     checkVersion(() => {
118       if (!hasSlash) {
119         // use official templates
120         const officialTemplate = ‘vuejs-templates/‘ + template
121         if (template.indexOf(‘#‘) !== -1) {
122           downloadAndGenerate(officialTemplate)
123         } else {
124           if (template.indexOf(‘-2.0‘) !== -1) {
125             warnings.v2SuffixTemplatesDeprecated(template, inPlace ? ‘‘ : name)
126             return
127           }
128 
129           // warnings.v2BranchIsNowDefault(template, inPlace ? ‘‘ : name)
130           downloadAndGenerate(officialTemplate)
131         }
132       } else {
133         downloadAndGenerate(template)
134       }
135     })
136   }
137 }
138 
139 /**
140  * Download a generate from a template repo.
141  *
142  * @param {String} template
143  */
144 
145 function downloadAndGenerate (template) {
146   const spinner = ora(‘downloading template‘)
147   spinner.start()
148   // Remove if local template exists
149   if (exists(tmp)) rm(tmp)
150   download(template, tmp, { clone }, err => {
151     spinner.stop()
152     if (err) logger.fatal(‘Failed to download repo ‘ + template + ‘: ‘ + err.message.trim())
153     generate(name, tmp, to, err => {
154       if (err) logger.fatal(err)
155       console.log()
156       logger.success(‘Generated "%s".‘, name)
157     })
158   })
159 }

 

https://github.com/vuejs-templates   vue-cli的模板地址

https://github.com/vuejs/vue-cli   vue-cli 源码

主要使用的是 bin/vue-init

用的npm 包  download-git-repo   commander

主要代码 

downloadAndGenerate() 里面的
template 

以上是关于关于类似vue-cli 脚手架的主要内容,如果未能解决你的问题,请参考以下文章

关于vue-cli脚手架搭建的vue项目在手机浏览器无法打开的问题

关于vue框架

vue 入门

如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

vue-cli 快速搭建脚手架

vue-cli bilib学习