初识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

相关推荐
阿懂在掘金12 小时前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架
小锋java123414 小时前
【技术专题】Vue3 - 生命周期
vue.js·vite
Highcharts.js15 小时前
Vue 3 + Highcharts Boost 可视化加速模块的完整示例
javascript·vue.js·可视化·boost·highcharts·图表渲染·加速模块
夏幻灵15 小时前
从语法坑点到 JS 内存底层:Vue 3 watch 侦听器深度全解
开发语言·javascript·vue.js
Sterting16 小时前
反馈组件:对话框、消息与通知
前端·javascript·vue.js
书中枫叶16 小时前
做了个「句拾」小程序,最难的不是业务,是字体
前端·javascript·vue.js
新时代牛马17 小时前
Vue.js 响应式原理详解
前端·javascript·vue.js
满栀58518 小时前
vue3动态路由详细效果
前端·javascript·vue.js·typescript·前端框架
山荷枝19 小时前
05-Vue
前端·javascript·vue.js
可爱的秋秋啊19 小时前
vue调用腾讯人脸组件封装+接口请求后端调用
前端·javascript·vue.js