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:\Users\sas> npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\sas\AppData\Roaming\npm\vue-init -> C:\Users\sas\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\sas\AppData\Roaming\npm\vue-list -> C:\Users\sas\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\sas\AppData\Roaming\npm\vue -> C:\Users\sas\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
+ 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~1\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1563K...
Received 2345K...
Received 3127K...
Received 3376K total.
Extracting zip contents
Copying to target path C:\Users\sas\WebstormProjects\myv1\node_modules\_chromedriver@2.40.0@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\sas\WebstormProjects\myv1\node_modules\_chromedriver@2.40.0@chromedriver\lib\chromedriver\chromedriver.exe
√ Run 1 scripts
Recently updated (since 2018-06-28): 2 packages (detail see file C:\Users\sas\WebstormProjects\myv1\node_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:\Users\sas\WebstormProjects\myv1
> 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_modules\webpack\hot\dev-server 10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:8 10% building modules 2/4 modules 2 active ...sas\WebstormProjects\myv1\src\main 10% building modules 2/5 modules 3 active ...\myv1\node_modules\webpack\hot\log 10% building modules 2/6 modules 4 active ...dules\webpack\hot\log-apply-result 10% building modules 2/7 modules 5 active ...1\node_modules\webpack\hot\emitter 10% building modules 3/7 modules 4 active ...1\node_modules\webpack\hot\emitter 10% building modules 4/7 modules 3 active ...1\node_modules\webpack\hot\emitter 10% building modules 5/7 modules 2 active ...1\node_modules\webpack\hot\emitter 10% building modules 6/7 modules 1 active ...dules\webpack\hot\log-apply-result 10% building modules 7/8 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo 10% building modules 7/9 modules 2 active ...s\webpack-dev-server\client\socket 10% building modules 7/10 modules 3 active ...\webpack-dev-server\client\overla 10% building modules 8/10 modules 2 active ...\webpack-dev-server\client\overla 10% building modules 8/11 modules 3 active ...Projects\myv1\node_modules\url\ur 11% building modules 9/11 modules 2 active ...Projects\myv1\node_modules\url\ur 11% building modules 10/11 modules 1 active ...Projects\myv1\node_modules\url\u 11% building modules 10/12 modules 2 active ...myv1\node_modules\vue\dist\vue.e 11% building modules 10/13 modules 3 active ...ts\myv1\node_modules\events\even 11% building modules 11/13 modules 2 active ...ts\myv1\node_modules\events\even 11% building modules 12/13 modules 1 active ...ts\myv1\node_modules\events\even 11% building modules 12/14 modules 2 active ...ode_modules\webpack\buildin\glob 11% building modules 13/14 modules 1 active ...ts\myv1\node_modules\events\even 11% building modules 14/15 modules 1 active ...tormProjects\myv1\src\router\ind 11% building modules 14/16 modules 2 active ...rojects\myv1\node_modules\url\ut 11% building modules 14/17 modules 3 active ...myv1\node_modules\strip-ansi\ind 11% building modules 14/18 modules 4 active ...node_modules\loglevel\lib\loglev 11% building modules 14/19 modules 5 active ...yv1\node_modules\punycode\punyco 11% building modules 14/20 modules 6 active ...node_modules\querystring-es3\ind 11% building modules 15/20 modules 5 active ...node_modules\querystring-es3\ind 11% building modules 15/21 modules 6 active ..._modules\sockjs-client\dist\sock 11% building modules 16/21 modules 5 active ..._modules\sockjs-client\dist\sock 12% building modules 17/21 modules 4 active ..._modules\sockjs-client\dist\sock 12% building modules 17/22 modules 5 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 18/22 modules 4 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 19/22 modules 3 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 19/23 modules 4 active ...ode_modules\webpack\buildin\modu 12% building modules 20/23 modules 3 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 21/23 modules 2 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 22/23 modules 1 active ...sas\WebstormProjects\myv1\src\Ap 12% building modules 22/24 modules 2 active ...\myv1\node_modules\ansi-html\ind 12% building modules 23/24 modules 1 active ...\myv1\node_modules\ansi-html\ind 12% building modules 23/25 modules 2 active ...1\node_modules\html-entities\ind 12% building modules 23/26 modules 3 active ...ode_modules\querystring-es3\deco 12% building modules 23/27 modules 4 active ...ode_modules\querystring-es3\enco 12% building modules 23/28 modules 5 active ...ts\myv1\src\components\HelloWorl 12% building modules 24/28 modules 4 active ...ts\myv1\src\components\HelloWorl 13% building modules 25/28 modules 3 active ...ts\myv1\src\components\HelloWorl 13% building modules 26/28 modules 2 active ...ts\myv1\src\components\HelloWorl 13% building modules 26/29 modules 3 active ...sas\WebstormProjects\myv1\src\Ap 13% building modules 27/29 modules 2 active ...ts\myv1\src\components\HelloWorl 13% building modules 28/29 modules 1 active ...ts\myv1\src\components\HelloWorl 13% building modules 28/30 modules 2 active ...ue-loader\lib\component-normaliz 13% building modules 28/31 modules 3 active ...sas\WebstormProjects\myv1\src\Ap 13% building modules 29/31 modules 2 active ...ue-loader\lib\component-normaliz 13% building modules 30/31 modules 1 active ...ue-loader\lib\component-normaliz 13% building modules 30/32 modules 2 active ...ts\myv1\src\components\HelloWorl 13% building modules 30/33 modules 3 active ...ts\myv1\src\components\HelloWorl 13% building modules 31/33 modules 2 active ...ts\myv1\src\components\HelloWorl 13% building modules 32/33 modules 1 active ...ue-loader\lib\component-normaliz 13% building modules 32/34 modules 2 active ...les\html-entities\lib\xml-entiti 13% building modules 32/35 modules 3 active ...s\html-entities\lib\html4-entiti 13% building modules 32/36 modules 4 active ...s\html-entities\lib\html5-entiti 13% building modules 33/36 modules 3 active ...s\html-entities\lib\html5-entiti 13% building modules 33/37 modules 4 active ...les\vue-router\dist\vue-router.e 13% building modules 33/38 modules 5 active ...myv1\node_modules\ansi-regex\ind 14% building modules 34/38 modules 4 active ...myv1\node_modules\ansi-regex\ind 14% building modules 34/39 modules 5 active ...sas\WebstormProjects\myv1\src\Ap 14% building modules 35/39 modules 4 active ...myv1\node_modules\ansi-regex\ind 14% building modules 35/40 modules 5 active ...ts\myv1\src\components\HelloWorl 14% building modules 36/40 modules 4 active ...myv1\node_modules\ansi-regex\ind 14% building modules 36/41 modules 5 active ...sas\WebstormProjects\myv1\src\Ap 14% building modules 36/42 modules 6 active ...ts\myv1\src\components\HelloWorl 14% building modules 37/42 modules 5 active ...ts\myv1\src\components\HelloWorl 14% building modules 37/43 modules 6 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 38/43 modules 5 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 39/43 modules 4 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 40/43 modules 3 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 40/44 modules 4 active ...e-style-loader\lib\addStylesClie 14% building modules 41/44 modules 3 active ...e-style-loader\lib\addStylesClie 15% building modules 42/44 modules 2 active ...ts\myv1\src\components\HelloWorl 15% building modules 42/45 modules 3 active ...tormProjects\myv1\src\assets\log 15% building modules 42/46 modules 4 active ...\vue-style-loader\lib\listToStyl 15% building modules 43/46 modules 3 active ...\vue-style-loader\lib\listToStyl 15% building modules 44/46 modules 2 active ...\vue-style-loader\lib\listToStyl 15% building modules 45/46 modules 1 active ...\vue-style-loader\lib\listToStyl 15% building modules 46/47 modules 1 active ...de_modules\css-loader\lib\css-ba 95% emitting DONE  Compiled successfully in 4353ms10:32:51

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

　　

http://localhost:8080/#/