天天学一点 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
    })

const home 、const product
须要先定义两个简单的组件，便于演示。
const routes
定义一个简单的路由规则。
VueRouter.createWebHistory()
建立一个导航方式，hash 和 history api（历史模式）。默认是history api。
VueRouter.createRouter
建立一个路由的实例，而后把这个实例挂到app实例上面。这样就能够正式使用路由了。
setup
能够不在在setup里面写代码，固然也能够在setup里面手写路由，这里就不演示了。

小结

以上就是cnd方式的vue3的加载方式和简单使用，包含路由、状态管理、UI库的引入、绑定、事件等。
这里主要介绍如何组合起来，而不是具体用法。具体用法后面会陆续介绍。

在线演示

https://naturefwvue.github.io/vue3-zhihu/src/cnd-blog/cnd.html
github 有点卡，可能会转好久。（或者是js挂的有点多。。。）
若是等不急的话，能够到下面看源码。

源码

https://github.com/naturefwvue/vue3-zhihu/blob/main/src/cnd-blog/cnd.html