Vue3.x的安装和初始化

vue3的官网

https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88

下载Vue2.x

npm install vue

Vue3.x的CDN加载

<script src="https://unpkg.com/vue@next"></script>

Vue3.x相关下载

# 更新npm到最新
npm install npm@latest -g
# 下载vue3.x
npm install vue@next
npm i vue@next
# 不建议全局安装，因为vue总是在框架项目中各自使用各自的
npm install vue@next -g
# 更新vue
npm update vue@next
# 卸载vue
npm uninstall vue@next

我们指定，在国内访问国外的服务器非常的慢，而npm的官网镜像就是国外的服务器。为了节省安装模块的时间，可以使用淘宝镜像，安装命名如下：

npm install -g cnpm --registry=https://registry.npmmirror.com

以后就可以直接使用cnpm安装任何模块了

cnpm install vue@next

第一个Vue3.x实例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
</head>
<body><!--定义一个视图--><div id="app"><!---View视图---><input type="text" v-model="title"/><!--渲染data数据模型中数据到视图中--><h1>{ {title} }< /h1><!--渲染属性--><a v-bind:href="url" target="_blank">yykk网站< /a><!--渲染html--><p>{ {chtml} }< /p><p v-html="chtml">< /p><!--事件绑定和处理--><button v-on:click="clickme">点我< /button></div><!--引入vue3.xjs-->
<script src="js/vue.global.js"></script>
<!--创建一个vue实例-->
<script>
const vm = Vue.createApp({ //--------------ViewModel---vuedata() { //数据模型Model -- JavaBeanreturn {title: "Hello Vue3.x我来了!!!",url: "https://www.itbooking.net",chtml: "<strong>我是一个帅哥!!!</storng>"}},methods: {clickme() {alert(this.title)this.title = "nihao";}}
}).mount("#app"); //挂载点/*
* vue规律:
* 初始化是固定格式，Vue.createApp任何一个单词都不能写错，必须完全匹配。
* vue2和vue3的改变：初始化发生了改变和data不在对象，而是一个函数+返回对象+和生命周期进行融合。
*
*
* 1：如果你页面上的数据需要被替换，那么就必须先到data中定义一个属性
* 2: 想尽一切办法然后通过axios或者一些事件去改变这个data属性，vue就自动去替换view视图
* 3: 替换过程中，可能会用vue指令和语法
* 4: 后续用在vue指令上的东西都必须在data中定义
*
* */</script></body>
</html>

Vue3.x的安装和初始化相关推荐

VUE3.0 一.安装node.js、vue3.0脚手架
VUE3.0 一.安装node.js.vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本,出现版本号即安装成功. npm -v # 6.13.4node - ...
mysql安装后第一次操作_MySQL数据库之mysql 安装成功以及第一次安装成功初始化密码操作...
本文主要向大家介绍了MySQL数据库之mysql 安装成功以及第一次安装成功初始化密码操作 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 一把文件解压到一个目录下技术分享图 ...
始化mysql系统库_安装和初始化mysql-8.0.11-winx64
一.下载解压,设置配置文件 [mysql] ; 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] ;设置3306端口 port = 3306 ; ...
Fabric 链码Chaincode　的安装、初始化、调用、升级
Fabric 链码Chaincode 的安装.初始化.调用.升级 Fabric chaincode 上一篇文章,我们启动了一个Fabric网络,这篇文章来看看在Fabric网络进行应用的开发. 上一篇 ...
vue-router 源码：路由的安装与初始化
使用日常我们使用 vue-router 时: 在 template 中我们用 <router-link> 来做路由跳转,用 <router-view> 来做路由跳转后的展示. ...
mysql root远程访问权限_mysql8.0 Server在Windows平台中的安装、初始化和远程访问设置...
mysql8.0 server安装 1.下载mysql 8.0 可以到mysql官网下载 https://dev.mysql.com/downloads/mysql 或者如下地址 mysql-8.0. ...
Hexo 入门指南（二） - 安装、初始化和配置
安装和初始化 linux下打开bash,win下面打开cmd,输入: $ npm install hexo -g $ hexo init blog $ cd blog $ npm install $ ...
sql安装程序初始化_SQL Server安装程序–即时文件初始化（IFI）
sql安装程序初始化 If SQL Server needs to allocate space, first it fills the space it needs with zeros. Exam ...
k8s上安装并初始化Helm。minikube
helm简介 Helm 可以理解为 Kubernetes 的包管理工具,可以方便地发现.共享和使用为Kubernetes构建的应用. Helm 采用客户端/服务器架构,有如下组件组成: Helm C ...
k8s上安装并初始化Helm,helm基础使用教程
全栈工程师开发手册 (作者:栾鹏) 架构系列文章 helm的github地址:https://github.com/helm/helm?spm=a2c4g.11186623.2.7.Qr9c2B he ...

Vue3.x的安装和初始化

文章目录

Vue3.x的安装和初始化

vue3的官网

下载Vue2.x

Vue3.x的CDN加载

Vue3.x相关下载

第一个Vue3.x实例

Vue3.x的安装和初始化相关推荐

最新文章

热门文章