4.1模組化開發 常見的模組化規範: CommonJS AMD CMD 也有ES6的MOdules ES6的export指令 enport指令用於匯出變數,比如

//info.js
export let name= 'wch'
export let age= 18
export let height= 1.88

//第二種方法
let name= 'wch'
let age= 18
let height= 1.88
export {
    name,
    age,
    height
}

匯出函式或類

//前面主要輸出了變數,也可以輸出函式或者類
export function test(content){
    console.log(content)
}

export class Person {
    constrvctor(name,age){
        
 
this.name = name,
        this.age = age
    }
    
    run(){
        console.log(this.name + '在奔跑')
    }
}

function test(content){
    console.log(content)
}

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    run(){
        console.log(this.name + '
 
在奔跑')
    }
}

export {
    test,
    Person
}

4.2export default 在某些情況下,一個模組中包含了某個功能,我們並不希望給這個功能命名,而且讓匯入者自己來命名

//info.js
export default function() {
    console.log('default function')
}

來到main.js中直接使用就可以了 這裡的myFunc是自己命名的,

import myFunc from './info.js'
myFunc()

另外需要注意: export default在同一個模組中,不允許同時存在多個 4.3 import 使用 我們使用export指令匯出了模組對外提供的介面，下面我們就可以通過import命令來載入對應的這個模組了 首先，我們需要在HTML程式碼中引入兩個js檔案，並且型別需要設定為module import指令用於匯入模組中的內容，比如main.js的程式碼 如果我們希望某個模組中所有的資訊都匯入，一個個匯入顯然有些麻煩： 通過*可以匯入模組中所有的export變數 但是通常情況下我們需要給*起一個別名，方便後續的使用 5.1安裝Vue腳手架 npm install -g @vue/cli 注意:上面安裝是的最新版4.x的版本 如果想用按照vue/cli 2的方式初始化專案是不行的 解決辦法: 拉取2.x模板(舊版本) npm install -g @vue/cli-init Vue Cli2初始化專案 vue init webpack myproject Vue Cli3初始化專案: vue creat myproject (如果已經全域性安裝了vue/cli2 )需要先通過 npm uninstall vue-cli -g或者 yarn global remove vue-cli 解除安裝它 然後通過npm install -g @vue/cli 通過 vue --version 5.2Runtime-Compiler 和Runtime-only的區別 如果在之後的開發中,依然選擇template 就需要選擇Runtime-Compiler 如果之後開發中,使用的是.vue資料夾開發,那麼可以選擇Runtime-Only npm run build npm run dev vue-router基本使用 vue-router巢狀路由 vue-router引數傳遞 vue-router導航守衛