vue3快速上手（上

vue3快速上手（上

简介： vue是渐进式mvvm框架，其特点是使用模板语法，组件化开发单页应用，提供生命周期函数，体积小，上手快，性能高等,这一章主要讲的是vue的基础，模板语法，事件处理，还有一个简易的todo应用，有vue2基础的可以跳过,如果你没有任何基础，那么我推荐你先学习或了解一下 js es6再来学习vue

一、安装

1、基于vite 的构建工具

推荐基于Vite 构建，vite是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！
IDE 推荐 VScCode + Volar
推荐安装 chrome 浏览 + vue devtool 扩咋韩
本地安装：输入项目名称，选择三件套（vue vue-router pinia）即可。。

npm init vue@latest 

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
cd <your project name>
cnpm/yarn intall 

查看 main.js入口文件

import { createApp } from 'vue' //引用 creaeApp 方法
import { createPinia } from 'pinia' // 引用 createPinia 方法

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

2、cdn

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{
  { message }}</div>

<script>
  const { createApp } = Vue

  createA