setup中使用vuex_每天学一点vue3（一）CND方式的安装以及简单使用

简介

感觉vue3的新特性很舒服，这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。

Vue3还有几个必备库，比如Vue-Router（负责路由导航）、Vuex（状态管理、组件间通信），还有第三方UI库，比如element Plus、Antdv、Vant 等。

这里会介绍他们的CND的安装方法，以及简单的使用方式。

Vue3 的使用方式

使用方式有两大类：

• CDN package
• 工程化方式开发

cnd方式就是在script里面引用js文件（类似于JQuery），然后就可以开鲁了，简单粗暴，适合于新手学习基础知识，或者做点小项目。

但是如果想要开发中大型项目的话，就需要使用工程化的开发方式了。

本来想在这里把这两种方式都写完，但是没想到cnd的方式越写越多，所以还是分成两份来写把。工程化方式在下一篇。

CND package 的方式

由于使用范围比较小，所以网上的介绍资料比较少，往往都是一笔带过，这里想做一个整体介绍，也许是因为我比较喜欢这种简单粗暴的方式吧。

不啰嗦，简单粗暴，直接上代码：

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>
    // element-plus 引入样式
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    // element-plus 引入组件库
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    // Ant Design Vue 引入样式
    <link rel="stylesheet" href="js/antdv/antd.css">
    // Ant Design Vue 引入组件库
    <script src="js/antdv/antd.js"></script>
    // Vant 引入样式文件
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>
    // Vant 引入组件库
    <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

• https://unpkg.com/vue

引用默认版本的vue.js文件，目前是 v2.6.12。

• https://unpkg.com/vue@3

@后面可以指定版本号。

• https://unpkg.com/vue@next

引用最新版本。

• Ant Design Vue

似乎没有提供cnd的方式，我们需要先使用npm安装，然后到 （node_modules/）ant-