初识VUE3

1.VUE3官网

https://cn.vuejs.org/

2.通过Vite创建项目

全局安装vite

XML 复制代码
npm config set registry=https://registry.npmmirror.com 使用国内源

npm  install -g  vite@latest

安装vite前要先查看镜像源地址并使用国内镜像源地址

复制代码
//查看镜像源地址
npm config get registry
//更换国内镜像源地址
npm config set registry=https://registry.npmmirror.com

VUE3官网

2.1查看npm版本 (非必要)

XML 复制代码
npm --version
8.15.0

2.2npm更新版本 (非必要)

XML 复制代码
$ npm install -g npm

3.创建项目

XML 复制代码
npm init vite@latest vue3demo -- --template vue-ts

4.vscode打开项目

4.1运行命令

XML 复制代码
npm install
npm run dev

5.总结->整体运行步骤:

XML 复制代码
1. npm  install -g  vite@latest
2. npm init vite@latest 项目名称 -- --template vue-ts
3. cd 到项目目录之后运行: 
4. npm  install  
5. npm  run  dev

6.使用组件

XML 复制代码
<template>
  <MyComponent />
</template>

<script setup>
   import MyComponent from './MyComponent.vue'
</script>

7.生命周期钩子函数

https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted

相关推荐
SuperEugene7 分钟前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript
还是大剑师兰特1 小时前
Vue3 报错:computed value is readonly 解决方案
前端·vue.js
北寻北爱2 小时前
前端加密解密- base64、md5、sha256、AES
前端·vue.js
spencer_tseng3 小时前
Vue node_modules
javascript·vue.js
SuperEugene4 小时前
前端 console 日志规范实战:高效调试 / 垃圾 log 清理与线上安全避坑|编码语法规范篇
开发语言·前端·javascript·vue.js·安全
发现一只大呆瓜4 小时前
Vue - @ 事件指南:原生 / 内置 / 自定义事件全解析
前端·vue.js·面试
庄小焱4 小时前
React——React基础语法(1)
前端·javascript·vue.js
椰子皮啊6 小时前
mediasoup+Vue3避坑指南:解决黑屏、闪屏、流绑定失效三大难题
vue.js·前端框架
吠品7 小时前
Vue项目Moment.js引入优化:全局挂载与按需引入的深度解析与最佳实践
前端·javascript·vue.js
FanetheDivine7 小时前
在react中使用signal
vue.js·react.js