Vue2.0入門
現在web開發應該是很火的. 隨著前端技術的成熟, 手機效能提升. webApp 已經越來越接近原生體驗.
原生開發也應該掌握混合開發的能力,畢竟現在多數公司都要求hybrid開發經歷.(好好中文不用,非要hybrid)
因為公司專案Vue用的比較成熟, 跟著學習了一波
一 配置必要環境
學習任何一門語言官方資料永遠都是最重要,也是必須要了解的 Vue官網
官網提供了教程和各種學習例項.有經驗的可以在官網學習.
Vue.js. 看名字就知道是JavaScript框架. 需要node.js支援.
開啟終端 執行命令 npm -v
Ym:~ shinho$ npm -v 5.6.0 Ym:~ shinho$
如果電腦安裝了node.js,會顯示當前使用的node.js版本. 如果沒裝會提示 npm command not found. 那就去安裝node去吧
由於天朝 牆 的存在,有些資源會被遮蔽或者下載賊慢.最好給npm切換淘寶映象源 cnpm
執行命令 npm install -g cnpm --registry=http://registry.npm.taobao.org 即可
Ym:~ shinho$ npm install -g cnpm --registry=http://registry.npm.taobao.org npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0 /usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm + [email protected] added 21 packages, removed 29 packages and updated 75 packages in 43.764s Ym:~ shinho$
萬事俱備,準備擼Vue
這個不得不提vue腳手架. vue-cli (這個是官網推薦的快速構建Vue應用指令碼,但是不推薦新手直接通過腳手架建立Vue應用)
執行命令 npm install --global vue-cli
完事之後 現在vue 所有的準備工作就OK了.
檢視Vue版本 Vue --version
二 建立Vue應用
選擇一個目錄,準備建立應用. 比如某個路徑的VueDemo資料夾
cd 到這個資料夾. 執行
vue init webpack firstVue
Ym:~ shinho$ cd /Users/shinho/VueDemo
Ym:VueDemo shinho$ vue init webpack firstVue
? Project name demo
? Project description vue 應用demo
? Author shinho <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM
Yes, use Yarn
No, I will handle that myself 按照提示 逐步執行即可. 最後一步使用 use NPM.
接下來就會開始配置這個 Vue應用了
配置完之後. cd 到應用目錄
執行 npm run dev. 然後就可以看到第一個vue應用啟動成功了
Ym:vuedemo shinho$ cd firstVue/
Ym:firstVue shinho$ npm run dev
> [email protected] dev /Users/shinho/VueDemo/firstVue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting b
DONE Compiled successfully in 2615ms 18:43:56
I Your application is running here: http://localhost:8081