vue3.0安装，创建Vue3.0项目

使用vue-cli创建

官网地址

https://cli.vuejs.org/zh/guide/creating-a-project.html

安装

1.查看@vue/cli版本，确保@vue/cli版本在4.5.0以上

vue --version 或 vue -V

2.安装或者升级你的@vue/cli

npm install -g @vue/cli

3.创建

vue create 文件名

4.选择Vue3

使用vite创建

官网地址

https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn/

什么是vite?

新一代前端构建工具

优势

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

轻量快速的热重载（HMR）

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

传统构建与vite构建对比图

安装

创建工程 $ npm init vite-app <project-name>

进入工程目录 $ cd <project-name>

安装依赖 $ npm install

运行 $ npm run dev

内容介绍

main.js

//引入的不再是Vue构造函数了,引入的是一个名为createApp 的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

//创建应用实例对象--app(类似于之前Vue2中的vm,但app比vm更“轻”)

const app = createApp(App)

//挂载

app.mount('#app')

App.vue

<!--Vue3组件中的模板结构可以没有根标签-->

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

</template>

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。