什么是vue-cli

  • vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;
  • 预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

需要的环境

Node.js : http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下

Git : https://git-scm.com/downloads

镜像:https://npm.taobao.org/mirrors/git-for-windows/
确认nodejs安装成功:

  • cmd 下输入 node -v,查看是否能够正确打印出版本号即可!
  • cmd 下输入 npm-v,查看是否能够正确打印出版本号即可!

npm,就是一个软件包管理工具

安装 Node.js 淘宝镜像加速器（cnpm），这样子的话,下载会快很多~

  1. # -g 就是全局安装
  2. npm install cnpm -g
  4. # 或使用如下语句解决 npm 速度慢的问题
  5. npm install --registry=https://registry.npm.taobao.org

安装过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用，有可能会出错，npm慢的时候再用

安装 vue-cli

  1. cnpm install vue-cli -g
  3. # 测试是否安装成功
  4. # 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
  5. vue list
  1. C:\Users\Administrator>cnpm install vue-cli -g
  2. Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\v
  3. ue-cli_tmp
  4. Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue
  5. -cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vu
  6. e-cli
  7. Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\
  8. node_modules\vue-cli/node_modules
  9. [1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
  10. [2/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
  11. [3/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
  12. [4/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
  13. [5/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
  14. [6/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-
  15. package-name@3.0.0@validate-npm-package-name
  16. [7/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
  17. [8/20] coffee-script@1.12.7 installed at node_modules\_coffee-script@1.12.7@coff
  18. ee-script
  19. [9/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
  20. [10/20] rimraf@^2.5.0 installed at node_modules\_rimraf@2.7.1@rimraf
  21. [11/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
  22. [12/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
  23. [13/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
  24. -metadata
  25. [14/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consol
  26. idate
  27. [15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
  29. [16/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
  30. [17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
  31. 1.0@download-git-repo
  32. [18/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.7@handlebars
  34. [19/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
  35. [20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
  36. deprecate request@^2.67.0 request has been deprecated, see https://github.com/re
  37. quest/request/issues/3142
  38. deprecate coffee-script@1.12.7 CoffeeScript on NPM has moved to "coffeescript" (
  39. no hyphen)
  40. deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer suppor
  41. ted
  42. deprecate request@2.88.2 › uuid@^3.3.2 Please upgrade  to version 7 or higher.
  43. Older versions may use Math.random() in certain circumstances, which is known to
  44.  be problematic.  See https://v8.dev/blog/math-random for details.
  45. Recently updated (since 2021-10-26): 1 packages (detail see file C:\Users\Admini
  46. strator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.
  47. txt)
  48.   Today:
  49.     → handlebars@4.7.7 › uglify-js@^3.1.4(3.14.3) (05:38:32)
  50. All packages installed (234 packages installed from npm registry, used 23s(netwo
  51. rk 22s), speed 231.93KB/s, json 220(501.95KB), tarball 4.58MB)
  52. [vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users
  53. \Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
  54. [vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\
  55. Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
  56. [vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\
  57. Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
  59. C:\Users\Administrator>vue list
  61.   Available official templates:
  63.   ★  browserify - A full-featured Browserify + vueify setup with hot-reload, li
  64. nting & unit testing.
  65.   ★  browserify-simple - A simple Browserify + vueify setup for quick prototypi
  66. ng.
  67.   ★  pwa - PWA template for vue-cli based on the webpack template
  68.   ★  simple - The simplest possible Vue setup in a single HTML file
  69.   ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
  70. ing, testing & css extraction.
  71.   ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
  72. .
  74. C:\Users\Administrator>

第一个 vue-cli 应用程序

创建Vue项目目录，并在命令行进入目录

  1. D:\code\vue>

创建一个基于 webpack 模板的 vue 应用程序

  1. # 这里的 myvue 是项目名称，可以根据自己的需求起名
  2. vue init webpack myvue

一路都选择Yes即可；学习的时候可以从vue-router开始都选择No；
说明:

  • Project name：项目名称，默认 回车 即可
  • Project description：项目描述，默认 回车 即可
  • Author：项目作者，默认 回车 即可
  • Install vue-router：是否安装 vue-router，选择 y 安装
  • Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 y 安装
  • Set up unit tests：单元测试相关，选择 y 安装
  • Setup e2e tests with Nightwatch：单元测试相关，选择 y 安装
  • Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行;运行结果!
  1. D:\code\vue>vue init webpack myvue
  3. ? Project name myvue
  4. ? Project description A Vue.js project
  5. ? Author wl3pbzhyq <wl3pbzhyq@163.com>
  6. ? Vue build (Use arrow keys)
  7. ? Vue build standalone
  8. ? Install vue-router? No
  9. ? Use ESLint to lint your code? No
  10. ? Set up unit tests No
  11. ? Setup e2e tests with Nightwatch? No
  12. ? Should we run `npm install` for you after the project has been created? (recom
  13. ? Should we run `npm install` for you after the project has been created? (recom
  14. ? Should we run `npm install` for you after the project has been created? (recom
  15. ? Should we run `npm install` for you after the project has been created? (recom
  17. mended) no
  19.    vue-cli · Generated "myvue".
  21. # Project initialization finished!
  22. # ========================
  24. To get started:
  26.   cd myvue
  27.   npm install (or if using yarn: yarn)
  28.   npm run dev
  30. Documentation can be found at https://vuejs-templates.github.io/webpack
  32. D:\code\vue>


初始化并运行

  1. cd myvue
  2. npm install
  3. npm install慢时，可以使用 cnpm install
  4. npm run dev

执行完成后,目录多了很多依赖 node_modules

  1. D:\code\vue\myvue>cnpm install
  2. √ Installed 36 packages
  3. √ Linked 804 latest versions
  4. [1/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node
  5. ./postinstall.js", root: "D:\\code\\vue\\myvue\\node_modules\\_ejs@2.7.4@ejs"
  6. Thank you for installing EJS: built with the Jake JavaScript build tool (https:/
  7. /jakejs.com/)
  9. [1/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished i
  10. n 960ms
  11. [2/4] scripts.install webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2
  12. .7 run "node install.js", root: "D:\\code\\vue\\myvue\\node_modules\\_fsevents@1
  13. .2.13@fsevents"
  15. Skipping 'fsevents' build as platform win32 is not supported
  16. [2/4] scripts.install webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2
  17. .7 finished in 249ms
  18. [3/4] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "n
  19. ode lib/post_install.js", root: "D:\\code\\vue\\myvue\\node_modules\\_uglifyjs-w
  20. ebpack-plugin@0.4.6@uglifyjs-webpack-plugin"
  21. [3/4] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finish
  22. ed in 244ms
  23. [4/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2
  24. .5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\code\
  25. \vue\\myvue\\node_modules\\_core-js@2.6.12@core-js"
  26. Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfill
  27. ing JavaScript standard library!
  29. The project needs your help! Please consider supporting of core-js on Open Colle
  30. ctive or Patreon:
  31. > https://opencollective.com/core-js
  32. > https://www.patreon.com/zloirock
  34. Also, the author of core-js ( https://github.com/zloirock ) is looking for a goo
  35. d job -)
  37. [4/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2
  38. .5.0 finished in 604ms
  39. √ Run 4 scripts
  40. deprecate html-webpack-plugin@^2.30.1 out of support
  41. deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://gith
  42. ub.com/webpack-contrib/mini-css-extract-plugin
  43. deprecate webpack-dev-server@2.11.5 › chokidar@^2.1.2 Chokidar 2 will break on n
  44. ode v14+. Upgrade to chokidar 3 with 15x less dependencies.
  45. deprecate uglifyjs-webpack-plugin@1.3.0 › uglify-es@^3.3.4 support for ECMAScrip
  46. t is superseded by `uglify-js` as of v3.13.0
  47. deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › brow
  48. serslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config us
  49. ed in other tools.
  50. deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2.7 fsevents
  51. 1 will break on node v14+ and could be using insecure binaries. Upgrade to fseve
  52. nts 2.
  53. deprecate vue-loader@13.7.3 › postcss-selector-parser@2.2.3 › flatten@^1.0.2 fla
  54. tten is deprecated in favor of utility frameworks such as lodash.
  55. deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on
  56.  reading Browserslist >3.0 config used in other tools.
  57. deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj`
  58. package for fixes and new features!
  59. deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon
  60. @0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/ly
  61. dell/urix#deprecated
  62. deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon
  63. @0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell
  64. /resolve-url#deprecated
  65. deprecate webpack-dev-server@2.11.5 › sockjs@0.3.19 › uuid@^3.0.1 Please upgrade
  66.   to version 7 or higher.  Older versions may use Math.random() in certain circu
  67. mstances, which is known to be problematic.  See https://v8.dev/blog/math-random
  68.  for details.
  69. deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@^0.7.0
  70.  This SVGO version is no longer supported. Upgrade to v2.x.x.
  71. deprecate optimize-css-assets-webpack-plugin@3.2.1 › cssnano@4.1.11 › cssnano-pr
  72. eset-default@4.0.8 › postcss-svgo@4.0.3 › svgo@^1.0.0 This SVGO version is no lo
  73. nger supported. Upgrade to v2.x.x.
  74. deprecate webpack@3.12.0 › node-libs-browser@2.2.1 › url@0.11.0 › querystring@0.
  75. 2.0 The querystring API is considered Legacy. new code should use the URLSearchP
  76. arams API instead.
  77. deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3.
  78. 3 is no longer maintained and not recommended for usage due to the number of iss
  79. ues. Because of the V8 engine whims, feature detection in old core-js versions c
  80. ould cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade
  81. your dependencies to the actual version of core-js.
  82. Recently updated (since 2021-10-28): 5 packages (detail see file D:\code\vue\myv
  83. ue\node_modules\.recently_updates.txt)
  84.   Today:
  85.     → babel-preset-env@1.7.0 › browserslist@3.2.8 › electron-to-chromium@^1.3.4
  86. 7(1.3.888) (03:02:31)
  87.     → babel-preset-env@1.7.0 › browserslist@3.2.8 › caniuse-lite@^1.0.30000844(
  88. 1.0.30001276) (10:53:05)
  89.     → css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › browser
  90. slist@1.7.7 › caniuse-db@^1.0.30000639(1.0.30001276) (09:56:38)
  91. √ All packages installed (956 packages installed from npm registry, used 1m(net
  92. work 1m), speed 142.54KB/s, json 804(2.16MB), tarball 6.21MB)
  94. D:\code\vue\myvue>

  1. D:\code\vue\myvue>npm run dev
  3. > myvue@1.0.0 dev D:\code\vue\myvue
  4. > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  6.  10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
  7.  10% building modules 1/2 modules 1 active ...client\index.js?http://localhost:8
  8.  10% building modules 2/3 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo
  9.  10% building modules 2/4 modules 2 active ...5@webpack-dev-server\client\socket
  10.  10% building modules 2/5 modules 3 active ...@webpack-dev-server\client\overlay
  11.  10% building modules 3/5 modules 2 active ...@webpack-dev-server\client\overlay
  12.  10% building modules 3/6 modules 3 active ...e\node_modules\_url@0.11.0@url\url
  13.  10% building modules 3/7 modules 4 active ...pack@3.12.0@webpack\hot\dev-server
  14.  10% building modules 4/7 modules 3 active ...pack@3.12.0@webpack\hot\dev-server
  15.  10% building modules 5/7 modules 2 active ...pack@3.12.0@webpack\hot\dev-server
  16.  10% building modules 6/7 modules 1 active ...e\node_modules\_url@0.11.0@url\url
  17.  10% building modules 6/8 modules 2 active ...webpack@3.12.0@webpack\hot\emitter
  18.  10% building modules 7/8 modules 1 active ...webpack@3.12.0@webpack\hot\emitter
  19.  10% building modules 7/9 modules 2 active ...ndex.js!D:\code\vue\myvue\src\main
  20.  10% building modules 7/10 modules 3 active ...es\_webpack@3.12.0@webpack\hot\lo
  21.  10% building modules 8/10 modules 2 active ...es\_webpack@3.12.0@webpack\hot\lo
  22.  11% building modules 9/10 modules 1 active ...es\_webpack@3.12.0@webpack\hot\lo
  23.  11% building modules 9/11 modules 2 active ....12.0@webpack\hot\log-apply-resul
  24.  11% building modules 9/12 modules 3 active ...\node_modules\_url@0.11.0@url\uti
  25.  11% building modules 10/12 modules 2 active ...\node_modules\_url@0.11.0@url\ut
  26.  11% building modules 10/13 modules 3 active ...\_punycode@1.4.1@punycode\punyco
  27.  11% building modules 10/14 modules 4 active ...ng-es3@0.2.1@querystring-es3\ind
  28.  11% building modules 11/14 modules 3 active ...ng-es3@0.2.1@querystring-es3\ind
  29.  11% building modules 11/15 modules 4 active ...glevel@1.7.1@loglevel\lib\loglev
  30.  11% building modules 12/15 modules 3 active ...glevel@1.7.1@loglevel\lib\loglev
  31.  11% building modules 12/16 modules 4 active ...pack@3.12.0@webpack\buildin\modu
  32.  11% building modules 12/17 modules 5 active ...pack@3.12.0@webpack\buildin\glob
  33.  11% building modules 13/17 modules 4 active ...pack@3.12.0@webpack\buildin\glob
  34.  11% building modules 14/17 modules 3 active ...glevel@1.7.1@loglevel\lib\loglev
  35.  11% building modules 15/17 modules 2 active ...glevel@1.7.1@loglevel\lib\loglev
  36.  11% building modules 15/18 modules 3 active ...odules\_events@3.3.0@events\even
  37.  11% building modules 15/19 modules 4 active ..._strip-ansi@3.0.1@strip-ansi\ind
  38.  11% building modules 16/19 modules 3 active ..._strip-ansi@3.0.1@strip-ansi\ind
  39.  12% building modules 17/19 modules 2 active ..._strip-ansi@3.0.1@strip-ansi\ind
  40.  12% building modules 17/20 modules 3 active ...nt@1.1.5@sockjs-client\dist\sock
  41.  12% building modules 18/20 modules 2 active ...nt@1.1.5@sockjs-client\dist\sock
  42.  12% building modules 18/21 modules 3 active ...g-es3@0.2.1@querystring-es3\deco
  43.  12% building modules 18/22 modules 4 active ...g-es3@0.2.1@querystring-es3\enco
  44.  12% building modules 19/22 modules 3 active ...g-es3@0.2.1@querystring-es3\enco
  45.  12% building modules 19/23 modules 4 active ...s\_ansi-html@0.0.7@ansi-html\ind
  46.  12% building modules 20/23 modules 3 active ...s\_ansi-html@0.0.7@ansi-html\ind
  47.  12% building modules 20/24 modules 4 active ...ties@1.4.0@html-entities\lib\ind
  48.  12% building modules 20/25 modules 5 active ...dules\_vue@2.6.14@vue\dist\vue.e
  49.  12% building modules 21/25 modules 4 active ...dules\_vue@2.6.14@vue\dist\vue.e
  50.  12% building modules 22/25 modules 3 active ...dules\_vue@2.6.14@vue\dist\vue.e
  51.  12% building modules 23/25 modules 2 active ...dules\_vue@2.6.14@vue\dist\vue.e
  52.  12% building modules 24/25 modules 1 active ...dules\_vue@2.6.14@vue\dist\vue.e
  53.  13% building modules 25/26 modules 1 active ...4.0@html-entities\lib\xml-entiti
  54.  13% building modules 25/27 modules 2 active ...0@html-entities\lib\html4-entiti
  55.  13% building modules 25/28 modules 3 active ...0@html-entities\lib\html5-entiti
  56.  13% building modules 26/28 modules 2 active ...0@html-entities\lib\html5-entiti
  57.  13% building modules 27/28 modules 1 active ...0@html-entities\lib\html4-entiti
  58.  13% building modules 28/29 modules 1 active ...?ref--0!D:\code\vue\myvue\src\Ap
  59.  13% building modules 29/30 modules 1 active ...@html-entities\lib\surrogate-pai
  60.  13% building modules 29/31 modules 2 active ..._ansi-regex@2.1.1@ansi-regex\ind
  61.  13% building modules 30/31 modules 1 active ..._ansi-regex@2.1.1@ansi-regex\ind
  62.  13% building modules 30/32 modules 2 active ...ue-loader\lib\component-normaliz
  63.  13% building modules 31/32 modules 1 active ...ue-loader\lib\component-normaliz
  64.  13% building modules 32/33 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
  65.  13% building modules 32/34 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
  66.  13% building modules 33/34 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
  67.  13% building modules 33/35 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
  68.  13% building modules 33/36 modules 3 active ...index=0!D:\code\vue\myvue\src\Ap
  69.  14% building modules 34/36 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
  70. p.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
  71. .
  72.  14% building modules 35/36 modules 1 active ....3.4@vue-hot-reload-api\dist\ind
  73.  14% building modules 35/37 modules 2 active ...index=0!D:\code\vue\myvue\src\Ap
  74.  14% building modules 36/37 modules 1 active ...index=0!D:\code\vue\myvue\src\Ap
  75.  14% building modules 36/38 modules 2 active ...e-style-loader\lib\addStylesClie
  76.  14% building modules 37/38 modules 1 active ...index=0!D:\code\vue\myvue\src\Ap
  77.  14% building modules 37/39 modules 2 active ...e\myvue\src\components\HelloWorl
  78.  14% building modules 37/40 modules 3 active ...@vue-style-loader\lib\listToStyl
  79.  14% building modules 38/40 modules 2 active ...@vue-style-loader\lib\listToStyl
  80.  14% building modules 39/40 modules 1 active ...@vue-style-loader\lib\listToStyl
  81.  14% building modules 39/41 modules 2 active ...e\myvue\src\components\HelloWorl
  82.  14% building modules 40/41 modules 1 active ...@vue-style-loader\lib\listToStyl
  83.  14% building modules 40/42 modules 2 active ...e\myvue\src\components\HelloWorl
  84.  14% building modules 40/43 modules 3 active ...e\myvue\src\components\HelloWorl
  85.  14% building modules 41/43 modules 2 active ...e\myvue\src\components\HelloWorl
  86.  15% building modules 42/43 modules 1 active ...@vue-style-loader\lib\listToStyl
  87.  15% building modules 42/44 modules 2 active ...e\myvue\src\components\HelloWorl
  88.  15% building modules 43/44 modules 1 active ...@vue-style-loader\lib\listToStyl
  89.  15% building modules 44/45 modules 1 active ...er@0.28.11@css-loader\lib\css-ba
  90.  15% building modules 45/46 modules 1 active ...D:\code\vue\myvue\src\assets\log
  91.  95% emitting
  93.  DONE  Compiled successfully in 9813ms                                  23:21:26
  95.  I  Your application is running here: http://localhost:8080

安装并运行成功后在浏览器输入：http://localhost:8080

Vue-cli目录结构

用IDEA打开myvue

  • build 和 config：WebPack 配置文件
  • node_modules：用于存放 npm install 安装的依赖文件
  • src： 项目源码目录
  • static：静态资源文件
  • .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
  • .editorconfig：编辑器配置
  • eslintignore：需要忽略的语法检查配置文件
  • .gitignore：git 忽略的配置文件
  • .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
  • index.html：首页，仅作为模板页，实际开发时不使用
  • package.json：项目的配置文件
    • name：项目名称
    • version：项目版本
    • description：项目描述
    • author：项目作者
    • scripts：封装常用命令
    • dependencies：生产环境依赖
    • devDependencies：开发环境依赖
  1. {
  2.   "name": "myvue",
  3.   "version": "1.0.0",
  4.   "description": "A Vue.js project",
  5.   "author": "wl3pbzhyq <wl3pbzhyq@163.com>",
  6.   "private": true,
  7.   "scripts": {
  8.     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  9.     "start": "npm run dev",
  10.     "build": "node build/build.js"
  11.   },
  12.   "dependencies": {
  13.     "vue": "^2.5.2"
  14.   },
  15.   "devDependencies": {
  16.     "autoprefixer": "^7.1.2",
  17.     "babel-core": "^6.22.1",
  18.     "babel-helper-vue-jsx-merge-props": "^2.0.3",
  19.     "babel-loader": "^7.1.1",
  20.     "babel-plugin-syntax-jsx": "^6.18.0",
  21.     "babel-plugin-transform-runtime": "^6.22.0",
  22.     "babel-plugin-transform-vue-jsx": "^3.5.0",
  23.     "babel-preset-env": "^1.3.2",
  24.     "babel-preset-stage-2": "^6.22.0",
  25.     "chalk": "^2.0.1",
  26.     "copy-webpack-plugin": "^4.0.1",
  27.     "css-loader": "^0.28.0",
  28.     "extract-text-webpack-plugin": "^3.0.0",
  29.     "file-loader": "^1.1.4",
  30.     "friendly-errors-webpack-plugin": "^1.6.1",
  31.     "html-webpack-plugin": "^2.30.1",
  32.     "node-notifier": "^5.1.2",
  33.     "optimize-css-assets-webpack-plugin": "^3.2.0",
  34.     "ora": "^1.2.0",
  35.     "portfinder": "^1.0.13",
  36.     "postcss-import": "^11.0.0",
  37.     "postcss-loader": "^2.0.8",
  38.     "postcss-url": "^7.2.1",
  39.     "rimraf": "^2.6.0",
  40.     "semver": "^5.3.0",
  41.     "shelljs": "^0.7.6",
  42.     "uglifyjs-webpack-plugin": "^1.1.1",
  43.     "url-loader": "^0.5.8",
  44.     "vue-loader": "^13.3.0",
  45.     "vue-style-loader": "^3.0.1",
  46.     "vue-template-compiler": "^2.5.2",
  47.     "webpack": "^3.6.0",
  48.     "webpack-bundle-analyzer": "^2.9.0",
  49.     "webpack-dev-server": "^2.9.1",
  50.     "webpack-merge": "^4.1.0"
  51.   },
  52.   "engines": {
  53.     "node": ">= 6.0.0",
  54.     "npm": ">= 3.0.0"
  55.   },
  56.   "browserslist": [
  57.     "> 1%",
  58.     "last 2 versions",
  59.     "not ie <= 8"
  60.   ]
  61. }

index.js

  1. 'use strict'
  2. // Template version: 1.3.1
  3. // see http://vuejs-templates.github.io/webpack for documentation.
  5. const path = require('path')
  7. module.exports = {
  8.   dev: {
  10.     // Paths
  11.     assetsSubDirectory: 'static',
  12.     assetsPublicPath: '/',
  13.     proxyTable: {},
  15.     // Various Dev Server settings
  16.     host: 'localhost', // can be overwritten by process.env.HOST
  17.     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  18.     autoOpenBrowser: false,
  19.     errorOverlay: true,
  20.     notifyOnErrors: true,
  21.     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  23.     /**
  24.      * Source Maps
  25.      */
  27.     // https://webpack.js.org/configuration/devtool/#development
  28.     devtool: 'cheap-module-eval-source-map',
  30.     // If you have problems debugging vue-files in devtools,
  31.     // set this to false - it *may* help
  32.     // https://vue-loader.vuejs.org/en/options.html#cachebusting
  33.     cacheBusting: true,
  35.     cssSourceMap: true
  36.   },
  38.   build: {
  39.     // Template for index.html
  40.     index: path.resolve(__dirname, '../dist/index.html'),
  42.     // Paths
  43.     assetsRoot: path.resolve(__dirname, '../dist'),
  44.     assetsSubDirectory: 'static',
  45.     assetsPublicPath: '/',
  47.     /**
  48.      * Source Maps
  49.      */
  51.     productionSourceMap: true,
  52.     // https://webpack.js.org/configuration/devtool/#production
  53.     devtool: '#source-map',
  55.     // Gzip off by default as many popular static hosts such as
  56.     // Surge or Netlify already gzip all static assets for you.
  57.     // Before setting to `true`, make sure to:
  58.     // npm install --save-dev compression-webpack-plugin
  59.     productionGzip: false,
  60.     productionGzipExtensions: ['js', 'css'],
  62.     // Run the build command with an extra argument to
  63.     // View the bundle analyzer report after build finishes:
  64.     // `npm run build --report`
  65.     // Set to `true` or `false` to always turn it on or off
  66.     bundleAnalyzerReport: process.env.npm_config_report
  67.   }
  68. }

src 目录

src目录是项目的源码目录，所有代码都会写在这里

main.js

项目的入口文件，我们知道所有的程序都会有一个入口
​

  • import Vue from 'vue'：ES6 写法，会被转换成 require(“vue”); （require 是 NodeJS 提供的模块加载器）
  • import App from './App'：意思同上，但是指定了查找路径，./ 为当前目录
  • Vue.config.productionTip = false：关闭浏览器控制台关于环境的相关提示
  • new Vue({...})：实例化 Vue
    • el: '#app'：查找 index.html 中 id 为 app 的元素
    • template: ''：模板
    • components: { App }：引入组件，使用的是 import App from ‘./App’ 定义的 App 组件

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import App from './App'
  6. Vue.config.productionTip = false
  8. /* eslint-disable no-new */
  9. new Vue({
  10.   el: '#app',
  11.   components: { App },
  12.   template: '<App/>'
  13. })

App.vue

  1. <template>
  2.   <div id="app">
  3.     <img src="./assets/logo.png">
  4.     <HelloWorld/>
  5.   </div>
  6. </template>
  8. <script>
  9. import HelloWorld from './components/HelloWorld'
  11. export default {
  12.   name: 'App',
  13.   components: {
  14.     HelloWorld
  15.   }
  16. }
  17. </script>
  19. <style>
  20. #app {
  21.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  22.   -webkit-font-smoothing: antialiased;
  23.   -moz-osx-font-smoothing: grayscale;
  24.   text-align: center;
  25.   color: #2c3e50;
  26.   margin-top: 60px;
  27. }
  28. </style>

100_第一个vue-cli项目的更多相关文章

  1. 手动实现一个vue cli

    目录 手动实现一个vue cli 1. 思考准备 2. 我们组织源码将会放在名为src的目录,webpack 打包需要一个入口文件,我们取作 main.js 3. 先预想以下会用到哪些基本依赖,第一个 ...

  2. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  3. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  4. 学习一个Vue模板项目

    最开始学习Vue的时候,不建议直接使用模板,而应该自己从头写起.模板都是人写的,要坚信"人能我能".只有自己亲自实践,才能促进自己主动思考,才能对模板.框架有深刻的理解. 在Git ...

  5. 【vue】创建一个vue前端项目，编译，发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  6. webpack 打包和手动创建一个vue的项目

    首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...

  7. 安装Vue和创建一个Vue脚手架项目

    首先 安装node.js,安装成功可以在控制台输入[node --version ]查看node的版本,因为安装了node会自带npm所以我们可以用 [npm --version]查到npm版本  如 ...

  8. vue/cli项目添加外部js文件的一个方法

    有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...

  9. vue cli 项目的提交

    前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...

  10. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

随机推荐

  1. C++ Primer 查漏补缺 —— C++ 中的各种初始化

    初学者在刚开始读 C++ Primer 的时候,总是容易被书中各种初始化搞得头大:默认初始化.列表初始化.值初始化.类内初始值.构造函数初始值列表.new int 和 new int() 的区别... ...

  2. 题解 Weak in the Middle

    题目传送门 Description 有一个长度为 \(n\) 的序列 \(a_{1,2,...,n}\) ,每次可以删掉 \(a_i\),当 \(\min(a_{i-1},a_{i+1})>a_ ...

  3. NX二次开发 克隆

    NXOpen.UF.UFSession theUfSession = NXOpen.UF.UFSession.GetUFSession(); try { //初始化 NXOpen.UF.UFClone ...

  4. flask操作（增删改查操作）

    增加数据 from .models import Goods from app.extensions import db goods1 = Goods(name='魅族18s', price=3400 ...

  5. C语言知识_1

    +,-,*,/是C语言中表示四则运算的符号.:用来分割不同的语句{}用来对语句进行分组 函数代表了一组数据处理过程,由一对大括号所包含的多条语句来表示这个处理过程.每个函数有唯一的名字,main函数是 ...

  6. for...in和Object.keys()区别

    区别: for in 用来枚举对象的属性,某些情况下,可能按照随机顺序遍历数组元素 object.keys() 可以返回对象属性为元素的数组,数组中属性名顺序和for in比那里返回顺序一样 ---f ...

  7. 第四代富士X100F操作学习

    前言 本文为自己通过B站的UP主[阿布垃机手册]整理.原视频地址:[阿布垃机手册][布瞎BB]富士 X100F 相机外部按键 拍人像自己的设置 [X100F相机光圈大小支持F2到F16+Auto]光圈 ...

  8. Linux常用命令介绍(满足日常操作）

    大家好,今天来给大家分享一些Linux的常用命令,希望对大家有用 命令行的基本格式:   命令字 [选项] [参数]     其中,命令字.选项.参数之间用空格分开,多余的空格将被忽略.[ ]括起来的 ...

  9. UltraSoft - Beta - Scrum Meeting 10

    Date: May 26th, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 记录Scrum Meeting Liuzh 前端 暂无 Kkkk 前端 前端增加了 ...

  10. 学习手册 | MySQL篇 · 其一

    InnoDB关键特性 插入缓冲(Insert Buffer) 问题:   在InnoDB插入的时候,由于记录通常都是按照插入顺序,也就是主键的顺序进行插入的,因此,插入聚集索引是顺序的,不需要随机IO ...