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

相关推荐
天天向上10241 天前
vue 网站导航栏
前端·javascript·vue.js
JIngJaneIL1 天前
财务管理|基于SprinBoot+vue的个人财务管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·财务管理系统
qq_338032921 天前
VUE的生命周期钩子,vue2和vue3的生命周期钩子的核心差异
前端·javascript·vue.js
天天向上10241 天前
在 Vue3 项目中使用 el-tree
javascript·vue.js·elementui
TivonaLH1 天前
v-code-diff入口文件的配置
前端·javascript·vue.js
计算机学姐1 天前
基于SpringBoot的动漫推荐系统【协同过滤推荐算法+词云图+排行榜】
java·vue.js·spring boot·后端·mysql·intellij-idea·推荐算法
rookie_fly2 天前
基于Vue的数字输入框指令
前端·vue.js·设计模式
西部森林牧歌2 天前
Arbess零基础学习,使用Arbess+GitLab实现Vue.js项目构建并主机部署
vue.js·gitlab·arbess·tiklab devops
我有一棵树2 天前
Vue 项目中全局样式的正确写法:不要把字体和主题写在 #app 上
前端·javascript·vue.js
wangbing11252 天前
开发指南139-VUE里的高级糖块
前端·javascript·vue.js