vue项目完整搭建步骤
为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。下载并安装node
下载地址为：https://nodejs.org/en/
在 nodejs官网下载最新版稳定版的node.js安装，自带了npm工具 ,推荐下载左边的。
检查node是否安装成功
为了更快安装，可以使用淘宝的镜像：http://npm.taobao.org/
在终端输入以下命令：
检测cnpm是否安装成功
vue-cli是vue脚手架工具，方便打包，部署，测试等。
进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名
进入项目
安装依赖
此时项目中会多了一个node_modules
启动成功
绛旓細5. 杩涘叆椤圭洰鐩綍 - 鎴愬姛鍒涘缓椤圭洰鍚庯紝杩涘叆椤圭洰鐩綍锛歚cd 椤圭洰鍚峘6. 瀹夎渚濊禆 - 椤圭洰浼氳嚜鍔ㄥ垱寤轰竴涓 `node_modules` 鏂囦欢澶癸紝鐢ㄤ簬瀛樻斁鎵鏈変緷璧栧寘銆7. 鍚姩椤圭洰 - 鎴愬姛瀹夎鎵鏈変緷璧栧悗锛屼娇鐢ㄤ互涓嬪懡浠ゅ惎鍔ㄤ綘鐨 Vue 椤圭洰锛氬畬鎴愪互涓姝ラ鍚庯紝浣犵殑 Vue 椤圭洰灏卞凡缁鎼缓鎴愬姛浜嗐傝繖鏄紑濮嬪紑鍙戠殑绗竴姝ワ紝鎺ヤ笅...
绛旓細涓銆佸畨瑁卬ode鐜 1銆佷笅杞藉湴鍧涓猴細锛氶椤靛叆鍙ｆ枃浠讹紝鍙互娣诲姞涓浜沵eta淇℃伅绛 7銆乸ackage.json锛歯pm鍖呴厤缃枃浠讹紝瀹氫箟浜椤圭洰鐨刵pm鑴氭湰锛屼緷璧栧寘绛変俊鎭 8銆丷EADME.md锛氶」鐩殑璇存槑鏂囨。锛宮arkdown鏍煎紡 9銆.xxxx鏂囦欢锛氳繖浜涙槸涓浜涢厤缃枃浠讹紝鍖呮嫭璇硶閰嶇疆锛実it閰嶇疆绛 ...
绛旓細鍦ㄧ粓绔緭鍏ヤ互涓嬪懡浠わ細妫娴媍npm鏄惁瀹夎鎴愬姛 vue-cli鏄痸ue鑴氭墜鏋跺伐鍏凤紝鏂逛究鎵撳寘锛岄儴缃诧紝娴嬭瘯绛夈傝繘鍏ヤ綘鐨椤圭洰鐩綍锛屽垱寤轰竴涓熀浜 webpack 妯℃澘鐨勬柊椤圭洰: vue init webpack 椤圭洰鍚 杩涘叆椤圭洰 瀹夎渚濊禆 姝ゆ椂椤圭洰涓細澶氫簡涓涓猲ode_modules 鍚姩鎴愬姛
绛旓細锛1锛夊叏灞瀹夎 vue-cli 锛屽湪鍛戒护鎻愮ず绐楀彛鎵ц锛歝npm install -g vue-cli瀹夎vue-cli鍑虹幇浠ヤ笂鎻愮ず琛ㄧずvue-cli姝ｅ父瀹夎鎴愬姛锛屽彲浠ユ寮忓垱寤簐ue-cli宸ョ▼椤圭洰浜嗐傦紙2锛夊畨瑁卾ue-cli鎴愬姛鍚庯紝閫氳繃cd鍛戒护杩涘叆浣犳兂鏀剧疆椤圭洰鐨勬枃浠跺す锛屽湪鍛戒护鎻愮ず绐楀彛鎵ц鍒涘缓vue-cli宸ョ▼椤圭洰鐨勫懡浠わ細vue init webpack鍒涘缓vue-cli宸ョ▼...
绛旓細璇存槑锛氱敓鎴愮洰褰昫ist涓殑main.js锛岃繖鏄釜鎵撳寘杩囩▼ 宸茬粡鐢熸垚dist鐩綍鐨刴ainjs鎵撳寘鏂囦欢 閰嶇疆css-loader鍛戒护琛 閰嶇疆style-loader鍛戒护琛 閰嶇疆css-loader/style-loader鍛戒护琛屽悗锛屽湪webpack.config.js閰嶇疆鏂囦欢閲岄厤缃甽oader锛屽鍔犲.css鏂囦欢鐨勫鐞 鍦椤圭洰鐩綍涓嬫柊寤轰竴涓猻tyle.css鏂囦欢 鐒跺悗鍦╩ain.js鍏ュ彛鏂囦欢閲岄潰鐢...
绛旓細姝ラ涓锛 鍙鍖栫殑褰㈠紡鍒涘缓vue椤圭洰锛 vue -V 銆備互鍚庡彲浠ラ氳繃 vue -V 鍛戒护鎵撳紑鍙鍖朧ue绠＄悊鍣 姝ラ鍗佷簲锛氶変腑宸︿晶鐨 渚濊禆 閫夐」鍗★紝鐒跺悗鐐瑰嚮鍙充晶鐨 瀹夎渚濊禆 姝ラ鍗佷節锛 鐧诲綍鐮佷簯 ,杩涜鍒濆鍖杇it杩滅▼浠撳簱 vue 鍛戒护琛岀殑鏂瑰紡鎼缓鐢╣it绠＄悊鐨剉ue椤圭洰 ...
绛旓細Vue 鐨 MVVM 妗嗘灦鎼缓鍙互鍙傝冧互涓姝ラ锛1. 鍒涘缓涓涓 Vue 瀹炰緥锛屼娇鐢 Vue 鏋勯犲嚱鏁版潵鍒涘缓涓涓 Vue 瀹炰緥銆2. 鍦 Vue 瀹炰緥涓畾涔夋暟鎹佽绠楀睘鎬с佹柟娉曠瓑銆3. 鍦 HTML 涓娇鐢ㄦā鏉胯娉曟潵缁戝畾鏁版嵁鍒拌鍥句笂銆4. 浣跨敤 Vue Router 鏉ュ疄鐜拌矾鐢辩鐞嗐5. 浣跨敤 Vuex 鏉ュ疄鐜扮姸鎬佺鐞嗐傝繖浜涙楠ゅ彲浠ュ府鍔╀綘蹇...
绛旓細鏈杩戝紑鍙戜竴涓猦5椤圭洰锛岄」鐩娇鐢ㄧ殑vue2.0+vant 涓昏鏈変互涓嬪嚑姝 1銆佷娇鐢╲ue-cli鍒涘缓椤圭洰 2銆佸紩鍏ue-router 3銆佸紩鍏uex鍙妚uex-persistedstate 4銆佸紩鍏antui 5銆佸紩鍏ass 6銆佸紩鍏lexible 7銆佸紩鍏ostcss-pxtorem 8銆佸紩鍏xios 9銆侀厤缃紑鍙戠敓浜ф祴璇曠幆澧冨弬鏁 10銆佸紩鍏ュ叾浠栫浉鍏冲簱锛屼緥濡俶oment銆乴odash绛 ...
绛旓細1.瑙ｅ喅vue涓嶈兘鑷姩鎵撳紑娴忚鍣ㄧ殑闂锛氬綋鎴戜滑杈撳叆npm run dev锛岃繍琛椤圭洰锛屽懡浠よ鎻愮ず鎴戜滑杩愯鎴愬姛锛屼絾鏄祻瑙堝櫒涔熸病鏈夎嚜鍔ㄦ墦寮锛屽彧鑳借嚜宸辨墜鍔ㄨ緭鍏ャ傛敼瀹屼箣鍚庨噸鍚竴涓嬪嵆鍙2.涓轰簡閬垮厤绔彛鍐茬獊锛屼篃鍙互淇敼port锛屾墦寮鐩綍鍚屼笂 鏇存敼鎴愬姛锛1. 濡傛灉浣犲凡缁忓叏灞瀹夎浜嗘棫鐗堟湰鐨 vue-cli(1 鎴2)锛屼綘闇瑕佸厛閫氳繃 n...
绛旓細褰撶劧鍦ㄨ繖鏁翠釜杩囩▼锛堟惌寤虹幆澧 + 寮鍙戠ず渚媎emo锛変腑锛屾秹鍙婂埌浠ヤ笅鍑犵偣鐭ヨ瘑鐐广傚寘鎷細koa2鐨勭煡璇嗙偣node鐨勭煡璇嗙偣璺ㄥ煙闂fetch鐨勪娇鐢╝xios鐨勪娇鐢╬romise鐨勬秹鍙妚uex -> state銆乵utations銆乤ctions鐨勪娇鐢ㄧ涓閮ㄥ垎锛氱幆澧鎼缓vue + vuex鐜棣栧厛鏄痸ue + vue-router + vuex鐨勭幆澧冦傛垜浠敤vue-cli鑴氭墜鏋剁敓鎴椤圭洰锛屼細鐢...
