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

nanshaws

已于 2024-01-27 11:44:26 修改

阅读量1k

点赞数 11

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-01-27 10:42:56 首次发布

本文链接：https://blog.csdn.net/m0_63251896/article/details/135878919

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概述：本章将会学习完整的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插件

nanshaws

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3完整教程从入门到精通（新人必学1，vue3快速上手）

vue3完整教程从入门到精通（新人必学1，vue3快速上手）本章将会学习完整的vue3创建项目，由于本人是java后端的，所以有写的不好的地方，大家看完后尽情评论。 {{msg}}//setup选项用于设置响应数据和方法等setup() {})return {web
复制链接

扫一扫