Vue.js + ElementUI 搭建项目框架

瀹夎 VueCli 鑴氭墜鏋?/h2>

Vue Cli 鏄畼鏂规彁渚涚殑涓€涓负鍗曗粴闈㈠簲鐢ㄥ揩閫熸惌寤虹殑涓€涓剼鎵嬫灦锛岄€氳繃鑴氭墜鏋跺彲浠ュ府鍔╁紑鍙戣€呭揩閫熸惌 寤?Vue.js 椤圭洰鐨勫紑鍙戞鏋躲€?/p>

鍦ㄥ畨瑁呰剼鎵嬫灦涔嬪墠锛岄渶瑕佸厛瀹夎 Node.js 鍜?Vue.js 鐜銆傚叿浣撶殑瀹夎鏂规硶鍙互鍙傝€冨畼鏂圭粰鍑虹殑鏂?妗ｏ紝鏈枃閲嶇偣浠嬬粛 VueCli銆?/p>

Vue Cli 鐨勫畨瑁呭懡浠ゅ涓嬶細

# 濡傛灉瀹夎鐨勬槸鑰佺増鏈紝鍙互浣跨敤浠ヤ笅鍛戒护鍗歌浇鍚庨噸鏂板畨瑁?
$ npm uninstall -g @vue/cli

# 瀹夎 VueCli
$ npm install -g @vue/cli

鏈鎴戜滑浣跨敤鐨勮剼鎵嬫灦鐗堟湰鏄?code>4.5.12锛岄渶瑕佹敞鎰忕殑鏄?Vue Cli 鐨勭増鏈拰 Vue.js 鐨勭増鏈笉涓€瀹氫竴鏍风殑銆傛垜 浠娇鐢?3.x 鐗堟湰鐨勮剼鎵嬫灦锛屼篃鍙互鎼缓 Vue 2.x 鐨勯」鐩€備娇鐢?Vue Cli 3.x 鐗堟湰鏄洜涓?3.x 鐗堟湰鐨勮剼鎵嬫灦鎻愪緵 浜嗕竴涓彲瑙嗗寲鐨勬搷浣滅晫闈紝鍙互鏇存柟渚跨殑鎵ц鍚勭鎿嶄綔銆?/p>

瀹夎 Vue Cli 涔嬪悗锛屼娇鐢ㄤ互涓嬪懡浠ゅ惎鍔ㄤ竴涓剼鎵嬫灦瀹㈡埛绔€?/p>

$ vue ui

鍛戒护鎵ц缁撴潫杩斿洖浠ヤ笅鍐呭(鍥炬爣璇峰拷鐣ワ紝杩欎釜鍥炬爣鏄洜涓烘垜瀹夎浜嗘彃浠?

鈺扳攢$ vue ui
馃殌  Starting GUI...
馃尃  Ready on http://localhost:8000

鍚姩鍚庡湪娴忚鍣ㄨ緭鍏ワ細 http://localhost:8000 锛岃繘鍏ュ埌鑴氭墜鏋剁晫闈紝濡備笅锛?/p>

鍒涘缓涓€涓?Vue.js 椤圭洰

鍚庣画绔犺妭鐨勫垱寤哄拰渚濊禆鐨勫畨瑁咃紝鎴戜滑閮藉皢閫氳繃鑴氭墜鏋舵潵鎿嶄綔銆?/p>

鐐瑰嚮棣栤粴宸︿笂饣嗙殑涓嬫媺妗嗭紝鍦ㄤ笅鏉ヨ彍鍗曚腑閫夋嫨Vue 椤圭洰绠＄悊鍣?/code>锛屽涓嬶細

鐐瑰嚮鍚庤繘鍏?code>Vue 椤圭洰绠＄悊鍣?/code>鐣岄潰锛屽涓嬶細

鎸夌収鍥句笂鐨勮鏄?閫夋嫨濂介」鐩垱寤虹殑璺緞锛屾敞鎰忚繖涓矾寰勬槸涓嶅寘鍚」鐩悕绉扮殑锛屾垜浠悗缁搷浣滈渶瑕佸～鍐欓」鐩悕锛屾渶缁堝垱寤烘椂锛屼細鍦ㄨ繖涓矾寰勪笅鍒涘缓涓€涓互椤圭洰鍚嶅懡鍚嶇殑鏂囦欢澶广€傞€夋嫨濂藉垱寤鸿矾寰勫悗锛岀偣鍑讳笅鏂圭殑 鍦ㄦ鍒涘缓鏂伴」鐩?/code>鎸夐挳銆傝繘鍏ラ」鐩垱寤虹晫闈紝濡備笅锛?/p>

鍦ㄦ鐣岄潰涓婂～鍐?Vue 鐨勯」鐩悕绉帮紝鍖呯鐞嗗櫒閫夋嫨榛樿锛屽叾浠栭€夐」涔熶繚鎸侀粯璁わ紝鏈€鍚庡～鍐?Git 浠撳簱鐨勬彁浜?淇℃伅銆備竴鑸垜浠殑椤圭洰浠ｇ爜閮戒娇鐢?Git 鏉ョ鐞嗭紝鍥犳蹇呴』淇濊瘉鐜涓凡缁忓畨瑁呰繃 Git銆?br> 濉啓瀹屾垚鍚庣偣鍑?code>涓嬩竴姝?/code>杩涘叆濡備笅鐣岄潰锛?/p>

杩欎竴姝ワ紝鎴戜滑閫夋嫨鎵嬪姩閰嶇疆椤圭洰锛屽鏋滃凡缁忓垱寤鸿繃椤圭洰锛屼篃鍙互灏嗗垱寤鸿繃绋嬩繚瀛樹负棰勮锛岃繖鏍峰皢鏉ュ啀鍒涘缓椤圭洰鏃跺彲浠ヤ娇鐢ㄥ凡淇濆瓨鐨勯璁俱€傞€夋嫨鍚庯紝鐐瑰嚮涓嬩竴姝?/code>缁х画锛岃繘鍏ュ涓嬬晫闈細

鍦ㄨ繖涓晫闈腑鎴戜滑鎵撳紑 Babel銆丷outer銆丩inter/Formatter銆佷娇鐢ㄩ厤缃枃浠讹紝杩欏洓涓€夐」锛屽鏋滀細浣跨敤 Vuex 鍋氱姸鎬佺鐞嗭紝涔熷彲浠ュ嬀閫?code>Vuex閫夐」锛岄厤缃畬鎴愬悗鐐瑰嚮涓嬩竴姝?/code>缁?缁紝杩涘叆濡備笅鐣岄潰锛?/p>

姝ょ晫闈㈡寜鐓у浘涓婄殑瑕佹眰閰嶇疆鍗冲彲锛屽叾涓?code>Use history mode for router?閫夐」瑕佸叧闂紝鍏抽棴鍚庡皢浣跨敤 鍝堝笇妯″紡锛屽吋瀹规€ф洿濂戒竴浜涖€傜浜岄」閫夋嫨ESLint + Standard config锛岃繖鏄疎SLint(璇硶妫€鏌?鐨?鏍囧噯閰嶇疆銆傝繖閲岄渶瑕佹敞鎰?ESLint 鐨勮娉曟鏌ヤ笉瀹滄墦寮€鐨勫お澶氾紝涓嶇劧浼氱粰寮€鍙戣繃绋嬮€犳垚寰堝涓嶅繀瑕佺殑楹荤儲銆?/p>

閰嶇疆瀹屾垚鍚庯紝鐐瑰嚮鍒涘缓椤圭洰锛岃繘鍏ュ涓嬬晫闈細

瀹冧細鎻愮ず鏄惁淇濆瓨涓烘柊棰勮锛屽鏋滃悗闈㈡垜浠垱寤洪」鐩兘閬靛惊姝ら厤缃紝鍙互閫夋嫨淇濆瓨銆傝繖涓€姝ユ搷浣滀箣鍚庯紝 鑴氭墜鏋跺氨寮€濮嬩负鎴戜滑鍒涘缓椤圭洰浜?鍒涘缓鏃堕棿绋嶅井鏈変竴浜涒粨锛岃鑰愬績绛夊緟)銆?/p>

鍒涘缓瀹屾垚鍚庯紝鍐嶆杩涘叆棣栤粴灏卞彲浠ョ湅鍒版垜浠垱寤虹殑椤圭洰浜嗭紝濡備笅锛?/p>

瀹夎 ElementUI 鎻掍欢

鏈鎴戜滑瑕佸畨瑁呯殑鎻掍欢鏄?code>vue-cli-plugin-element锛屾鎻掍欢涓烘垜浠悗缁娇鐢?Element UI 鎻愪緵鏀寔銆?/p>

閫夋嫨棣栤粴鐨?code>鎻掍欢閫夐」锛屽湪鎵撳紑鐨勨粴闈腑鍙充笂饣嗙偣鍑?code>+娣诲姞鎻掍欢 锛屽涓嬶細

鍦ㄦ墦寮€鐨勭晫闈腑杈撳叆锛歷ue-cli-plugin-element锛岄€夋嫨鎴戜滑瑕佸畨瑁呯殑鎻掍欢锛岀偣鍑?code>瀹夎锛屽涓嬶細

瀹夎瀹屾垚鍚庢樉绀哄涓嬬晫闈細

鍦ㄨ繖涓€姝ワ紝鎴戜滑閫夋嫨鎸夐渶瀵煎叆 Element UI 缁勪欢锛岄厤缃畬鎴愬悗锛岀偣鍑?code>瀹屾垚瀹夎銆?/p>

瀹夎渚濊禆

瀹夎 Axios 渚濊禆

Axios 渚濊禆涓烘垜浠悗缁墽琛?Ajax 璇锋眰璋冪敤鍚庣鎺ュ彛鎻愪緵鏀寔銆?/p>

鍦ㄩ饣氱偣鍑?code>渚濊禆閫夐」锛屽湪鍙充笂饣嗙偣鍑?code>+瀹夎渚濊禆 锛岀偣鍑诲悗杩涘叆濡備笅鐣岄潰锛?/p>

鍦?code>杩愯渚濊禆閫夐」鍗′腑杈撳叆axios锛屽湪鎼滅储鍒扮殑渚濊禆涓€夋嫨鎴戜滑瑕佸畨瑁呯殑 axios锛岀偣鍑?code>瀹夎 axios銆?/p>

瀹夎 less 渚濊禆鍜?less-loader 渚濊禆

瀹夎 less 渚濊禆鍜?less-loader 渚濊禆鐨勭洰鐨勬槸璁╂垜浠彲浠ヤ娇鐢?less 璇硶饣涙牸鏉ョ紪鍐?CSS 鏍峰紡銆?/p>

瀹夎鏂规硶鍜屽畨瑁?Axios 渚濊禆绫讳技锛屽尯鍒槸 less 鍜?less-loader 瑕佸畨瑁呭埌寮€鍙戜緷璧?/code>銆?/p>

杩欓噷鏈変竴鐐规槸闇€瑕佹敞鎰忕殑锛屽鏋滈」鐩娇鐢ㄧ殑 Vue.js 鐗堟湰鏄?2.x 鐗堟湰锛岄偅涔?less 鍜?less-loader 灏变笉鑳戒娇鐢ㄥお楂樼殑鐗堟湰锛屽惁鍒欎細鎶ラ敊銆傝繖閲屾垜浠娇鐢ㄦ墜宸ュ畨瑁?code>less鍜?code>less-loader銆?/p>

鎵撳紑鍛戒护绐楀彛锛岃繘鍏ュ埌鎴戜滑鍓嶉潰鍒涘缓椤圭洰鐨勬牴鐩綍锛岃緭鍏ヤ互涓嬪懡浠よ繘琛屽畨瑁咃細

$ npm install less@3.9.0 less-loader@4.1.0 --save-dev

浠ｇ爜宸ョ▼閰嶇疆

浣跨敤鑴氭墜鏋剁敓鎴愮殑浠ｇ爜杩橀渶瑕佺◢浣滀慨鏀广€?/p>

淇敼 Eslint 閰嶇疆

鍦ㄩ」鐩牴鐩綍涓嬫壘鍒?code>.eslintrc.js鏂囦欢锛屽湪鏂囦欢涓坊鍔犵浉鍏宠鍒欙紝瀹屾暣浠ｇ爜濡備笅锛?/p>

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', '@vue/standard'],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' 'warn' : 'off',
        // -------------- vvvvvvvvvv -----------------
        quotes: [1, 'single'], // 浣跨敤鍗曞紩鍙凤紝鎻愮ず鏄鍛?
        semi: 0,
        'space-before-blocks': [0, 'always'], //涓嶄互鏂拌寮€濮嬬殑鍧梴鍓嶉潰瑕佷笉瑕佹湁绌烘牸
        'space-before-function-paren': [0, 'always'], //鍑芥暟瀹氫箟鏃舵嫭鍙峰墠闈㈣涓嶈鏈夌┖鏍?
        'space-in-parens': [0, 'never'], //灏忔嫭鍙烽噷闈㈣涓嶈鏈夌┖鏍?
        'space-infix-ops': 0, //涓紑鎿嶄綔绗﹀懆鍥磋涓嶈鏈夌┖鏍?
        'space-unary-ops': [
            0,
            {
                words: true,
                nonwords: false
            }
        ], //涓€鍏冭繍绠楃鐨勫墠/鍚庤涓嶈鍔犵┖鏍?
        'spaced-comment': 0, //娉ㄩ噴椋庢牸涓嶈鏈夌┖鏍间粈涔堢殑
        'no-unused-expressions': 0,
        'lines-between-class-members': 0,
        indent: ['off', 4], // 缂╄繘椋庢牸
        newIsCap: 0
        // -------------- ^^^^^^^^^^ -----------------
    }
};

涓昏娣诲姞鐨勬槸v鍜?code>^娉ㄩ噴涓棿鐨勯偅閮ㄥ垎閰嶇疆锛岃繖涓€姝ョ殑鐩殑鏄湪鎴戜滑寮€鍙戣繃绋嬩腑锛岄伩鍏?Eslint 妫€鏌ュ鑷寸殑閿欒銆?/p>

鍒涘缓 Prettier 閰嶇疆鏂囦欢

鍥犱负鎴戣繖閲屼娇鐢ㄧ殑鏄?Prettier 鎻掍欢鏉ヨ繘琛屾牸寮忓寲鐨勶紝鎵€浠ュ垱寤虹殑鏄?Prettier 鐨勯厤缃枃浠躲€?/p>

鍒涘缓涓€涓崟鐙殑閰嶇疆鏂囦欢鏄负浜嗚浠ｇ爜鐨勪功鍐欓鏍兼洿缁熶竴銆傚浜哄崗浣滄椂锛屽彲浠ユ洿濂界殑鎺у埗浠ｇ爜涔﹀啓椋庢牸銆?/p>

鍦ㄩ」鐩殑鏍圭洰褰曚笅鍒涘缓.prettierrc閰嶇疆鏂囦欢锛屽湪閰嶇疆鏂囦欢涓坊鍔犲涓嬩唬鐮侊細

{
    "printWidth": 120,
    "tabWidth": 4,
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": true
}

杩愯椤圭洰

鍦ㄩ饣氱偣鍑?code>浠诲姟閫夐」锛屽湪鎵撳紑鐨勭晫闈腑閫夋嫨serve锛岀劧鍚庡湪鍙充晶鐨勭晫闈腑鐐瑰嚮杩愯銆傚涓嬶細

濡傛灉鎴戜滑閰嶇疆娌℃湁閿欒锛屼細鍦?code>浠〃鐩?/code>涓湅鍒伴」鐩惎鍔ㄦ垚鍔熴€傚惎鍔ㄥ悗鐐瑰嚮浠〃鐩?/code>鏍囬鏍忓彸渚х殑鍚姩 app鎸夐挳鍗冲彲鎵撳紑鎴戜滑鐨勯」鐩椤点€傝嚦姝わ紝鎴戜滑鐨?Vue + Element UI 鐨勬鏋舵惌寤洪儴鍒嗗氨宸茬粡瀹屾垚浜嗐€?/p>