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

相关推荐
会飞的鱼先生30 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱056744 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
咪库咪库咪3 小时前
vue1
前端·vue.js
洋333 小时前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js
李是啥也不会3 小时前
Vue中Axios实战指南:高效网络请求的艺术
前端·javascript·vue.js
JavaDog程序狗4 小时前
【实操】uniapp纯前端搞个识别植物花草小程序
前端·vue.js·uni-app
じ☆ve 清风°4 小时前
Vue.js 核心特性解析:响应式原理与组合式API实践
前端·vue.js
Sahas10196 小时前
vite+vue2+elementui构建之 vite.config.js
vue.js·elementui
itsOli6 小时前
(25)性能优化和项目上线 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
华洛7 小时前
从0到1打造企业级AI售前机器人——实战指南二:RAG工程落地之数据处理篇🧐
前端·javascript·vue.js