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

相关推荐
学习路上的小刘5 分钟前
vue h5 蓝牙连接 webBluetooth API
前端·javascript·vue.js
&白帝&5 分钟前
vue3常用的组件间通信
前端·javascript·vue.js
冯宝宝^1 小时前
基于mongodb+flask(Python)+vue的实验室器材管理系统
vue.js·python·flask
cc蒲公英2 小时前
Vue2+vue-office/excel 实现在线加载Excel文件预览
前端·vue.js·excel
森叶2 小时前
Electron-vue asar 局部打包优化处理方案——绕开每次npm run build 超级慢的打包问题
vue.js·electron·npm
小小竹子3 小时前
前端vue-实现富文本组件
前端·vue.js·富文本
青稞儿3 小时前
面试题高频之token无感刷新(vue3+node.js)
vue.js·node.js
程序员凡尘4 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
Bug缔造者10 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_10 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js