vue3项目初始化

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

开始

使用cli创建vue项目

首先全局安装vue/cli,版本必须是4以上

npm install -g @vue/cli

使用cli创建项目

// test是随便写，是项目名称
vue create test 

根据提示进入到项目目录，启动项目

cd test
yarn serve

使用vite构建项目 啥是vite--下一代前端打包工具

优势如下 开发环境中，无需打包操作，可以快速冷启动 轻量快速的热重载 真正的按需编译，不再等待整个应用编译完成

// 创建工程  test_01是项目名称
yarn create vite test_01

进入项目并安装依赖启动

// 进入工程目录
  cd test_01
  // 安装依赖
  yarn
  // 启动项目
  yarn dev

main.js如下 引入createApp 工程函数，引入App组件。 调用createApp函数传入App组件，返回app实例，调用实例的mount方法，将组件挂载到真实节点#app上面 app 实例非常轻量，只包含一些必要的api

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

之前vue2是引入一个构造器函数Vue,然后new 一个vue实例。这样的缺点是vm实例比较重，包含了所有的api，无论用户是否使用，全都给准备好了

import Vue form 'vue'
import App from './App.vue'
const vm=new Vup({
    render:h=>h(App)
})
vm.$mount('#app');

App.vue组件如下 有一个变化点比较友好，就是之前vuetemplate模版里是不支持多个根标签的,现在在里面写两个也是可以的，没有什么问题。 export default 出去的对象里的name值，一般时候没什么用，但是递归组件就不可以没有他

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

基本结构总的来说和vue2变化不大。还可以接受