新建vue單頁面應用

一共有兩種方式：

1. vue/cli

2. vite

vue/cli

vue/cli是基於webpack

npm install -g @vue/cli

這樣就可以在全域性安裝vue/cli，輸入命令，檢視安裝是否成功

vue  --version
#or
vue -V

能出現對應的vue/cli的版本，即為安裝成功。

在這一步過程中，很可能會出錯，出錯率10%左右，如果安裝明明成功了，但是無法顯示版本號，並且提示vue not ...command，則為環境變數需要配置。

npm list -g

檢視全域性環境下，包安裝路徑，複製其，配置電腦的環境變數，重啟cmd即可。

vue/cli安裝成功後，即可新建專案

使用vue/cli新建專案有兩種方式

命令列新建

vue create hello-world

中間經過若干步驟，按需匯入使用。

O Babel   把es6等高階程式碼轉成低端程式碼，供低版本瀏覽器使用
O TypeScript     TS微軟新出的一門語言，可以用來生成js
o Progressive Web App (PWA) Support      移動端app支援
o Router    路由
o Vuex      一種統一狀態管理工具（存資料的）
o CSS Pre-processors       css前處理器支援（可以用來把less等高階css語言轉成普通css）
• Linter / Formatter     （程式碼風格）
o Unit Testing      測試
O E2E Testing       測試
 

vue ui新建（不推薦）

vue ui

正常情況下，會自動開啟預設瀏覽器頁面，進行配置

如果出錯，檢查把防毒軟體都關掉

使用vite新建

不基於webpack，速度更快，體積更小，僅支援vue3.x，不支援2.x，並且目前還不是很穩定，正在完善中，建議將來使用。

npm init vite-app hello-world

如果報錯：

Need to install the following packages:
create-vite-app
Ok to proceed? (y)

輸入y進行安裝create-vite-app即可。

專案目錄

babel.config.js    babel配置檔案
dist    生成的用於上線的低端程式碼
jsconfig.json       js配置檔案
node modules       包倉庫
package-lock.json     package的升級版，把包固定在某個版本
package.json      專案配置檔案
public   公共檔案
README.md    
src   程式設計師開發寫的內容
    App.vue   主元件
    assets    靜態檔案
    components 元件盛放資料夾
    main.js    主要js（入口js）
vue.config.js       vue配置檔案
 

vue專案的執行流程

在工程化的專案中，vue要做的事很單純，就是通過main.js將App.vue渲染到index.html的指定區域（一般預設為id為app的div）中

其中：

App.vue用來編寫待渲染的模板結構

index.html中需要預留一個el區域也就是待替換區域

main.js把App.vue渲染到index.html所預留的區域中

元件

新建元件，引入元件，註冊元件，使用元件

什麼是元件化開發

元件化開發指的是： 根據封裝的思想，把頁面上的可重複使用的UI結構封裝成元件，

從而方便專案的開發與維護。

vue是一個支援元件化開發的前端框架

vue元件名首字母大寫

vue中規定：元件的字尾名是·vue。之前接觸的App.vue檔案本質上就是vue的一個元件。

vue元件的三個組成部分：

template ： 元件的模板結構 （必須具備） vue2.0在使用時template裡只允許一個根節點

script ： 元件的js行為

style ： 元件的樣式

注意：每個元件必備template模板結構,而script行為和style樣式是可選的組成部分。

讓style中支援less語法

<style lang="less">
//lang="less"屬性，啟用less語法
</style>

元件的data必須是函式

使用元件的三個步驟

使用import語法匯入需要的元件

import Header from '@/components/Header.vue'

使用components節點註冊元件

export default{
    components:{
        Header
    }
}

以標籤形式使用剛才註冊的元件

<div class="box">
    <Header></Header>
</div>

通過components註冊的是私有子元件

註冊全域性元件

在vue專案的main.js入口檔案中，通過Vue.component( )方法，可以註冊全域性元件.

//匯入需要全域性註冊元件
import App from '@/components/App.vue'
​
//引數1 : 字串形式， 表示元件的’註冊名稱‘（自定義）
//引數2  ： 需要被全域性註冊的元件
Vue.compoent('App',App)

父子間的傳值

父傳子用props（props驗證，指定預設值，指定多個數據型別）

子傳父用$emit（傳參）

vue-router路由

vue3.0專案中如何配置路由(五個步驟)

新建一個專案，初始化npm i 下載vue-router，在路由檔案中引入相關依賴

import {createRouter,createWebHashHistory} from 'vue-router'

建立路由資訊物件陣列

 routes:[
        {path:'/bar',component:Bar}, //route ，每一組路由資訊物件
        {path:'/foo',component:Foo},
        //動態路由的設定
        //的一種傳參方式：params傳參
        //{path:'/user/:id/:name/:age',component:User}
        //第二種傳參方式，props值為布林值是
        {path:'/user/:id/:name/:age',component:User,props:true},
        // 第三種傳參方式，props為函式時
        {path:'/user',
        name:'user',
        component:User,
        props(route){
            return{
                id:route.params.id,
                name:route.params.name,
                age:route.params.age
            }
        }}
    ]

建立路由管理物件並對外丟擲

//建立路由管理器物件
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'/bar',component:Bar}, //route ，每一組路由資訊物件
        {path:'/foo',component:Foo},]
})

在main.js使用use(router)方法，將路由管理器物件與當前vue專案相關聯

import router from './router'
​
createApp(App).use(router).mount('#app')
​

在專案中設定路由導航router-link與路由出口router-view

    <router-view />
    <router-link to="/bar">Bar</router-link>
    <router-link to="/foo">Foo</router-link>

route routes router之間的區別

1,route: 一組路由資訊物件

{path:'/foo',component:Foo},

2.routes:路由資訊物件陣列

routes:[
        {path:'/bar',component:Bar}, 
        {path:'/foo',component:Foo}
        ]

3,router : 路由管理器物件

const router = createRouter({})

動態路由

定義： 我們經常需要把某種模式匹配到所有的路由，全都對映到同一個元件。

例如：我們有一個User元件，對於所有id各不相同的使用者，都有使用這個元件渲染

元件間的資料通訊

父子元件之間的資料通訊

vue合成API setup()

vue3.0最重要的新特性之一

vue作用：之前vue物件規定了我們必須把某一類資料放到某一類結構中，這樣一定程度上對我們的程式碼進行了強制分割。

在vue3.0中我們引入了setup()合成API語法，他可以將某資料關聯的內容整合在一個部分，即使setup中內容越來越多，也會圍繞著大而不亂的形式開發專案。

import { ref } from 'vue'
export default {
    setup(){
        const count = ref(0)
        function changeCount(){
         count.value++
        }
        return { count,changeCount}
    },
}

setup( )特點

setup( )結構中定義的變數，函式都需要return之後才可以在模板中使用

setup（ ）是處於created生命週期之前的函式，也就是說data,methods中的資料無法訪問到的，setup（）結構中的this指向undefined

1.reactive 在setup中包裝物件.陣列形式的資料，使其變成響應式資料

2.ref 在setup中只能包裹字串或數字形式的資料（值），使其變為響應式資料

3.torefs 可以直接在Html模板中使用物件的屬性名當變數，不需要使用 . 訪問

import { ref,toRefs,reactive } from 'vue'
​
 const count = ref(0);
    function changeCount() {
      count.value++;
    }
    const arr = reactive([1, 2, 3, 4, 6]);
    return { count, ...toRefs(student), arr, changeCount };

生命週期函式和vue3.0setup（ ）中使用

Vue生命週期是指vue例項物件從建立之初到銷燬的過程。

先引入

import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";