Nodejs开发之七: Vue-Cli脚手架创建项目
1. 安装版本:
最新的 vue-cli @4.4.6, 之前还有vue-cli@3.0, vue-cli@2.0, vue-cli@1.0不同的版本.
> npm -i -g @vue/cli // 安装最新的版本 -g 表示安装在全局目录下.
> npm -i -g vue-cli //安装 2.9.6版本
一台机器上也可以安装多个vue-cli版本, 详见:https://segmentfault.com/a/1190000020487946?utm_source=tag-newest
旧版本升级安装: 详见: https://www.jianshu.com/p/3f8bfe70433b
2. 命令行, 创建项目:
>npm create mybook // mybook是项目名称
1 C:\Program Files\nodejs>vue create mybook 2 3 <==================== 配置项目 一共16项目,全选就行了=====================> 4 Vue CLI v4.4.6 5 ? Please pick a preset: Manually select features 7 ? Check the features needed for your project: (Press <space> to select, <a> to t 8 ? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E 11 ? Use class-style component syntax? Yes 12 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes 15 ? Use history mode for router? (Requires proper server setup for index in production) Yes 17 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) 21 ? Pick a linter / formatter config: Basic 22 ? Pick additional lint features: Lint on save 23 ? Pick a unit testing solution: Mocha 24 ? Pick an E2E testing solution: Nightwatch 25 ? Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggl 26 ? Pick browsers to run end-to-end test on Chrome 27 ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 30 ? Save this as a preset for future projects? Yes 31 ? Save preset as: mybook 32 33 � Preset mybook saved in C:\Users\Administrator\.vuerc 34 35 <============================== 创建项目===========================> 36 Vue CLI v4.4.6 37 ✨ Creating project in C:\Program Files\nodejs\mybook. 38 ⚙️ Installing CLI plugins. This might take a while... 39 40 41 > nodent-runtime@3.2.1 install C:\Program Files\nodejs\mybook\node_modules\noden 42 t-runtime 43 > node build.js 44 45 ## Built C:\Program Files\nodejs\mybook\node_modules\nodent-runtime/dist/index.j 46 s 47 48 > yorkie@2.0.0 install C:\Program Files\nodejs\mybook\node_modules\yorkie 49 > node bin/install.js 50 51 setting up Git hooks 52 can't find .git directory, skipping Git hooks installation 53 54 > core-js@2.6.11 postinstall C:\Program Files\nodejs\mybook\node_modules\@babel\ 55 runtime-corejs2\node_modules\core-js 56 > node -e "try{require('./postinstall')}catch(e){}" 57 58 59 > core-js@2.6.11 postinstall C:\Program Files\nodejs\mybook\node_modules\babel-r 60 untime\node_modules\core-js 61 > node -e "try{require('./postinstall')}catch(e){}" 62 63 64 > core-js@3.6.5 postinstall C:\Program Files\nodejs\mybook\node_modules\core-js 65 > node -e "try{require('./postinstall')}catch(e){}" 66 67 68 > ejs@2.7.4 postinstall C:\Program Files\nodejs\mybook\node_modules\ejs 69 > node ./postinstall.js 70 71 added 1443 packages from 1372 contributors in 349.425s 72 73 45 packages are looking for funding 74 run `npm fund` for details 75 76 � Invoking generators... 77 � Installing additional dependencies... 78 79 80 > chromedriver@80.0.2 install C:\Program Files\nodejs\mybook\node_modules\chrome 81 driver 82 > node install.js 83 84 Current existing ChromeDriver binary is unavailable, proceeding with download an 85 d extraction. 86 Downloading from file: https://chromedriver.storage.googleapis.com/80.0.3987.16 87 /chromedriver_win32.zip 88 Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\80.0.3987.16\chromedriver\c 89 hromedriver_win32.zip 90 Received 1024K... 91 Received 2049K... 92 Received 3074K... 93 Received 4100K... 94 Received 4268K total. 95 Extracting zip contents. 96 Copying to target path C:\Program Files\nodejs\mybook\node_modules\chromedriver\ 97 lib\chromedriver 98 Done. ChromeDriver binary available at C:\Program Files\nodejs\mybook\node_modul 99 es\chromedriver\lib\chromedriver\chromedriver.exe 100 101 > geckodriver@1.19.1 postinstall C:\Program Files\nodejs\mybook\node_modules\gec 102 kodriver 103 > node index.js 104 105 Downloading geckodriver... 106 events.js:292 107 throw er; // Unhandled 'error' event 108 ^ 109 ErrorClass [RequestError]: getaddrinfo ENOENT github-production-release-asset-2e 110 65be.s3.amazonaws.com 111 at ClientRequest.<anonymous> (C:\Program Files\nodejs\mybook\node_modules\go 112 t\index.js:69:21) 113 at Object.onceWrapper (events.js:422:26) 114 at ClientRequest.emit (events.js:315:20) 115 at TLSSocket.socketErrorListener (_http_client.js:426:9) 116 at TLSSocket.emit (events.js:315:20) 117 at emitErrorNT (internal/streams/destroy.js:92:8) 118 at emitErrorAndCloseNT (internal/streams/destroy.js:60:3) 119 at processTicksAndRejections (internal/process/task_queues.js:84:21) 120 Emitted 'error' event on DuplexWrapper instance at: 121 at EventEmitter.emit (events.js:315:20) 122 at ClientRequest.<anonymous> (C:\Program Files\nodejs\mybook\node_modules\go 123 t\index.js:69:7) 124 at Object.onceWrapper (events.js:422:26) 125 [... lines matching original stack trace ...] 126 at processTicksAndRejections (internal/process/task_queues.js:84:21) { 127 code: 'ENOENT', 128 host: 'github-production-release-asset-2e65be.s3.amazonaws.com', 129 hostname: 'github-production-release-asset-2e65be.s3.amazonaws.com', 130 method: 'GET', 131 path: '/25354393/fb04d600-ecd8-11e9-8592-0da58c43e5b2?X-Amz-Algorithm=AWS4-HMA 132 C-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20200716%2Fus-east-1%2Fs3%2Faws 133 4_request&X-Amz-Date=20200716T070527Z&X-Amz-Expires=300&X-Amz-Signature=4ee048cc 134 fe798d4a2e516e3cd0edbaf3b1a6635e317b4c8f3df8760ad313b438&X-Amz-SignedHeaders=hos 135 t&actor_id=0&repo_id=25354393&response-content-disposition=attachment%3B%20filen 136 ame%3Dgeckodriver-v0.26.0-win64.zip&response-content-type=application%2Foctet-st 137 ream' 138 } 139 npm ERR! code ELIFECYCLE 140 npm ERR! errno 1 141 npm ERR! geckodriver@1.19.1 postinstall: `node index.js` 142 npm ERR! Exit status 1 143 npm ERR! 144 npm ERR! Failed at the geckodriver@1.19.1 postinstall script. 145 npm ERR! This is probably not a problem with npm. There is likely additional log 146 ging output above. 147 148 npm ERR! A complete log of this run can be found in: 149 npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-07-16T0 150 7_08_23_875Z-debug.log 151 ERROR command failed: npm install --loglevel error 152 153 C:\Program Files\nodejs>
3. 工程创建完成:
4. 运行项目:
打开package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
启动服务器:
> npm run serve
1 C:\Program Files\nodejs\mybook>npm run serve 2 3 > mybook@0.1.0 serve C:\Program Files\nodejs\mybook 4 > vue-cli-service serve 5 6 INFO Starting development server... 7 Starting type checking service... 8 Using 1 worker with 2048MB memory limit 9 98% after emitting CopyPlugin 10 11 DONE Compiled successfully in 6977ms 3:17:37 ├F10: PM 12 ┤ 13 14 No type errors found 15 Version: typescript 3.9.6 16 Time: 5823ms 17 18 App running at: 19 - Local: http://localhost:8080/ 20 - Network: http://192.168.7.60:8080/ 21 22 Note that the development build is not optimized. 23 To create a production build, run npm run build.
5. 打开浏览器, 输入
http://localhost:8080/
6. 也可以通过局域网 http://192.168.7.60:8080/ 访问.
7. 使用vue ui管理项目:
> vue ui
C:\Program Files\nodejs>vue ui
� Starting GUI...
� Ready on http://localhost:8000
将在8000端口打开Vue ui界面
8 将刚才创建的工程, 导入
9 在控制台运行程序 自定义 ===> 配置部件 ==>选择一项任务
10. 使用visual studio 打开工程:
代码旅行开始.