概述：本章将会学习完整的vue3创建项目，由于本人是java后端的，所以有写的不好的地方，大家看完后尽情评论。由于文章太长，所以本人打算全放在一个分类为vue的栏目里面
快速上手
创建一个 Vue 应用
创建vue3的前提条件：
前提条件
- 熟悉命令行
- 已安装 18.0 或更高版本的 Node.js
由于以前大部分vue，用的都是18.0以前的版本，这里我先切换一下。
到你想创建的目录里面使用以下命令
npm create vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
✔ 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 an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
cd vue-project
npm install
npm run dev
通过 CDN 使用 Vue
你可以借助 script 标签直接通过 CDN 来使用 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
咱们可以把这个文件下载过来。
点击右键，另存为到指定的目录
然后用VScode打开即可,然后编写代码引用这个文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
{
{msg}}
</div>
<script>
Vue.createApp({
//setup选项用于设置响应数据和方法等
setup() {
return {
msg:"cyl tql"
}
}
}).mount("#app")
</script>
</body>
</html>
打开右键，指定默认浏览器，打开即可。
我这个是因为使用了Live Server的缘故，不过没有任何关系。
比如说，我想定义一个网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
{
{msg}}
<h1>{
{web.title}}</h1>
<h2>{
{web.url}}</h2>
</div>
<script>
Vue.createApp({
//setup选项用于设置响应数据和方法等
setup() {
const web= Vue.reactive({
title:"cyl tql",
url:"tql.com"
})
return {
msg:"cyl tql",
web
}
}
}).mount("#app")
</script>
</body>
</html>
使用 ES 模块构建版本
同样：把下面的文件复制过来。
https://unpkg.com/vue@3/dist/vue.esm-browser.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{
{ message }}</div>
<script type="module">
import { createApp, ref } from './vue.esm-browser.js'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>
注意：模块化开发方式，必须按照Live Server插件
