改改vue-cli生成的文件结构并发布到npm上

发表于 阅读次数：

改改vue-cli生成的文件结构并发布到npm上

新建要发布的包

1.新建一个npm文件夹

文件夹名字随便取

2.在文件夹下新建一个lib文件夹

3.在lib文件夹下新建一个generate.js文件

在generate.js文件下写如下代码

1
2
3
4
5
6
7
8
9
10
var Promise = require("bluebird"),
    fs = Promise.promisifyAll(require('fs-extra'));
var root = __dirname.replace(/lib/,'');
function generate(project) {
    return fs.copyAsync(root + 'template', project).then(function (err) {
        return err ? console.error(err) : console.log('gennerate project success')
    })
}

module.exports = generate;

4.在npm文件夹下新建一个bin文件夹，在下面放一个npm.js文件

npm.js文件内容如下

1
2
3
4
5
6
7
8
9
10
#!/usr/bin/env node
var gs = require('../lib/generate'),
    program = require('commander');
program
    .version(require('../package.json').version)
    .usage('[options] [project name]')
    .parse(process.argv);
var pname = program.args[0];
if (!pname) program.help();
gs(pname);

5.在npm文件夹下新建一个template文件夹

这个文件夹下就放你修改过的用vue-cli生成的项目

要发布到npm上包的文件结构如下图

npm.png

发布npm

1.首先，当然我们要去注册一个npm的账号点此去注册npm

2.初始化

注册完成后在文件夹下运行以下代码生成package.json文件

1
npm init

3.登陆你的npm账号

执行以下命令会让你输入你的npm账号和密码，如果提示

Logged in as 你的npm用户名 on https://registry.npmjs.org/.
则表示你已经登陆成功

1
npm adduser

4.发布你的包

1
npm publish .

执行完以上操作，你的一个npm包就发布完成了，你可以登录自己的npm去查看自己刚发布的包了

生成的目录结构和使用方式

1
2
3
4
5
6
7
8
## vue-vsc
A vue.js project tool that customizes the project template
一个自定义了项目模板的vue.js项目工具
##### 项目采用的vue,vue-router,axios版本
```markdown
"axios": "^0.18.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"

本工具只是用来构建一套自己常用的vue项目的模板，并无其他功能，所以，进行以下几步操作后，和vue-cli的用法就完全一致了：

1
2
3
4
npm install -g vue-vsc
$ vsc <project-name>
$ cd <project-name>
$ npm install

Project structure(项目结构)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---my-project
   --build
     --build.js
     --check-versions.js
     --utils.js
     --vue-loader.conf.js
     --webpack.base.conf.js
     --webpack.dev.conf.js
     --webpack.prod.conf.js
   --config
     --dev.env.js  // 开发环境变量
     --index.js  
     --prod.env.js  // 生产环境变量
     --test.env.js  // 测试环境变量
   --src
     --api // api请求文件夹
       --axios.js 
     --common //放一些公共的css、js、图片文件等
       --css
       --image
       --js
     --components //组件
     --router //路由
       --index.js
     --utils // 公共工具方法
       --utils.js
      --views // 页面文件		
     --App.vue
     --main.js
   --static
     --.gitkeep
   --.babelrc
   --.babelrc
   --.editorconfig
   --.gitignore
   --.postcssrc.js
   --index.html // 本文件中添加了针对移动端js+rem布局的代码，用不到可自行删除
   --package.json
   --package-lock.json
   --README.md

Installation（安装）

1
npm install -g vue-vsc

Usage（用法）

1
2
3
$ vsc <project-name>
$ cd <project-name>
$ npm install

使用vsc 构建的项目的目录结构如下图

demo.png
Example(例子):

1
2
3
$ vsc my-project
$ cd my-project
$ npm install

Others（其他说明）

1
2
3
4
5
6
7
Other usage is the same as vue-cli usage when you install this project
项目install下来后，其他用法和vue-cli的用法一样
特别说明：
在项目中运行如下命令
 npm run  dev // 开发环境
 npm run  test // 测试环境打包
 npm run  build //生产环境打包