天天學一點 Vue3（一） CND方式的安裝以及簡單使用

時間 2021-01-29

標籤 css html vue node react git github vue-router vuex npm 欄目 CSS 简体版

原文原文鏈接

簡介

感受vue3的新特性很舒服，這樣纔是寫軟件的感受嘛。打算用Vue實現本身的一些想法。css

Vue3還有幾個必備庫，好比Vue-Router（負責路由導航）、Vuex（狀態管理、組件間通訊），還有第三方UI庫，好比element Plus、Antdv、Vant 等。html

這裏會介紹他們的CND的安裝方法，以及簡單的使用方式。vue

Vue3 的使用方式

使用方式有兩大類：node

CDN package
工程化方式開發

cnd方式就是在script裏面引用js文件（相似於JQuery），而後就能夠開魯了，簡單粗暴，適合於新手學習基礎知識，或者作點小項目。react

可是若是想要開發中大型項目的話，就須要使用工程化的開發方式了。
原本想在這裏把這兩種方式都寫完，可是沒想到cnd的方式越寫越多，因此仍是分紅兩份來寫把。工程化方式在下一篇。git

CND package 的方式

因爲使用範圍比較小，因此網上的介紹資料比較少，每每都是一筆帶過，這裏想作一個總體介紹，也許是由於我比較喜歡這種簡單粗暴的方式吧。github

不囉嗦，簡單粗暴，直接上代碼：vue-router

js腳本的引用方式

<script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>
    <script src="https://unpkg.com/vuex@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <link rel="stylesheet" href="js/antdv/antd.css">
    <script src="js/antdv/antd.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

https://unpkg.com/vue
引用默認版本的vue.js文件，目前是 v2.6.12。vuex
https://unpkg.com/vue@3
@後面能夠指定版本號。npm
https://unpkg.com/vue@next
引用最新版本。目前是3.0
Ant Design Vue
彷佛沒有提供cnd的方式，咱們須要先使用npm安裝，而後到（node_modules/）ant-design-vue/dist 裏面找到須要的文件，或者到 UNPKG 進行下載。
https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js
目前是 v1.0.2-beta.30，沒有發現next版本。

js腳本通常均可以採用這種方式引入，UI庫須要引入對應的css文件。

注意：https://unpkg.com/antd 這個是 react 的UI庫，並非Vue的，不要混淆。

vue3的簡單使用

數據綁定和UI庫的使用

數據綁定和UI庫的演示<br>
      {{value}}<br>
      <!--原生dom-->
      <input type="button" value="測試" @click="click"/><br>
      <!--element-plus 的 按鈕-->
      <el-button @click="click">elemet的按鈕</el-button><br>
      <!--Ant Design Vue 的 按鈕-->
      <a-button type="primary" @click="click">antdv的按鈕</a-button><br>
      <!--Vant 的 按鈕-->
      <van-button type="success" @click="click">vant的按鈕</van-button><br>

// vue3的 Composition API 的奧義，
    // 不要傻傻的把代碼都寫到setup裏面了，分出來寫纔是王道。
    // 便於複用，能夠寫到單獨的js文件裏面
    const testManage = () => {
      const value = Vue.ref('你好，世界') // 至關於data
      const click = () => { // 至關於 methods 裏面的事件
        value.value = '好的，收到！' + new Date()
      }

      return {
        value,
        click
      }
    }

    // 定義 vue3 的對象
    const vue3Composition = {
      setup() { // 傳說中的setup
        // 使用上面的定義的「類」，分散setup內部的代碼
        const { value, click } = testManage()
         
        return { // 返回給模板，不然模板訪問不到。這裏返回的是對象。
          value,
          click
        }
      }
    }
    // 建立vue3的實例
    const vm = Vue.createApp(vue3Composition)
      .use(myVuex) // 掛載vuex，myVuex在下面介紹
      .use(router) // 掛載路由，router 在下面介紹
      .use(antd) // 加載 Ant Design Vue
      .use(ElementPlus) // 加載ElementPlus
      .use(vant) // 加載vant
      .mount('#app') // 掛載Vue的app實例

通常UI庫用一個就行，不用都安裝。這裏只是想看看都安裝上會不會衝突，好吧，是我懶不想弄多個文件。

Vuex狀態管理的簡單使用

模板裏的使用方式

vuex狀態演示<br>
     <!--模板裏面能夠直接使用$store，固然不建議這麼用-->
      $store - count：{{$store.state.count}}<br> 
      $store - myObject：{{$store.state.myObject}}<br>
      $store - myObject.time：{{$store.state.myObject.time}}<br>
      <!--setup裏面返回的對象-->
      setup - count：{{count}}<br>
      setup - obj ：{{obj}}<br>
      setup - objTime ：{{objTime}}<br>
      <a-button type="primary" @click="setCount">vuex的 計數</a-button><br>
      <a-button type="primary" @click="setTime">vuex的 設置屬性</a-button><br>

定義一個vuex實例

// vuex 的簡單使用 =======================
    const myStore = {
      state: { // 能夠理解爲大號 data（不許確）
        count: 0,
        myObject: {
          time: '如今的時間'
        }
      },
      getters: { // 設置屬性的值
        getCount: (state) => {
          return state.count
        },
        getMyObject: (state) => {
          return Vue.readonly(state.myObject)
        },
        getTime: (state) => {
          return state.myObject.time
        }
      },
      mutations: { // 獲取屬性的值
        setCount(state) {
          state.count++
        },
        setTime(state) {
          state.myObject.time = '如今時間：' + new Date()
        }
      } // 其餘方法暫略
    }
    // 創建vuex的實例，vue3須要掛載實例，掛載方式在上面
    const myVuex = Vuex.createStore(myStore)

state
在vue3裏面，整個state都是Proxy的，也就是說，能夠認爲state是一個reactive。
這裏定義一個簡單類型和引用類型，state裏的簡單類型不會變，可是引用類型也會自動變成Proxy，也就不用咱們本身用Reactive了。
getMyObject 和 readonly
由於不建議在組件裏面直接對state設置值，而是要用 mutations 設置值，使用getters獲取值。
若是state是簡單類型的話沒有問題，可是若是state裏面有對象類型的話，那麼getters裏面直接return，就有可能發生誤賦值的問題。
爲了不這個漏洞，可使用readonly來返回，這樣組件裏面就沒法直接給state賦值了。

setup裏的使用方式

setup() { // 傳說中的setup
        // 得到store對象
        const store = Vuex.useStore()
        console.log(store) // 打印出來看看
        const setCount = () =>{ // 使用 mutations 的 setCount 實現計數
          store.commit('setCount')
        }

        const setTime = () =>{  // 使用 mutations 的 setTime 實現修改屬性
          store.commit('setTime')
          // 測試直接修改
          // 加上 readonly 就不可修改了，
          // 可是代碼並不會報錯
          setTimeout(() => {
            obj.time = '222'
            console.log('setTimeout-obj',obj)
          },500)
        }

        // 獲取state
        // const count = store.state.count 強烈建議不要直接訪問
        const count = store.getters.getCount
        const obj = store.getters.getMyObject
        const objTime = store.getters.getTime
        console.log('obj', obj)
        console.log('objTime', objTime)
        
        return {  // 返回給模板，不然模板訪問不到。
          value,
          click,
          setCount,
          setTime,
          count,
          obj,
          objTime
        }

路由的簡單使用

模板裏的使用方式，簡單版

路由的演示<br>
      <div>
        <p>
          路由的簡單演示，其實CND方式不太適合用路由，由於組件寫起來比較麻煩。<br>
          <!-- 使用 router-link 組件來導航. -->
          <!-- 經過傳入 `to` 屬性指定連接. -->
          <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
          <router-link to="/home">首頁</router-link>&nbsp;&nbsp;&nbsp;
          <router-link to="/product">產品</router-link>
        </p>
        <!-- 路由匹配到的組件將在這裏渲染 -->
        路由入口<br>
        <router-view></router-view>
      </div>

router-link
相似於 a 標籤。可是不要直接用 a 標籤，由於會致使頁面從新加載。
router-view
路由入口，或者說是容器，加載路由指定的組件的位置。

定義一個路由，簡單版

// 路由的簡單使用 ========================================
    // 一、定義組件，便於路由導航的演示，裏面能夠加vuex的state
    const home = { 
      template: '<div>僞裝這是首頁{{$store.state.myObject.time}}</div>',
      setup() {
        // alert('我是首頁')
      }
    }
    const product = { 
      template: '<div>僞裝這是商品頁面{{$store.state.count}}</div>',
      setup() {
        // alert('我是商品介紹')
      }
    }

    // 二、定義路由，路由規則
    const routes = [ 
      { path: '/home', component: home },
      { path: '/product', component: product }
    ]
    // 獲取路由方式
    const history = VueRouter.createWebHistory()
    // 3. 建立 router 實例，vue3須要掛載實例，掛載方式在上面
    const router = VueRouter.createRouter({
      history,
      routes
    })