最近的H5项目中需要用到进度环形图的展示，对比了业界主流的UI库后，发现不是特别符合我的需求，最后决定用canvas或svg自己实现一波!

附上UI设计图

Canvas实现

Svg实现

-Github地址 :circle-progress

-npm地址 :v-circle-progress

通过实践，最终决定采用svg，canvas做出来的视图效果不是很好(进度条模糊)

html

<svg
    :width="width"
    :height="width"
    :viewbox="`0 0 ${width} ${width}`"
    class="svgWrap"
>
    <circle
        :cx="width * 0.5"
        :cy="width * 0.5"
        :r="width * 0.4"
        :stroke-width="width * 0.05"
        stroke-linecap="round"
        :stroke="backColor"
        fill="none"
        stroke-opacity="0.2"
        :transform="`matrix(0,-1,1,0,0,${width})`"
        :stroke-dasharray="
        `${0.75 * (width * 0.4 * Math.PI * 2)} ${0.25 *
        (width * 0.4 * Math.PI * 2)}`"
    >
    </circle>
    <circle
        ref="progress"
        :cx="width * 0.5"
        :cy="width * 0.5"
        :r="width * 0.4"
        :stroke-width="width * 0.05"
        stroke-linecap="round"
        :stroke="lineColor"
        fill="none"
        :transform="`matrix(0,-1,1,0,0,${width})`"
        :stroke-dasharray="dasharray"
        >
    </circle>
</svg>
复制代码

js

data() {
    return {
       dasharray: `0 ${this.width * 0.4 * Math.PI * 2}`,
    }
},
mounted() {
    this.draw(this.rate)
},
methods: {
    draw(rate) {
        this.$nextTick(() => {
            let per = 0.75 * rate
            let circle = this.$refs['progress']
            let perimeter = circle.getTotalLength() //圆环的周长
            this.dasharray = perimeter * per + ' ' + perimeter * (1 - per)
        })
    }
}
复制代码

将组件包发布到npm

步骤如下

一:项目初始化及配置

1、新建一个空白文件夹

mkdir circleProgress // 这里文件夹名为 circleProgress
复制代码

2、初始化项目：
进入到 circleProgress 文件夹，初始化项目。会提示你填一些项目相关的信息，跟着提示操作便是了。没啥说的。关于包的名字可以先去npmjs.com搜一下有没有重名的，不要和npm库现有的其它npm包重名了，不然一会儿发npm包的时候会失败！！

npm init 
复制代码

3、package.json 依赖引进：
由于使用了es6和webpack，所以在devDependencies字段中，应该至少加入以下依赖

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue": "^2.6.14",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.5.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.6.14",
    "vuex": "^3.0.1",
    "webpack": "^3.9.1",
    "webpack-dev-server": "^2.9.5"
}
复制代码

4、下载依赖包

npm install
复制代码

5、新建 src 和 dist 文件夹：
src是开发目录，在里面写我们的业务代码，dist目录是等会儿通过webPack打包后存放js文件的地方

6、加入webpack打包配置，并把src中的内容打包进dist目录中：
根目录下新增webpack.config.js文件

const path = require('path')
const webpack = require('webpack')
const uglify = require('uglifyjs-webpack-plugin')

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js', //入口文件，就是上步骤的src目录下的index.js文件，
    output: {
            path: path.resolve(__dirname, './dist'), //输出路径，就是上步骤中新建的dist目录，
            publicPath: '/dist/',
            filename: 'zwtCircleProgress.min.js', // 输出文件，对应package.json中的main字段
            libraryTarget: 'umd',
            umdNamedDefine: true,
    },
    module: {
        rules: [
            {
                    test: /\.vue$/,
                    loader: 'vue-loader',
            },
            {
                    test: /\.less$/,
                    use: [
                            { loader: 'style-loader' },
                            { loader: 'css-loader' },
                            { loader: 'less-loader' },
                    ],
            },
            {
                    test: /\.js$/,
                    exclude:
                                /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                    loader: 'babel-loader',
            },
            {
                    test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
                    loader: 'url-loader',
                    query: {
                            limit: 30000,
                            name: '[name].[ext]?[hash]',
                    },
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                    NODE_ENV: JSON.stringify('production'),
            },
        }),
    ]
 }

复制代码

7、打包【需要修改package.json中的main字段指向的主文件信息】

npm run build 
复制代码

8、修改main字段指向的主文件信息

... 
"main": "dist/zwtCircleProgress.min.js" // 换成你对应的主文件名称
复制代码

9、新建.npmignore文件，用于忽略发布到npm上的文件，规则同.gitignore一样

.*  
*.yml
build
/ node_modules
/ src
/ test
复制代码

二:npm操作

1、注册npm账号(一定要进行邮箱验证，否则等会儿包无法发上去，会报403权限问题)

2、进入到根目录下，运行npm login，输入你的用户名，密码和邮箱，若登录成功，会显示：

  Logged in as 你的名字 on https://registry.npmjs.org/.
复制代码

3、运行npm publish 发布到npm官网上

注意点1：要验证邮箱

注意点2：包名不能与npm库的已有包名相同【可以先查询一波】

关于npm的版本控制
在我们的package.json里面有一个version字段。我们可以通过它在项目不断构建的过程中调整版本

npm有一套自己的版本控制标准——Semantic versioning（语义化版本）

具体体现为： 对于”version”:”x.y.z”

01.修复bug,小改动，增加z

02.增加了新特性，但仍能向后兼容，增加y

03.有很大的改动，无法向后兼容,增加x

例如：我原本的项目是1.0.0版本的话

若是1中情况，变为1.0.1

若是2中情况，变为1.1.0

若是3中情况，变为2.0.0
复制代码

通过npm version <update_type>自动改变版本

update_type 参数有:
    patch, 
    minor, 
    major
分别表示补丁，小改，大改
复制代码