鏈枃灏嗗叏闈㈠紩瀵间綘浜嗚В骞朵笂鎵媀ue2妗嗘灦銆備粠瀹冪殑鏍稿績鐗规€э紝瀹夎姝ラ锛屽埌鍩虹缁勪欢鐨勫垱寤猴紝鍐嶅埌楂樼骇鐨勮矾鐢遍厤缃紝鏈€鍚庢暀浣犲浣曟瀯寤哄苟閮ㄧ讲浣犵殑Vue椤圭洰鍒扮敓浜х幆澧冦€?/p>

涓€銆乂ue2 绠€浠嬩笌瀹夎

Vue.js锛屼竴涓敱灏ら洦婧垱寤哄苟缁存姢鐨勬笎杩涘紡妗嗘灦锛屼笓娉ㄤ簬瑙嗗浘灞傦紝鑳藉杞绘澗涓庣涓夋柟搴撴垨鐜版湁椤圭洰鏁村悎銆俈ue2鐗堟湰甯︽潵浜嗚澶氭敼杩涘拰鏂扮壒鎬э紝鎴愪负浜嗗崟椤靛簲鐢紙SPA锛夊紑鍙戠殑鐞嗘兂閫夋嫨銆?/p>

瑕佸紑濮嬩娇鐢╒ue2锛岄鍏堜綘闇€瑕佸畨瑁匩ode.js鍜宯pm銆傜劧鍚庯紝閫氳繃鍛戒护琛屽叏灞€瀹夎Vue CLI锛?/p>

```bash

npm install -g @vue/cli

```

鎺ヤ笅鏉ワ紝浣犲彲浠ュ垱寤轰竴涓柊鐨刅ue椤圭洰锛?/p>

```bash

vue create project-name

```

杩欓噷鐨勨€減roject-name鈥濇浛鎹负浣犳兂瑕佺殑椤圭洰鍚嶇О銆傝繖灏嗙敓鎴愪竴涓柊鐨刅ue椤圭洰锛屽苟鍦ㄥ綋鍓嶇洰褰曚笅鍒涘缓涓€涓寘鍚熀鏈粨鏋勭殑鏂囦欢澶广€?/p>

浜屻€佸熀鏈粍浠剁殑鍒涘缓涓庝娇鐢?/h3>

鍦╒ue2涓紝缁勪欢鐨勫垱寤洪€氬父鍖呮嫭妯℃澘銆佽剼鏈拰鏍峰紡涓夐儴鍒嗐€備緥濡傦紝涓€涓畝鍗曠殑鑷畾涔夌粍浠跺彲鑳藉涓嬫墍绀猴細

```html

{{ message }}

{{ text }}

```

姣忎釜Vue缁勪欢閮芥湁鍏剁敓鍛藉懆鏈燂紝鍖呮嫭鍒涘缓銆佹洿鏂板拰閿€姣佺瓑闃舵銆傚湪缁勪欢鐨勪笉鍚岀敓鍛藉懆鏈熼樁娈碉紝鍙互鎵ц涓嶅悓鐨勬搷浣溿€備緥濡傦紝鍦ㄧ粍浠跺垱寤烘椂鎵ц涓€浜涘垵濮嬪寲鎿嶄綔锛?/p>

```javascript

created() {

console.log('Component created!');

}

```

涓夈€佸弻鍚戞暟鎹粦瀹氫笌妯℃澘璇硶

Vue2閫氳繃鍙屽悜鏁版嵁缁戝畾瀹炵幇鏁版嵁涓嶥OM鐨勫疄鏃跺悓姝ワ紝浣垮紑鍙戣€呰兘澶熸洿涓撴敞浜庝笟鍔￠€昏緫銆備緥濡傦細

```html

{{ count }}

Increment

```

```html

{{ user.name }} is {{ user.age }} years old.

```

鍥涖€佷簨浠跺鐞嗕笌缁勪欢闂撮€氫俊

Vue缁勪欢鍙互閫氳繃浜嬩欢澶勭悊鐢ㄦ埛鎿嶄綔銆備緥濡傦細

```html

Say Hello

```

缁勪欢闂村彲浠ラ€氳繃props鍜屼簨浠讹紙$emit锛夎繘琛屾暟鎹紶閫掑拰浜や簰銆備緥濡傦紝鐖剁粍浠跺彲浠ュ悜瀛愮粍浠朵紶閫掓暟鎹紝瀛愮粍浠跺彲浠ラ€氳繃浜嬩欢鍚戠埗缁勪欢鍙戦€佹暟鎹€?/p>

浜斻€佽矾鐢遍厤缃笌椤甸潰瀵艰埅

涓轰簡瀹炵幇SPA鐨勯〉闈㈣烦杞紝鎴戜滑鍙互闆嗘垚Vue Router杩涜椤甸潰璺敱绠＄悊銆傞€氳繃npm瀹夎Vue Router锛?/p>

```bash

npm install vue-router

```

鐒跺悗锛屽湪椤圭洰涓紩鍏ュ苟浣跨敤Vue Router锛?/p>

```javascript

// main.js

import Vue from 'vue';

import VueRouter from 'vue-router';

import Home from './components/Home.vue';

import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [ { path: '/', component: Home }, { path: '/about', component: About }];

const router = new VueRouter({ routes });

new Vue({ router }).$mount('app');

```

鍏€佹瀯寤轰笌閮ㄧ讲 Vue 椤圭洰 馃専 馃摝 馃殌 馃寪 馃敟 銆?浣跨敤 Vue CLI 鍒涘缓鐨勯」鐩凡缁忓唴缃簡鏋勫缓宸ュ叿閾惧拰鑷姩鍖栭厤缃ソ鐨勯儴缃叉柟妗堛€傛偍鍙渶瑕佹墽琛?vue build 鍛戒护鍗冲彲寮€濮嬫瀯寤洪」鐩紝閫氳繃鐢熸垚鐨勬瀯寤虹粨鏋滅洰褰曢噷鐨刣ist鏂囦欢澶瑰彲浠ヨ繘涓€姝ヨ繘琛岄」鐩殑閮ㄧ讲鍜屽垎鍙戝埌鐢熶骇鐜锛佽繖涓嶄粎闄嶄綆浜嗗紑鍙戣€呯殑瀛︿範鎴愭湰锛岃繕鏋佸ぇ鍦版彁楂樹簡寮€鍙戞晥鐜囧拰椤圭洰绋冲畾鎬э紒杩欎笉浠呬粎鏄伐鍏风殑浣跨敤閭ｄ箞绠€鍗曪紝瀹冧唬琛ㄤ簡 Vue 绀惧尯瀵逛簬绠€鍖栧伐浣滄祦绋嬪拰鎵撻€犱紭闆呭紑鍙戜綋楠岀殑鎵胯锛佺幇鍦ㄥ氨寮€濮嬩綘鐨?Vue 寮€鍙戜箣鏃呭惂锛佹帰绱?Vue 椤圭洰锛氫粠鍩虹鍒板疄鎴?/p>

浣犳槸鍚︽兂瀛︿範濡備綍鏋勫缓楂樻晥鐨?Vue 椤圭洰锛屼粠绠€鍗曠殑缁勪欢鍒板鏉傜殑瀹炴垬搴旂敤锛熻窡闅忔湰鏂囷紝浣犲皢涓€姝ユ鎺屾彙 Vue 鐨勬牳蹇冪煡璇嗭紝瀹炵幇杩涢樁涔嬭矾銆?/p>

涓€銆乂ue 椤圭洰鍩虹

浣犻渶瑕佷簡瑙?Vue 椤圭洰鐨勫熀纭€銆傞€氳繃 Vue CLI锛屼綘鍙互杞绘澗鍒涘缓椤圭洰骞剁鐞嗕緷璧栥€傝繍琛?`vue build` 鍛戒护锛屼竴涓寘鍚敓浜х幆澧冩墍闇€鎵€鏈夋枃浠剁殑 `dist` 鐩綍灏变細鐢熸垚銆?/p>

浜屻€佺粍浠剁殑鍒涘缓涓庨厤缃?/h3>

鍦?Vue 涓紝缁勪欢鏄瀯寤哄簲鐢ㄧ殑鍩虹鍗曞厓銆傚浼氬浣曞垱寤哄拰閰嶇疆缁勪欢锛屾槸鎺屾彙 Vue 鐨勫叧閿竴姝ャ€備綘鍙互浣跨敤 Vue CLI 杩涜蹇€熷垱寤哄拰閰嶇疆銆傜悊瑙ｇ粍浠堕棿鐨勯€氫俊鏂瑰紡锛屽 props銆佷簨浠舵€荤嚎绛夛紝涔熸槸闈炲父閲嶈鐨勩€?/p>

涓夈€佽矾鐢辩鐞?/h3>

闅忕潃搴旂敤鐨勫鏉傚害澧炲姞锛屼綘闇€瑕佺鐞嗗涓〉闈㈠拰缁勪欢涔嬮棿鐨勫鑸€俈ue Router 鏄?Vue 椤圭洰鐨勬牳蹇冩彃浠朵箣涓€锛岀敤浜庡鐞嗗簲鐢ㄧ殑璺敱绠＄悊銆傛帉鎻?Vue Router 鐨勫熀鏈娇鐢ㄥ拰楂橀樁閰嶇疆锛屽皢甯姪浣犳瀯寤烘洿澶嶆潅鐨?Vue 搴旂敤銆?/p>

鍥涖€侀」鐩紭鍖栦笌閮ㄧ讲

涓轰簡鎻愰珮鐢熶骇鐜鐨勬€ц兘锛屾垜浠渶瑕佸椤圭洰杩涜浼樺寲銆備娇鐢?Webpack 鎴?Rollup 绛夋瀯寤哄伐鍏疯繘琛屼唬鐮佸帇缂╁拰鍒嗗壊銆傚湪 Vue CLI 涓紝浣犲彲浠ュ湪 vue.config.js 鏂囦欢涓厤缃紭鍖栭€夐」銆備緥濡傦紝浣犲彲浠ヨ缃唬鐮佸垎鍓茬殑缂撳瓨缁勶紝浠ヤ紭鍖栫涓夋柟搴撶殑鍔犺浇銆備互涓嬫槸涓€涓畝鍗曠殑閰嶇疆绀轰緥锛?/p>

```javascript

module.exports = {

optimization: {

splitChunks: {

cacheGroups: {

vendor: {

test: /[\\/]node_modules[\\/]/,

name: 'vendors',

chunks: 'all'

}

}

}

}

}

```

閮ㄧ讲 Vue 椤圭洰涔熸槸闈炲父閲嶈鐨勪竴姝ャ€備綘鍙互浣跨敤闈欐€佹枃浠舵墭绠℃湇鍔″ Netlify銆乂ercel 鎴栬€?AWS S3 鍜?CloudFront 绛夎繘琛岄儴缃层€傚湪閮ㄧ讲鍓嶏紝纭繚娓呯悊鐢熶骇鐗堟湰鐨勬枃浠讹紝閬垮厤涓嶅繀瑕佺殑鏂囦欢浣撶Н銆傝繖鏍蜂綘鐨勫簲鐢ㄥ氨鑳藉湪鍏ㄧ悆鑼冨洿鍐呭揩閫熷姞杞藉拰杩愯浜嗐€?/p>

閫氳繃鏈枃鐨勫紩瀵硷紝浣犲皢鎺屾彙浠庡熀鏈粍浠剁殑鍒涘缓鍒板鏉傚簲鐢ㄦ瀯寤虹殑鏁翠釜杩囩▼锛屽寘鎷畨瑁呬笌閰嶇疆銆佺粍浠堕棿閫氫俊銆佽矾鐢辩鐞嗕互鍙婇」鐩紭鍖栦笌閮ㄧ讲銆傛棤璁轰綘鏄垵瀛﹁€呰繕鏄粡楠屼赴瀵岀殑寮€鍙戣€咃紝閮借兘浠庝腑鍙楃泭锛屽疄鐜颁粠 Vue 鍏ラ棬鍒板疄鎴樼殑杩涢樁銆?/p>