第一個 vue-cli 程序
1.下載Nodejs並安裝
http://nodejs.cn/download/
2.安裝環境
命令
node -v
npm -v
npm install cnpm -g
cnpm install vue-cli -g
vue list
命令執行如下
Microsoft Windows [版本 10.0.17763.1339]
(c) 2018 Microsoft Corporation。保留所有權利。
C:\Users\Administrator>node -v
v14.16.1
C:\Users\Administrator>npm -v
6.14.12
C:\Users\Administrator>npm install cnpm -g
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm+ cnpm@6.2.0
added 700 packages from 975 contributors in 199.444s
C:\Users\Administrator>cnpm install vue-cli -g
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[4/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[7/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[8/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[9/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[10/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
[11/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[12/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[13/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[14/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[15/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[16/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[17/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.7@handlebars
[18/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[20/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate request@^2.67.0 request has been deprecated, see https://github.com/request/request/issues/3142
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
Recently updated (since 2021-05-18): 1 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
2021-05-19
→ handlebars@4.7.7 › uglify-js@^3.1.4(3.13.7) (04:09:51)
All packages installed (233 packages installed from npm registry, used 9s(network 9s), speed 592.22kB/s, json 220(484.8kB), tarball 4.58MB)
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\Administrator>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
3.初始化項目
命令
vue init webpack myvue
命令執行如下,一路選擇“no”
C:\Users\Administrator>e:
E:\>cd idea_workspace
E:\idea_workspace>vue init webpack myvue
? Project name myvue
? Project description A Vue.js project
? Author dengfei
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "myvue".
# Project initialization finished!
# ========================
To get started:
cd myvue
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
4.初始化運行
命令
cd myvue
npm install
npm run dev 啟動
其中 npm install 執行完畢后要修復
命令執行如下
E:\idea_workspace>cd myvue
E:\idea_workspace\myvue>npm install
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated html-webpack-plugin@2.30.1: out of support
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
> core-js@2.6.12 postinstall E:\idea_workspace\myvue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> ejs@2.7.4 postinstall E:\idea_workspace\myvue\node_modules\ejs
> node ./postinstall.js
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\idea_workspace\myvue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
added 1272 packages from 675 contributors and audited 1279 packages in 182.532s
48 packages are looking for funding
run `npm fund` for details
found 52 vulnerabilities (3 low, 42 moderate, 7 high)
run `npm audit fix` to fix them, or `npm audit` for details
E:\idea_workspace\myvue>npm audit fix
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1 package from 4 contributors and updated 1 package in 13.812s
48 packages are looking for funding
run `npm fund` for details
fixed 6 of 52 vulnerabilities in 1279 scanned packages
3 vulnerabilities required manual review and could not be updated
8 package updates for 43 vulnerabilities involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
E:\idea_workspace\myvue>npm run dev
> myvue@1.0.0 dev E:\idea_workspace\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
12% building modules 20/24 modules 4 active ...0!E:\idea_workspace\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 12350ms 下午4:48:49
I Your application is running here: http://localhost:8080
4.訪問上面網址 http://localhost:8080
