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
odejs>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:UsersAdministrator.vuerc
 34 
 35 <============================== 创建项目===========================>
 36 Vue CLI v4.4.6
 37 ✨  Creating project in C:Program Files
odejsmybook.
 38 ⚙️  Installing CLI plugins. This might take a while...
 39 
 40 
 41 > nodent-runtime@3.2.1 install C:Program Files
odejsmybook
ode_modules
oden
 42 t-runtime
 43 > node build.js
 44 
 45 ## Built C:Program Files
odejsmybook
ode_modules
odent-runtime/dist/index.j
 46 s
 47 
 48 > yorkie@2.0.0 install C:Program Files
odejsmybook
ode_modulesyorkie
 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
odejsmybook
ode_modules@babel
 55 runtime-corejs2
ode_modulescore-js
 56 > node -e "try{require('./postinstall')}catch(e){}"
 57 
 58 
 59 > core-js@2.6.11 postinstall C:Program Files
odejsmybook
ode_modulesabel-r
 60 untime
ode_modulescore-js
 61 > node -e "try{require('./postinstall')}catch(e){}"
 62 
 63 
 64 > core-js@3.6.5 postinstall C:Program Files
odejsmybook
ode_modulescore-js
 65 > node -e "try{require('./postinstall')}catch(e){}"
 66 
 67 
 68 > ejs@2.7.4 postinstall C:Program Files
odejsmybook
ode_modulesejs
 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
odejsmybook
ode_moduleschrome
 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:UsersADMINI~1AppDataLocalTemp80.0.3987.16chromedriverc
 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
odejsmybook
ode_moduleschromedriver
 97 libchromedriver
 98 Done. ChromeDriver binary available at C:Program Files
odejsmybook
ode_modul
 99 eschromedriverlibchromedriverchromedriver.exe
100 
101 > geckodriver@1.19.1 postinstall C:Program Files
odejsmybook
ode_modulesgec
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
odejsmybook
ode_modulesgo
112 tindex.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
odejsmybook
ode_modulesgo
123 tindex.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:UsersAdministratorAppDataRoaming
pm-cache\_logs2020-07-16T0
150 7_08_23_875Z-debug.log
151  ERROR  command failed: npm install --loglevel error
152 
153 C:Program Files
odejs>

3. 工程创建完成:

Nodejs开发之七: Vue-Cli脚手架创建项目

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
odejsmybook>npm run serve
 2 
 3 > mybook@0.1.0 serve C:Program Files
odejsmybook
 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.