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

相关推荐
Hilaku20 分钟前
前端权限系统怎么做才不会写吐?我们项目踩过的 3 套失败方案总结
前端·javascript·vue.js
nbsaas-boot25 分钟前
Vue 组件数据流与状态控制最佳实践规范
前端·javascript·vue.js
鹏多多.42 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js·前端框架
初心w50t243 分钟前
el-tree的属性render-content自定义样式不生效
前端·javascript·vue.js
网络点点滴1 小时前
什么是Vue.js
前端·javascript·vue.js
代码老y1 小时前
Spring Boot + MyBatis + Vue:全栈开发中的最佳实践
vue.js·spring boot·mybatis
石小石Orz2 小时前
如何将本地文件转成流数据传递给后端?
前端·vue.js
tianzhiyi1989sq3 小时前
Vue框架深度解析:从Vue2到Vue3的技术演进与实践指南
前端·javascript·vue.js
团酱3 小时前
sass-loader与webpack版本冲突解决方案
前端·vue.js·webpack·sass
可可格子衫5 小时前
keep-alive缓存文章列表案例完整代码(Vue2)
vue.js·缓存