Vue Vue3项目创建和学习

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

创建vue3项目

使用vue cli创建

使用vue cli创建vue3项目官方文档

##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
或
vue -V
##安装或者升级你的@vue/cli
npm install -g @vue/cli
##创建
vue create vue_test
##启动
cd vue_test
npm run serve
复制代码

查看版本，创建 vue3_test 项目

选择使用 vue3

选择安装使用 NPM

等待 ing

创建成功，进入项目，并运行：

使用vite创建

使用vite安装官方文档

vite官网

。什么是vite? ——新一代前端构建工具 。优势如下:

------1、开发环境中，无需打包操作，可快速的冷启动

------2、轻量快速的热重载(HMR)

------3、真正的按需编译，不再等待整个应用编译完成

##创建工程
npm init vite-app <project-name>
##进入工程目录
cd <projecl-name>
##安装依赖
npm install
##运行
npm run dev

复制代码

按照步骤执行以上命令即可：

分析目录结构

分析 Vue cli 创建的Vue3项目目录结构

首先看 main.js

//引入的不再是Vue构造函数了
//引入的是一个名为 createApp 的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似vue2中的vm,但更“轻”)
createApp(App).mount('#app')
复制代码

在 vue.config.js 中增加 lintOnSave:false 来关闭语法检查

App.vue 中

<template>
  <!--vue3组件中模板结构可以没有根标签-->
  <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>

<style>
......
</style>
复制代码

其他和 vue2 差不多

安装开发者工具

Chrome 网上商店里搜索 vue，安装第一个带 beta 角标的这个，支持 vue3。之前安装的 vue 开发者工具可以禁用了