vue3完整教程从入门到精通（新人必学1，vue3快速上手）

概述：本章将会学习完整的vue3创建项目，由于本人是java后端的，所以有写的不好的地方，大家看完后尽情评论。由于文章太长，所以本人打算全放在一个分类为vue的栏目里面

目录

快速上手

创建一个 Vue 应用

通过 CDN 使用 Vue

比如说，我想定义一个网站

使用 ES 模块构建版本

---

快速上手

创建一个 Vue 应用

创建vue3的前提条件：

前提条件

• 熟悉命令行
• 已安装 18.0 或更高版本的 Node.js

由于以前大部分vue，用的都是18.0以前的版本，这里我先切换一下。

到你想创建的目录里面使用以下命令

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ 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 ./...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd vue-project
npm install
npm run dev

通过 CDN 使用 Vue

你可以借助 script 标签直接通过 CDN 来使用 Vue：

咱们可以把这个文件下载过来。

点击右键，另存为到指定的目录

然后用VScode打开即可,然后编写代码引用这个文件。

    
    
    
    


    

        {{msg}}
    
    

打开右键，指定默认浏览器，打开即可。

我这个是因为使用了Live Server的缘故，不过没有任何关系。

比如说，我想定义一个网站

    
    
    
    


    

        {{msg}}
        
{{web.title}}
        
{{web.url}}
    
    

使用 ES 模块构建版本

同样：把下面的文件复制过来。

https://unpkg.com/vue@3/dist/vue.esm-browser.js

    
    
    


    
{{ message }}

注意：模块化开发方式，必须按照Live Server插件