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

相关推荐
北海-cherish5 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
Superxpang8 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。8 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。8 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡8 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_8 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含8 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
90后的晨仔10 小时前
Vue中为什么要有 Provide / Inject?
前端·vue.js
f 查看所有勋章11 小时前
六轴工业机器人可视化模拟平台 (Vue + Three.js + Blender)
javascript·vue.js·机器人
ziyue757513 小时前
vue修改element-ui的默认的class
前端·vue.js·ui