vue cli webstorm

贫富差距的产生 – 目光博客 http://eyehere.net/2017/1947/

https://github.com/vuejs/vue

Vue 2.0 Hello World - JSFiddle https://jsfiddle.net/chxw4kLs/

基于vue-cli快速构建 - 简书 https://www.jianshu.com/p/2769efeaa10a

  Vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。

      Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。

      Vue-cli是快速构建这个单页应用的脚手架，这个可是官方的。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack 、npm 、nodejs 等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的（官方构建建议 ）。一下是构建过程。

      1.使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令

      npm install --global vue-cli

C:Userssas> npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:UserssasAppDataRoaming pmvue-init -> C:UserssasAppDataRoaming pm ode_modulesvue-cliinvue-init
C:UserssasAppDataRoaming pmvue-list -> C:UserssasAppDataRoaming pm ode_modulesvue-cliinvue-list
C:UserssasAppDataRoaming pmvue -> C:UserssasAppDataRoaming pm ode_modulesvue-cliinvue
+ vue-cli@2.9.6
added 252 packages in 122.006s

nodejs+cnpm+webstorm配置 - 掘金 https://juejin.im/post/59fab7d5f265da43247fc795

Vue.js 安装 | 菜鸟教程 http://www.runoob.com/vue2/vue-install.html

单元测试 — Vue.js https://cn.vuejs.org/v2/guide/unit-testing.html

sas@DESKTOP-RVB6E5F MINGW64 ~/WebstormProjects/myv1
$ cnpm install
[npminstall:get] retry GET http://registry.npm.taobao.org/har-validator/download/har-validator-5.0.3.tgz after 100ms, retry left 4, error: RequestError: connect ETIMEDOUT 114.55.80.225:80, GET http://registry.npm.taobao.org/har-validator/download/har-validator-5.0.3.tgz -1 (connected: false, keepalive socket: false, agent status: {"createSocketCount":10,"createSocketErrorCount":0,"closeSocketCount":9,"errorSocketCount":0,"timeoutSocketCount":9,"requestCount":84,"freeSockets":{},"sockets":{"registry.npm.taobao.org:80:":1},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)
headers: {}
[npminstall:get] retry GET http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz after 100ms, retry left 4, error: RequestError: connect ETIMEDOUT 114.55.80.225:80, GET http://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.3.1.tgz -1 (connected: false, keepalive socket: false, agent status: {"createSocketCount":13,"createSocketErrorCount":0,"closeSocketCount":12,"errorSocketCount":0,"timeoutSocketCount":11,"requestCount":90,"freeSockets":{},"sockets":{"registry.npm.taobao.org:80:":1},"requests":{}}, socketHandledRequests: 1, socketHandledResponses: 0)
headers: {}
√ Installed 58 packages
√ Linked 87 latest versions
Downloading https://cdn.npm.taobao.org/dist/chromedriver/2.40/chromedriver_win32.zip
Saving to D:MYTMPH~1chromedriverchromedriver_win32.zip
Received 781K...
Received 1563K...
Received 2345K...
Received 3127K...
Received 3376K total.
Extracting zip contents
Copying to target path C:UserssasWebstormProjectsmyv1
ode_modules\_chromedriver@2.40.0@chromedriverlibchromedriver
Done. ChromeDriver binary available at C:UserssasWebstormProjectsmyv1
ode_modules\_chromedriver@2.40.0@chromedriverlibchromedriverchromedriver.exe
√ Run 1 scripts
Recently updated (since 2018-06-28): 2 packages (detail see file C:UserssasWebstormProjectsmyv1
ode_modules.recently_updates.txt)
√ All packages installed (91 packages installed from npm registry, used 50s, speed 38.25kB/s, json 89(616.82kB), tarball 1.26MB)

sas@DESKTOP-RVB6E5F MINGW64 ~/WebstormProjects/myv1
$ npm run dev

> myv1@1.0.0 dev C:UserssasWebstormProjectsmyv1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main 10% building modules 1/2 modules 1 active ...ode_moduleswebpackhotdev-server 10% building modules 2/3 modules 1 active ...clientindex.js?http://localhost:8 10% building modules 2/4 modules 2 active ...sasWebstormProjectsmyv1srcmain 10% building modules 2/5 modules 3 active ...myv1
ode_moduleswebpackhotlog 10% building modules 2/6 modules 4 active ...duleswebpackhotlog-apply-result 10% building modules 2/7 modules 5 active ...1
ode_moduleswebpackhotemitter 10% building modules 3/7 modules 4 active ...1
ode_moduleswebpackhotemitter 10% building modules 4/7 modules 3 active ...1
ode_moduleswebpackhotemitter 10% building modules 5/7 modules 2 active ...1
ode_moduleswebpackhotemitter 10% building modules 6/7 modules 1 active ...duleswebpackhotlog-apply-result 10% building modules 7/8 modules 1 active ...webpackhot nonrecursive /^./lo 10% building modules 7/9 modules 2 active ...swebpack-dev-serverclientsocket 10% building modules 7/10 modules 3 active ...webpack-dev-serverclientoverla 10% building modules 8/10 modules 2 active ...webpack-dev-serverclientoverla 10% building modules 8/11 modules 3 active ...Projectsmyv1
ode_modulesurlur 11% building modules 9/11 modules 2 active ...Projectsmyv1
ode_modulesurlur 11% building modules 10/11 modules 1 active ...Projectsmyv1
ode_modulesurlu 11% building modules 10/12 modules 2 active ...myv1
ode_modulesvuedistvue.e 11% building modules 10/13 modules 3 active ...tsmyv1
ode_moduleseventseven 11% building modules 11/13 modules 2 active ...tsmyv1
ode_moduleseventseven 11% building modules 12/13 modules 1 active ...tsmyv1
ode_moduleseventseven 11% building modules 12/14 modules 2 active ...ode_moduleswebpackuildinglob 11% building modules 13/14 modules 1 active ...tsmyv1
ode_moduleseventseven 11% building modules 14/15 modules 1 active ...tormProjectsmyv1src
outerind 11% building modules 14/16 modules 2 active ...rojectsmyv1
ode_modulesurlut 11% building modules 14/17 modules 3 active ...myv1
ode_modulesstrip-ansiind 11% building modules 14/18 modules 4 active ...node_modulesloglevellibloglev 11% building modules 14/19 modules 5 active ...yv1
ode_modulespunycodepunyco 11% building modules 14/20 modules 6 active ...node_modulesquerystring-es3ind 11% building modules 15/20 modules 5 active ...node_modulesquerystring-es3ind 11% building modules 15/21 modules 6 active ..._modulessockjs-clientdistsock 11% building modules 16/21 modules 5 active ..._modulessockjs-clientdistsock 12% building modules 17/21 modules 4 active ..._modulessockjs-clientdistsock 12% building modules 17/22 modules 5 active ...sasWebstormProjectsmyv1srcAp 12% building modules 18/22 modules 4 active ...sasWebstormProjectsmyv1srcAp 12% building modules 19/22 modules 3 active ...sasWebstormProjectsmyv1srcAp 12% building modules 19/23 modules 4 active ...ode_moduleswebpackuildinmodu 12% building modules 20/23 modules 3 active ...sasWebstormProjectsmyv1srcAp 12% building modules 21/23 modules 2 active ...sasWebstormProjectsmyv1srcAp 12% building modules 22/23 modules 1 active ...sasWebstormProjectsmyv1srcAp 12% building modules 22/24 modules 2 active ...myv1
ode_modulesansi-htmlind 12% building modules 23/24 modules 1 active ...myv1
ode_modulesansi-htmlind 12% building modules 23/25 modules 2 active ...1
ode_moduleshtml-entitiesind 12% building modules 23/26 modules 3 active ...ode_modulesquerystring-es3deco 12% building modules 23/27 modules 4 active ...ode_modulesquerystring-es3enco 12% building modules 23/28 modules 5 active ...tsmyv1srccomponentsHelloWorl 12% building modules 24/28 modules 4 active ...tsmyv1srccomponentsHelloWorl 13% building modules 25/28 modules 3 active ...tsmyv1srccomponentsHelloWorl 13% building modules 26/28 modules 2 active ...tsmyv1srccomponentsHelloWorl 13% building modules 26/29 modules 3 active ...sasWebstormProjectsmyv1srcAp 13% building modules 27/29 modules 2 active ...tsmyv1srccomponentsHelloWorl 13% building modules 28/29 modules 1 active ...tsmyv1srccomponentsHelloWorl 13% building modules 28/30 modules 2 active ...ue-loaderlibcomponent-normaliz 13% building modules 28/31 modules 3 active ...sasWebstormProjectsmyv1srcAp 13% building modules 29/31 modules 2 active ...ue-loaderlibcomponent-normaliz 13% building modules 30/31 modules 1 active ...ue-loaderlibcomponent-normaliz 13% building modules 30/32 modules 2 active ...tsmyv1srccomponentsHelloWorl 13% building modules 30/33 modules 3 active ...tsmyv1srccomponentsHelloWorl 13% building modules 31/33 modules 2 active ...tsmyv1srccomponentsHelloWorl 13% building modules 32/33 modules 1 active ...ue-loaderlibcomponent-normaliz 13% building modules 32/34 modules 2 active ...leshtml-entitieslibxml-entiti 13% building modules 32/35 modules 3 active ...shtml-entitieslibhtml4-entiti 13% building modules 32/36 modules 4 active ...shtml-entitieslibhtml5-entiti 13% building modules 33/36 modules 3 active ...shtml-entitieslibhtml5-entiti 13% building modules 33/37 modules 4 active ...lesvue-routerdistvue-router.e 13% building modules 33/38 modules 5 active ...myv1
ode_modulesansi-regexind 14% building modules 34/38 modules 4 active ...myv1
ode_modulesansi-regexind 14% building modules 34/39 modules 5 active ...sasWebstormProjectsmyv1srcAp 14% building modules 35/39 modules 4 active ...myv1
ode_modulesansi-regexind 14% building modules 35/40 modules 5 active ...tsmyv1srccomponentsHelloWorl 14% building modules 36/40 modules 4 active ...myv1
ode_modulesansi-regexind 14% building modules 36/41 modules 5 active ...sasWebstormProjectsmyv1srcAp 14% building modules 36/42 modules 6 active ...tsmyv1srccomponentsHelloWorl 14% building modules 37/42 modules 5 active ...tsmyv1srccomponentsHelloWorl 14% building modules 37/43 modules 6 active ...ulesvue-hot-reload-apidistind 14% building modules 38/43 modules 5 active ...ulesvue-hot-reload-apidistind 14% building modules 39/43 modules 4 active ...ulesvue-hot-reload-apidistind 14% building modules 40/43 modules 3 active ...ulesvue-hot-reload-apidistind 14% building modules 40/44 modules 4 active ...e-style-loaderlibaddStylesClie 14% building modules 41/44 modules 3 active ...e-style-loaderlibaddStylesClie 15% building modules 42/44 modules 2 active ...tsmyv1srccomponentsHelloWorl 15% building modules 42/45 modules 3 active ...tormProjectsmyv1srcassetslog 15% building modules 42/46 modules 4 active ...vue-style-loaderliblistToStyl 15% building modules 43/46 modules 3 active ...vue-style-loaderliblistToStyl 15% building modules 44/46 modules 2 active ...vue-style-loaderliblistToStyl 15% building modules 45/46 modules 1 active ...vue-style-loaderliblistToStyl 15% building modules 46/47 modules 1 active ...de_modulescss-loaderlibcss-ba 95% emitting DONE  Compiled successfully in 4353ms10:32:51

 I  Your application is running here: http://localhost:8080

　　

http://localhost:8080/#/