vue3学习使用笔记

news2024/11/20 7:03:52

1.学习参考资料

vue3菜鸟教程：https://www.runoob.com/vue3/vue3-tutorial.html
官方网站：https://cn.vuejs.org/
中文文档: https://cn.vuejs.org/guide/introduction.html
Webpack 入门教程：https://www.runoob.com/w3cnote/webpack-tutorial.html

2.创建vue3demo项目

（1）npm init vue@latest 创建 runoob-vue3-test 测试项目

# 最新稳定版
$ npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
注意：执行该命令前先cd到指定的目录，我用的idea执行的

$ npm init vue@latest
Need to install the following packages:
  create-vue@3.6.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 runoob-vue3-test，其他默认回车即可
&#x2714; Project name: … runoob-vue3-test
&#x2714; Add TypeScript? … No / Yes
&#x2714; Add JSX Support? … No / Yes
&#x2714; Add Vue Router for Single Page Application development? … No / Yes
&#x2714; Add Pinia for state management? … No / Yes
&#x2714; Add Vitest for Unit Testing? … No / Yes
&#x2714; Add an End-to-End Testing Solution? › No
&#x2714; Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/tianqixin/runoob-test/runoob-vue3/runoob-vue3-test...

Done. Now run:

  cd runoob-vue3-test
  npm install
  npm run dev

（2）npm init vite-app project-name 命令创建项目

npm init vite-app runoob-vue3-test2

在这里插入图片描述

（3）vue create 命令创建项目

语法：

vue create [options] <app-name>

创建一个由 vue-cli-service 提供支持的新项目

options 选项可以是：

-p, --preset ：忽略提示符并使用已保存的或远程的预设选项
-d, --default：忽略提示符并使用默认预设选项
-i, --inlinePreset ：忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager ：在安装依赖时使用指定的 npm 客户端
-r, --registry ：在安装依赖时使用指定的 npm registry
-g, --git [message]：强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git：跳过 git 初始化
-f, --force：覆写目标目录可能存在的配置
-c, --clone：使用 git clone 获取远程预设选项
-x, --proxy：使用指定的代理创建项目
-b, --bare：创建项目时省略默认组件中的新手指导信息
-h, --help：输出使用帮助信息

创建 runoob-vue3-app 项目：