初识VUE3

我不是女神ヾ 2024-05-07 22:25 62阅读 0赞

## 1.VUE3官网 ##

[Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://cn.vuejs.org/][Vue.js - _ JavaScript _ _ Vue.jsVue.js - _ JavaScript _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vuejs.org]

## 2.通过Vite创建项目 ##

全局安装vite

npm config set registry=https://registry.npmmirror.com 使用国内源
    
    npm  install -g  vite@latest

[Vite | 下一代的前端工具链下一代前端工具链![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://cn.vitejs.dev/][Vite _ _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vitejs.dev]

### 2.1查看npm版本 (非必要) ###

npm --version8.15.0

### 2.2npm更新版本 (非必要) ###

$ npm install -g npm

## 3.创建项目 ##

npm init vite@latest vue3demo -- --template vue-ts

## 4.vscode打开项目 ##

![8cfebfed82aa4dbea4e03a0b93116d3b.png][]

### 运行命令 ###

npm installnpm run dev

## 5.总结->整体运行步骤： ##

1. npm  install -g  vite@latest
    2. npm init vite@latest 项目名称 -- --template vue-ts
    3. cd 到项目目录之后运行： 4. npm  install  
    5. npm  run  dev

## 6.使用组件 ##

<template>
      <MyComponent />
    </template>
    
    <script setup>
       import MyComponent from './MyComponent.vue'
    </script>

## 7.生命周期钩子函数 ##

[组合式 API：生命周期钩子 | Vue.jsVue.js - 渐进式的 JavaScript 框架![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://cn.vuejs.org/api/composition-api-lifecycle.html\#onmounted][API_ _ Vue.jsVue.js - _ JavaScript _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vuejs.org_api_composition-api-lifecycle.html_onmounted]

![31d718c920004fc881dd7b33d1586c38.png][]

[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[Vue.js - _ JavaScript _ _ Vue.jsVue.js - _ JavaScript _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vuejs.org]: https://cn.vuejs.org/
[Vite _ _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vitejs.dev]: https://cn.vitejs.dev/
[8cfebfed82aa4dbea4e03a0b93116d3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/d111ad5f3d084632844a031b13a06f6d.png
[API_ _ Vue.jsVue.js - _ JavaScript _icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_cn.vuejs.org_api_composition-api-lifecycle.html_onmounted]: https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted
[31d718c920004fc881dd7b33d1586c38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/c8b6c19a29984d41af2b177b0aed75e6.png