项目介绍

qtum-web-wallet 是量子链推出的网页版钱包。

项目地址 https://github.com/qtumproject/qtum-web-wallet

这里写图片描述

项目采用vue搭建。

通过网页可以实现钱包的创建备份转账以及智能合约的部署调用功能。

这里写图片描述

项目结构

这里写图片描述

这个vue项目采用了vue-loader,所以整体用的是嵌套结构。

build 构建脚本，还包括开发时候用的服务器配置
config 项目环境配置，区分开发环境和生产环境
dist 项目编译后导出的文件，部署生产环境的时候会用到
docs 项目内的说明文档，跟代码无关
src
- assets 项目资源文件
- components vue的组件文件，可以重复使用
- controllers 对应项目的每个逻辑页面
- libs 项目用到的封装的函数库
locales i18n国际化用到的语言字库文件

一些技术点

vue-i18n 国际化

官方文档的操作见后面的参考资料。

下面看这个项目是怎么做的。

引入库和配置文件

package.json 中的devDependencies引入"vue-i18n": "^7.4.2"

Vue.js中引入import i18n from 'libs/i18n'

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from 'locales'
import config from 'libs/config'Vue.use(VueI18n)export default new VueI18n({locale: config.getLan(),fallbackLocale: 'zh',messages: locales.messages,
})

展示内容

在模板中，写法为{{ $t('create.title') }}

获取配置

src/lib/config.js

  getLan() {let locale = this.get('lan')navigator.languages.forEach(language => {if (locale === undefined && locales.locales.indexOf(language) !== -1) {locale = language}})if (locale === undefined) {locale = 'en'}return locale},

更改配置

src/controllers/Config.vue

save: function() {config.set('lan', this.lan)config.set('network', this.network)config.set('mode', this.mode)window.location.reload()}

build 构建项目

package.json中

  "scripts": {"dev": "node build/dev-server.js","start": "node build/dev-server.js","build": "node build/build.js"},

会执行node build/build.js

require('./check-versions')()  //引入版本检测文件process.env.NODE_ENV = 'production' //设定为生产模式var ora = require('ora')  //引入ora
var rm = require('rimraf')  //node的rm -rf ，删除文件
var path = require('path') 
var chalk = require('chalk') //Log格式工具可以指定颜色什么的
var webpack = require('webpack') //打包工具
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')var spinner = ora('building for production...')
spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {if (err) throw errwebpack(webpackConfig, function (err, stats) {spinner.stop()if (err) throw errprocess.stdout.write(stats.toString({colors: true,modules: false,children: false,chunks: false,chunkModules: false}) + '\n\n')if (stats.hasErrors()) {console.log(chalk.red('  Build failed with errors.\n'))process.exit(1)}console.log(chalk.cyan('  Build complete.\n'))console.log(chalk.yellow('  Tip: built files are meant to be served over an HTTP server.\n' +'  Opening index.html over file:// won\'t work.\n'))})
})

ora，就是build的时候那个会动的图标。这里写图片描述

重点还是在生产环境的文件中

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var FaviconsWebpackPlugin = require('favicons-webpack-plugin')var env = config.build.envvar webpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: true})},devtool: config.build.productionSourceMap ? '#source-map' : false,output: {path: config.build.assetsRoot,filename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')},plugins: [// http://vuejs.github.io/vue-loader/en/workflow/production.htmlnew webpack.DefinePlugin({'process.env': env}),new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},sourceMap: true,mangle: {except: ['BigInteger', 'ECPair', 'Point']}}),// extract css into its own filenew ExtractTextPlugin({filename: utils.assetsPath('css/[name].[contenthash].css')}),// Compress extracted CSS. We are using this plugin so that possible// duplicated CSS from different components can be deduped.new OptimizeCSSPlugin({cssProcessorOptions: {safe: true}}),// generate dist index.html with correct asset hash for caching.// you can customize output by editing /index.html// see https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency'}),new FaviconsWebpackPlugin({logo: 'assets/images/logo.png',inject: true,title: 'Qtum Web Wallet',icons: {android: true,appleIcon: true,appleStartup: false,favicons: true}}),// keep module.id stable when vender modules does not changenew webpack.HashedModuleIdsPlugin(),// split vendor js into its own filenew webpack.optimize.CommonsChunkPlugin({name: 'vendor',minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0)}}),// extract webpack runtime and module manifest to its own file in order to// prevent vendor hash from being updated whenever app bundle is updatednew webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.build.assetsSubDirectory,ignore: ['.*']}])]
})if (config.build.productionGzip) {var CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({asset: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,minRatio: 0.8}))
}if (config.build.bundleAnalyzerReport) {var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(new BundleAnalyzerPlugin())
}module.exports = webpackConfig

开发阶段和部署生产环境

开发阶段

本地安装

xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm install> fsevents@1.1.2 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents
> node install[fsevents] Success: "/xiaoyu/qtumprojects/qtum-web-wallet/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile> phantomjs-prebuilt@2.1.15 install /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt
> node install.jsPhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-macosx.zip
Saving to /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Receiving...[========================================] 100%
Received 16746K total.
Extracting zip contents
Removing /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/p6/3j5thk4j0972fw32188xdns80000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1520400588975/phantomjs-2.1.1-macosx -> /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /xiaoyu/qtumprojects/qtum-web-wallet/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs
added 1220 packages in 685.142s

运行，注意开发阶段跑的是dev

/xiaoyu/qtumprojects/qtum-web-wallet git:(master) [13:51:56]
xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm run dev> qtum-wallet@1.0.0 dev /xiaoyu/qtumprojects/qtum-web-wallet
> node build/dev-server.js> Starting dev server...WARNING  Compiled with 1 warnings                                                                                                                                                                                      1:54:48 PMwarning  in ./src/controllers/RestoreMobile.vue(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The new "slot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.@ ./src/controllers/RestoreMobile.vue 7:0-357@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue@ ./src/App.vue@ ./src/main.js@ multi ./build/dev-client ./src/main.js> Listening at http://localhost:8081

部署生产环境

开发环境的dev,运行的是项目自带的服务器，并且只要有文件更改，就会刷新，对于开发来讲很方便。

但是，上面运行着大量的辅助工具，导致整个项目运行的速度会变慢。

/xiaoyu/qtumprojects/qtum-web-wallet git:(master *) [14:10:39]
xiaoyu@LIXIAOYUdeMacBook-Pro.com➤ npm run build> qtum-wallet@1.0.0 build /xiaoyu/qtumprojects/qtum-web-wallet
> node build/build.js⠦ building for production...
Starting to optimize CSS...
Processing static/css/app.f1e81e8b885d40d5da38b1583c218b18.css...
Processed static/css/app.f1e81e8b885d40d5da38b1583c218b18.css, before: 301826, after: 301758, ratio: 99.98%
Hash: c444e4b2e6127e14174b
Version: webpack 2.7.0
Time: 38636msAsset     Size  Chunks                    Chunk Namesstatic/js/vendor.6b97dce258230f7e63ba.js  1.05 MB       0  [emitted]  [big]  vendorstatic/js/app.6d3e646af7951a9ecaab.js   226 kB       1  [emitted]         appstatic/js/manifest.fb70284a5dffe96a9b58.js  1.51 kB       2  [emitted]         manifeststatic/css/app.f1e81e8b885d40d5da38b1583c218b18.css   302 kB       1  [emitted]  [big]  appstatic/js/vendor.6b97dce258230f7e63ba.js.map  6.25 MB       0  [emitted]         vendorstatic/js/app.6d3e646af7951a9ecaab.js.map   848 kB       1  [emitted]         app
static/css/app.f1e81e8b885d40d5da38b1583c218b18.css.map   351 kB       1  [emitted]         appstatic/js/manifest.fb70284a5dffe96a9b58.js.map  14.6 kB       2  [emitted]         manifestindex.html  2.09 kB          [emitted]         Build complete.Tip: built files are meant to be served over an HTTP server.Opening index.html over file:// won't work.