1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【前端工程化】搭建vue-cli + cesium项目的脚手架及常见问题

【前端工程化】搭建vue-cli + cesium项目的脚手架及常见问题

时间:2020-08-02 06:02:08

相关推荐

【前端工程化】搭建vue-cli + cesium项目的脚手架及常见问题

在开发过程中总是使用同样的技术框架,例如 vue-cli + cesium + iview + vue-router + axios等,可以将这样的项目直接搭建一个脚手架,并将脚手架上传至npm服务器上,只需要通过命令即可快速创建一个项目,相比于github等方式创建项目的时候更简单。

本教程创建了一个简单的cevue-cli脚手架,该脚手架只有简单的拉取框架、创建项目的过程,通过

cevue init program_name方法即可快速创建项目。后续更新将增加更多的可配置项。

文章目录

项目创建上传至npm服务器检查效果

项目创建

1、新建项目文件夹cevue-cli,文件夹内控制台输入命令npm init初始化项目。根据提示输入相关信息,完成后文件夹内将生成package.json文件。后续也可以直接手动修改package.json内的文件内容。

2、在package.json里面新增如下内容,指定cevue命令执行时的文件入口是index.js文件

3、建立index.js文件,index.js文件完整的内容如下:

#!/usr/bin/env nodevar program = require('commander');var ora = require('ora');var chalk = require('chalk');var download = require('download-git-repo');var symbols = require('log-symbols');program.version('1.0.0', '-v, --version').command('init <name>').action(function (name) {// 开始下载var spinner = ora('downloading ...');spinner.start();download(':seven7deer/vue-cesium-template#main',name,{clone: true },function (err) {if (err) {// 下载失败spinner.fail();console.log(symbols.error, chalk.red(err));} else {// 下载成功spinner.succeed();console.log(symbols.success,chalk.green(name + ' create success, continue steps : '));console.log(chalk.yellow('\n cd ' +name +'\n npm install \n npm run serve'));}});});program.parse(process.argv);

同时需要安装该index.js文件内require的各种库。

其中需要注意的点是:

(1)在该文件的首行输入

#!/usr/bin/env node

该语句用于告诉系统在PATH目录中查找node来执行脚本文件,该句话必须添加,为解决不同的用户node路径不同的问题

(2)download是从github上拉取对应的项目,原本是/seven7deer/vue-cesium-template路径的main分支的项目,需要写为:seven7deer/vue-cesium-template#main,注意修改域名后面的第一个/为:,主要原因是查阅了download-git-repo的源码发现,其主要是两个正则表达式

var regex = /^(?:(direct):([^#]+)(?:#(.+))?)$/regex = /^(?:(github|gitlab|bitbucket):)?(?:(.+):)?([^/]+)\/([^#]+)(?:#(.+))?$/

以及其后的表达式解析和拼接导致的这儿不写冒号会出错。

(3)注意该index.js内不要写ES6等语法,否则执行脚本时会出错,没有通过babel转换为ES5的语法。

上传至npm服务器

4、完成上述步骤后就实现了一个简单的脚手架的搭建,接下来可以把它上传至npm上。需要经过【npm官网注册账号】-【邮箱验证】两个步骤进行注册,注意一定要等邮箱验证完后再上传,否则会报 ERR!403 a package version that is forbidden by your security policy. 的错误!

注册完成后,在当前项目的路径下输入npm login后输入用户名、密码和邮箱进行登录,登录后输入npm publish即可完成上传。如果此时仍提示403的错误,则可能是 上传的项目与现有项目重名 导致的,可以在package.json里面直接修改name属性。

需要对上传的库进行更新时,在package.json里面修改version,再通过npm publish上传即可。

检查效果

5、上传完成后,可测试脚手架是否存在问题。

npm install cevue-cli -g 全局安装cevue-cli库cevue init test_program创建test_program项目

如果成功了,则会成功创建项目,并在控制台提示创建成功。

可能会遇到以下问题:

(1)Microsoft Jscript 运行时错误,此类问题是解析脚本的时候出现的问题,主要原因是上述index.js文件语法错误了,一定要注意,不能用ES6的箭头函数、模板解析等语法,否则会无法执行此脚本。仔细检查代码是否有错误,或者在项目文件夹的同级目录下,通过

node ./cevue-cli/index.js init test

命令创建一个项目,看是否能执行成功,如果能,则是脚本解析执行的问题,如果不能,则代码语法肯定存在问题。

(2)‘git clone’ failed with status 128的错误时,要检查本机的git是否能够使用,此类问题都是git导致的,例如新的环境必须安装git配置SSH等。

(3)创建项目时提示 cevue不是内部或外部命令,也不是可运行的程序 则表明:

① cevue-cli可能没有全局安装成功,通过npm config get prefix命令查看npm全局安装的路径,检查是否生成了cevue和cevue.md以及node_mouduls里面是否有cevue,如果有则安装成功。

② 在系统环境变量中,path中是否包括了当前npm全局安装的路径,如果npm全局安装的路径修改过后,需要重新也在系统环境变量中修改,否则将无法获取到新安装的cevue。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。