前端子產品化-個人vue腳手架配置

最近學了一下自己配置一個腳手架，雖然說現在各大主流架構也有非常成熟的腳手架工具了，但是假如我們每個項目都需要用到

sass

，那麼每次我們都需要重新配置，假如我們的

package.json

裡面就寫好了常用的子產品，每次下完腳手架後，直接npm i 是不是更友善些，出于這個原因，我用

Yeoman

(作為一個官方文檔它真的很難以言喻，傳送位址：Yeoman)學了一下這個配置。

以下與其說是分享，倒不如說是我的個人筆記。

如有不足，煩請訓示

個人vue腳手架配置

• 先準備平常我們常用的vue項目的檔案
• 建立一個新檔案夾generator-myVue
• 初始化目錄

cd "project-dir"
npm init -y
npm i yeoman-generator
npm link
           

• 建立Yeoman目錄格式 （入口檔案）

- generators  
  -- app  
    --- index.js
    --- templates
           

• 把常用的vue項目的檔案移入templates中
• index.js檔案寫入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    prompting(){
        return this.prompt([
            {
                type:'input',
                name:'name',
                message:'your project name',
                default:this.appname
            },
            {
                type: "confirm",
                name: "cool",
                message: "Would you like to enable the Cool feature?"
            }
        ]).then(answer =>{
            this.answer = answer
        })
    }
    writing(){
        const templates = [//個人腳手架中的檔案
            'babel.config.js',
            'package.json',
            'postcss.config.js',
            'README.md',
            'public/favicon.ico',
            'public/index.html',
            'src/App.vue',
            'src/main.js',
            'src/router.js',
            'src/assets/logo.png',
            'src/components/HelloWorld.vue',
            'src/store/actions.js',
            'src/store/getters.js',
            'src/store/index.js',
            'src/store/mutations.js',
            'src/store/state.js',
            'src/utils/request.js',
            'src/views/About.vue',
            'src/views/Home.vue'
          ]
        for(const value of templates){
            this.fs.copyTpl(this.templatePath(value),this.destinationPath(value),this.answer)
            
        }
    }
}

           

• 把檔案中需要根據使用者輸入而更改的地方用模闆方式寫入

  如markdown檔案

# <%= name %>
<%= cool %>
## Project setup
           

• 生成個人vue腳手架

cd "空檔案夾路徑"
yo myVue
           

釋出腳手架

• 注冊一個npm賬戶

• 把代碼推送到遠端倉庫後

  執行下面的代碼

npm login
//輸入npm賬戶密碼郵箱
npm publish

           

之後别人就能從npm倉庫中下載下傳你的腳手架啦