每天学一点 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>
<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。https://unpkg.com/vue@3
@后面可以指定版本号。https://unpkg.com/vue@next
引用最新版本。目前是3.0Ant 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>
<router-link to="/product">产品</router-link>
</p>
<!-- 路由匹配到的组件将在这里渲染 -->
路由入口<br>
<router-view></router-view>
</div>
router-link
类似于 a 标签。但是不要直接用 a 标签,因为会导致页面重新加载。router-view
路由入口,或者说是容器,加载路由指定的组件的位置。
定义一个路由,简单版
// 路由的简单使用 ========================================
// 1、定义组件,便于路由导航的演示,里面可以加vuex的state
const home = {
template: '<div>假装这是首页{{$store.state.myObject.time}}</div>',
setup() {
// alert('我是首页')
}
}
const product = {
template: '<div>假装这是商品页面{{$store.state.count}}</div>',
setup() {
// alert('我是商品介绍')
}
}
// 2、定义路由,路由规则
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
每天学一点 Vue3(一) CND方式的安装以及简单使用的更多相关文章
- 学一点 MYSQL 双机异地热备份—-MYSQL主从,主主备份原理及实践
简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做 ...
- 每天学一点Python
9月11日 1.用List实现Python里的?:条件表达式 ["false","true"][判断条件] 其实就是一个List[0]还是List[1]的问题. ...
- centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课
centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课 打命令之后可以输入: e ...
- 《Linux就该这么学》培训笔记_ch01_部署虚拟环境安装Linux系统
<Linux就该这么学>培训笔记_ch01_部署虚拟环境安装Linux系统 文章最后会post上书本的笔记照片. 文章主要内容: 在虚拟机中安装红帽RHEL7系统 在Linux系统中找回r ...
- Centos以rpm方式进行安装MySql
安装过很多次mysql了,却没好好总结过,每次安装完了都忘,下次还要重新Google,这次总结下,自己以后也有的查. 1.安装采用的的rpm包的方式,安装前要先看系统内是否安装了旧版本的MySql和m ...
- centos7 使用 omnibus包安装方式,安装 gitlab7.4
centos7 使用 omnibus包安装方式,安装 gitlab7.4 1: gitlab是一个开源的软件,类似于github.com那样的git代码管理仓库: 官网 https://about.g ...
- 二进制方式快速安装MySQL数据库命令集合
二进制方式快速安装MySQL数据库命令集合 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 1.安装mysql ls mysql ...
- 在Ubuntu上使用离线方式快速安装K8S v1.11.1
在Ubuntu上使用离线方式快速安装K8S v1.11.1 0.安装包文件下载 https://pan.baidu.com/s/1nmC94Uh-lIl0slLFeA1-qw v1.11.1 文件大小 ...
- php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展
php安装soap等扩展的方式: 已经安装了php却发现少安装了一下扩展 1.首先确认下php.ini的安装位置 我的安装目录是: /usr/local/php 一般位置: /usr/local/ph ...
随机推荐
- inotifywait命令如何监控文件变化?
转载自:https://segmentfault.com/a/1190000038351925 文件监控可以配合rsync实现文件自动同步,例如监听某个目录,当文件变化时,使用rsync命令将变化的文 ...
- 手写一个简单的starter组件
spring-boot中有很多第三方包,都封装成starter组件,在maven中引用后,启动springBoot项目时会自动装配到spring ioc容器中. 思考: 为什么我们springBoot ...
- java: Compilation failed: internal java compiler error
IDEA 编译项目出现java: Compilation failed: internal java compiler error 原因: 项目Java版本不一致 解决办法: 点击FIle> ...
- 你的项目中使用过哪些JSTL标签?
项目中主要使用了JSTL的核心标签库,包括< c:if>.< c:choose>.< c: when>.< c: otherwise>.< c:f ...
- SpringBoot 2.X以上集成redis
在网上看到的教程和资料大多数都是2.X以下的版本.使用起来会出现各种问题,通过百度,最后终于弄好了. 2.x以上使用的是 spring-boot-starter-data-redis 2.x一下使用的 ...
- 当Thymeleaf遇到向js中传值的操作
在使用Thymeleaf的时候.关于一些点击操作非常头疼.往往需要向JS里面传递各种东西. 然而,在用Thymeleaf的时候.js操作需要拼接语句.但是又不好拼接. 关于一些操作,一般也是在表格中. ...
- Spring Boot 自动配置之@Conditional的使用
Spring Boot自动配置的"魔法"是如何实现的? 转自-https://sylvanassun.github.io/2018/01/08/2018-01-08-spring_ ...
- LeapMotion控制器 java语言开发笔记--(LeapMotion控制器简介)
(1)LeapMotion系统识别和追踪手,手指,以及根手指类似的工具,这个设备运行在一个极小的范围,这个范围拥有个高精度,高跟踪频率可以记录离散的点,手势,和动作. (2)LeapMotion控制器 ...
- Kafka基本原理概述
Kafka的基本介绍 Kafka是最初由Linkedin公司开发,是一个分布式.分区的.多副本的.多订阅者,基于zookeeper协调的分布式日志系统(也可以当做MQ系统),常见可以用于web/ngi ...
- 分装button组件引发的内存泄漏问题
这个问题其实一开始在vue里写的时候并没有注意到这一点,也没有报错,直到在react里写的时候给我报了一堆错之后,经各种磨烂之后最终找到是分装button组件的问题,既然找到问题在哪就好办了 直接先上 ...